배열을 자바스크립트를 실습하면서도 배워보았다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>배열</h2>
여러 개의 기억장소에 대해 대표명(배열명) 하나만을 부여하고.
배열명[첨자] 형태로 각 기억장소를 구분. 반복처리가 효과적<br>
<br>형식 : 배열명 = new Array();
<hr>
<script type="text/javascript">
let aa = new Array();
aa[0] = 10;
aa[1] = 10.5;
aa[3] = '결과는';
aa[4] = "안녕";
aa[5] = true;
aa[6] = {kbs:9, sbs:5}; //json format
document.write('<br>');
document.write(typeof aa, "<== 보이죠 참조형 <br>");
let i1=3; // 첨자 변수로 사용할 목적
document.write(`${aa[i1]} aa[0] : ${aa[0]} aa[1] : ${aa[1]} 전체 크기는 ${aa.length}`);
// length : prototype member field
document.write('<br>', aa[2]);
document.write('<br>', aa[4], aa[5], aa[6].kbs, aa[6]['sbs']);
document.write('<br>');
let bb = new Array(100, 200, 300); // 선언과 함께 초기치 부여
document.write(`bb[0] : ${bb[0]} bb[1] : ${bb[1]} bb[2] : ${bb[2]} 전체 크기는 ${bb.length}`);
document.write('<br>');
let cc = []; // 비어있는 배열 선언
cc[0] = 'tom';
cc.push(23); // prototype method
cc.push('seoul');
cc.push(82, 1234, 5678);
cc[99] = 'wow';
document.write(cc[0], ' ', cc[1], ' ', cc[2], ' ', cc[3], ' ', cc[4]);
document.write(`cc 배열의 크기는 ${cc.length}`);
document.write('<br>');
let dd = new Array(); // 배열 선언 후 for를 통해 입출력
for(let m=0; m<10; m++){ // 입력
dd[m] = m + 1;
}
for(let m=0; m<10; m++){ // 출력
document.write(dd[m] + " ");
}
document.write('<br>');
let animal = ['토끼', '사슴', '침팬지'];
for(let ani=0; ani< animal.length; ani++){
document.write(animal[ani] + " ");
}
document.write('<br>');
let [kbs, mbc] = [9, 11];
document.write(`<br>kbs : ${kbs} mbc : ${mbc}`);
document.write('<br>');
let myarr = [ // 배열 요소의 자료형엔 제약이 없다.
'안녕',
true, 3.5,
{name:'신기해'},
function() {
// alert('반가워');
document.write('함수 실행');
}
];
document.write(myarr[0]);
document.write(myarr[3].name);
myarr[4]();
document.write('<br>');
let arrliteral = [
[1, 2, 3],
['a', 'b'],
[4, 5]
];
document.write(arrliteral);
document.write('<br>', arrliteral[0]);
document.write('<br>', arrliteral[0][0]);
document.write('<hr>');
// 배열 요소 출력시 for 사용
let korea = ['연필', '지우개', '노트'];
// 방법1
for(let i = 0; i < korea.length; i++) {
document.write(korea[i], ' ');
}
// 방법2
for(let i of korea) {
document.write(i, ' ');
}
// 방법3
for(let i in korea) {
document.write(korea[i], ' ');
}
/*
document.write('<br>');
// document 객체 요소 값 출력
let output = '';
for(let k in document) {
output += '[' + k + ']' + document[k] + '<br>';
}
document.write(output);
*/
document.write('<br>');
// 배열 요소 제거 : delete, splice
let ar = ['I', 'go', 'home'];
delete ar[1]; // go를 삭제, 자리는 남음
document.write(ar, ' ', ar.length); // I,home 3
document.write('<br>');
ar = ['I', 'go', 'home'];
ar.splice(1, 1); // 인덱스 1부터 1개 삭제
document.write(ar, ' ', ar.length);
//ar.pop(); // 배열의 마지막 요소 삭제
ar.shift(); // 배열의 첫번째 요소 삭제
document.write(ar, ' ', ar.length);
ar.push('good');
ar.splice(2, 0, 'kbs', 'mbc');
document.write('<br>', ar, ' ', ar.length);
document.write('<hr>');
// 구조분해 할당 : 배열 객체의 값들을 추출하여 한 번에 여러 변수에 할당함.
let nums = [1, 2, 3, 4];
let [a1, a2, a3] = nums;
document.write(`<br>${a1} ${a2} ${a3}`);
let persons = {name:'이기자', age:22, gender:'남'};
let {name:irum, age:nai, gender:gen} = persons
document.write(`<br>${irum} ${nai} ${gen}`);
let {name, age, gender} = persons; // 변수명과 키가 같은 경우
document.write(`<br>${name} ${age} ${gender}`);
document.write('<hr>');
// 전개 연산자(spread operator) : ...
// 배열이나 객체를 ... 연산자와 함께 사용하면 배열, 객체 내의 값을 분해된 값으로 전달한다.
let digits = [..."0123abc"];
document.write(digits, ' ', digits.length);
let a = [1, 2, 3];
let b = [0, ...a, 4]; // 배열 요소값에 중첩된 배열에 적용
document.write('<br>', b, ' ', b.length);
document.write('<br>');
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = arr1.concat(arr2);
document.write(arr3);
document.write('<br>');
const arr4 = [...arr1, ...arr2];
document.write(arr4);
document.write('<br>');
//arr1.push(arr2);
arr1.push(...arr2);
document.write(arr1);
document.write('<br><br>');
// 배열에 전개 연산자 적용
const fruits = ['apple', 'peach', 'melon'];
const arr5 = [...fruits]; // 배열에 담기
document.write(arr5);
document.write('<br><br>');
const obj1 = {...fruits};
document.write(obj1, ' ', obj1[0]);
</script>
</body>
</html>
자바 스크립트 함수
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>
함수(function)란?<br>
함수(function)란 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록{ }을 의미합니다.<br>
</h2>
<pre>
자바스크립트에서 함수의 정의는 function 키워드로 시작되며, 다음과 같은 구성요소를 가집니다.
1. 함수의 이름
2. 괄호 안에 쉼표(,)로 구분되는 함수의 매개변수(parameter)
3. 중괄호({})로 둘러싸인 자바스크립트 실행문
자바스크립트에서 함수를 정의하는 문법은 다음과 같습니다.
<b>문법</b>
function 함수이름(매개변수1, 매개변수2,...) {
함수가 호출되었을 때 실행하고자 하는 실행문;
[return 반환값]
}
내장함수와 사용자 정의 함수로 나뉜다.
</pre>
<hr>
<script type="text/javascript">
document.write(`내장함수 중 문자 관련 함수`);
let str = "Java script Language";
document.write(`<br>str.charAt(2) : ${str.charAt(2)}`);
document.write(`<br>str.indexOf('v') : ${str.indexOf('v')}`);
document.write(`<br>str.indexOf('V') : ${str.indexOf('V')}`); // 없으면 -1을 반환
document.write(`<br>str.substring(1, 3) : ${str.substring(1, 3)}`); // 1 이상 3 미만
document.write(`<br>str.slice(0, 5) : ${str.slice(0, 5)}`); // 시작인덱스, 개수
// ...
document.write(`<br><br>내장 함수 중 스타일 관련 함수`);
document.write(`<br>str.bold() : ${str.bold()}`);
document.write(`<br>str.big().strike().fontsize(24) : ${str.big().strike().fontsize(24)}`);
//...
document.write(`<br><br>내장 함수 중 수학 관련 함수`);
document.write(`<br>Math.abs(-7) : ${Math.abs(-7)}`);
document.write(`<br>Math.round(3.6) : ${Math.round(3.6)}`);
document.write(`<br>Math.random() : ${Math.random()}`); // 0 ~ 1 사이의 난수
//...
document.write(`<br><br>내장 함수 중 날짜 관련 함수`);
let d = new Date();
document.write(`<br>Date() : ${Date()}`);
document.write(`<br>d : ${d}`);
document.write(`<br>${d.getFullYear()}년 ${d.getMonth() + 1}월 ${d.getDate()}일 ${d.getHours()}시`);
document.write(`<br><br>내장 함수 중 기타 함수`);
document.write(`<br>parseInt() : ${parseInt('3.4') + 5}`); // 버림
document.write(`<br>parseFloat() : ${parseFloat('3.4') + 5}`); // 실수화
document.write(`<br>isNaN() : ${isNaN('3.4')}`); // false 숫자 여부 확인
document.write(`<br>isNaN() : ${isNaN('삼점사')}`); // true
let ss1 = encodeURI('자바스크립트');
document.write(`<br>encodeURI() : ${ss1}`);
let ss2 = decodeURI(ss1);
document.write(`<br>decodeURI() : ${ss2}`);
// 별도의 창 열기 : open('파일명', 출력형태, '속성')
open('js01.html', '_blank', 'width=300,height=200,left=200,top=200,resizeable=yes');
//...
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 함수를 선언한 후 body에서 필요할 때 호출하는 것이 일반적
function bb(){
document.write('bb 함수 실행 성공<br>');
cc(5); // 함수가 다른 함수 호출
//return; // 함수 무조건 탈출 아래 문은 무시
let result = cc(5); // 반환값 얻기
document.write(`<br>result : ${result}`);
document.write(`<br>result : ${cc(10)}`);
// -----dd 함수 호출-----------------
dd(7, 8); // 결과는 dd함수에서 7,8
dd(7, 8, 9); // 세번째 argument는 무시
dd(7); // 7, undefined
}
function cc(para){ // 매개변수가 있는 함수
let kk = para + 10;
document.write(`kk는 ${kk}<br>`);
return kk; // 반환값은 1개만 가능
}
function dd(para1, para2){
document.write(`<br>dd함수에서 ${para1}, ${para2}`);
}
//JS는 일급객체 지원
function f1(){
document.write(`<br>안녕 f1 수행`);
}
function f2(func){ // 매개변수로 함수 사용
func();
}
function f3(){
return f1; // 함수가 함수를 반환
// return f1(); // 함수의 실행 결과를 반환
}
function hello(){
f2(f1); // 인수로 함수를 사용. f2로 f1 함수 전달
let myfunc = f3(); // 반환된 f1 함수를 실행
myfunc(); // 실행
f3()();
}
// 전역, 지역 변수
let a = 100; // 전역변수
const b = 200; // 전역변수
function func1(){
let c = 300; // 지역변수
const d = 400;
document.write(`<br>a : ${a} b : ${b}`);
document.write(`<br>c : ${c} d : ${d}`);
a = 500;
{
let dog = 123;
{
let cat = 456;
document.write(`<br><i>dog:${dog} cat:${cat}</i>`);
}
// document.write(`<br><i>dog:${dog} cat:${cat}</i>`); error
}
}
</script>
</head>
<body>
<h2>사용자 정의 함수</h2>
<!--
함수 작성 방법 1) 일반적
function 함수이름(매개변수1, 매개변수2,...) {
함수가 호출되었을 때 실행하고자 하는 실행문;
[return 반환값]
}
함수 작성 방법 2) 함수 리터럴(함수 표현식)
let 변수 = function(){...}
함수 작성 방법 3) 함수 생성자 사용
let 변수 = new Function(){...}
함수의 역할
1) 호출 가능한 루틴으로서의 함수(일반적)
루틴 : 특정한 작업을 실행하기 위한 일련의 명령. 프로그램의 일부 또는 전체를 의미
2) 값으로서의 함수(인자로 전달, 변수에 의한 할당 가능, 어떤 함수의 반환값으로 사용 <- 일급객체)
3) 객체 타입으로의 함수
-->
<script type="text/javascript">
let count = 0;
function aa(){
count += 1;
document.write(count + "번 수행<br>");
}
aa(); // 함수 호출
document.write('뭔가를 하다가...<br>');
aa();
document.write(`함수는 참조형 타입 : ${typeof aa}`);
</script>
<div>날씨 좋은데~~</div>
<script type="text/javascript">
aa();
</script>
<div><b>html 선언부에 작성된 함수 호출하기</b></div>
<script type="text/javascript">
bb();
document.write('<br>일급 객체 경험하기~~~');
hello();
document.write('<br>전역, 지역변수 ~~~~~');
func1();
document.write(`<br>a : ${a} b : ${b}`);
// document.write(`<br>c : ${c} d : ${d}`); error
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h2>* 함수 작성 정리 *</h2>
<script type="text/javascript">
function func1(){
document.write(`난 func1이라고 해`);
}
func1();
document.write(`<br>`);
let my = func1; // 복사(함수의 주소 치환)
my();
document.write(`<br>`);
function func2(a, b = 20){ // 매개변수에 초기치
let c = a + b;
return c;
}
let re = func2(1, 2);
document.write(`<br>re : ${re}`);
re = func2("팀장", "만세");
document.write(`<br>re : ${re}`);
re = func2(5);
document.write(`<br>re : ${re}`);
// proto type 지원 : arguments 객체는 함수에 전달된 인수에 해당하는 Array 형태의 객체
function func3(){
document.write(`<hr>argument 개수 : ${arguments.length}`);
document.write(`<br>argument 값 : ${arguments[0]} ${arguments[1]}`);
}
func3();
func3(3,4);
func3(3,4,5);
func3(1,"으뜸");
function hap(){
let tot = 0;
for(let i=0;i<arguments.length;i++){
tot += arguments[i];
}
return tot;
}
document.write(`<br>${hap(1, 2, 3)}`);
document.write(`<br>${hap(1, 2, 3, 4)}`);
document.write(`<br>${hap("안녕", "까치야~")}`);
document.write(`<hr>익명 함수 ----<br>`);
(function() {
document.write(`함수명이 없는 1회용 함수`);
})(); // 초기화 작업시에 효과적으로 사용
document.write(`<hr>함수 표현식---<br>`);
// 익명함수를 변수에 치환
const test = function(n1, n2){
document.write(`두 수의 합은? ${n1 + n2}`);
}
test(5, 6);
let test2 = test;
test2(5, 6);
</script>
<p>
<div style="background-color: yellow;">* 선언적 함수와 함수 표현식의 차이 *</div>
<script type="text/javascript">
// 호이스팅 : 인터프리터가 변수(var로 선언된)와 함수의 메모리 공간을 선언 전에 미리 할당하는 것
func4();
function func4(){ // 선언적 함수
document.write(`<br>선언적 함수 실행(메모리에 계속 존재)`);
}
func4();
let myFunc = function(){
document.write(`<br>함수 표현식 : 익명 함수 실행(휘발성, 동적)`);
// 함수 표현식은 실제 실행 흐름이 해당 함수에 도달했을 때 함수를 생성한다.(동적으로 메모리 확보)
}
myFunc();
myFunc();
document.write(`<hr>중첩 함수 (내부 함수---)`);
function func5(){
function fu1(){
document.write(`<br>fu1 수행`);
}
function fu2(){
document.write(`<br>fu2 처리`);
}
fu1();
fu2();
}
// fu1(); error
func5();
function abc(a, b){
function def(x){
return x * x;
}
return Math.sqrt(def(a) + def(b));
}
document.write(`<br>${abc(3, 4)}`);
document.write(`<hr>익명 함수 반환----`);
function outer1(){
return function(){
document.write(`<br>Hello World`);
}
}
outer1()();
function outer2(name){
let msg = "안녕 내친구 " + name;
return function(){
document.write(`<br>${msg}`);
}
}
outer2("김보현")();
let mbc = function(para1){
let b = function(para2){
return para2 * 2;
}
return `결과 : ${b(para1)}`;
}
// b(5); error
document.write('<br>' + mbc(11));
</script>
</body>
</html>
자바 스크립트 함수 문제 풀기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
문1) 두 수를 함수로 입력하여 +, -, *, / 한 결과를 함수 내에서 각각 출력하세요.
아래와 같이 호출하면 결과 출력
document.write(showOper(8, 2));
-->
<script type="text/javascript">
function showOper(x, y){
let plus = x+y;
let min = x-y;
let gop = x*y;
let na = x/y;
return `+ : ${plus} - : ${min} * : ${gop} / : ${na}`;
}
document.write(showOper(8, 2));
</script>
<!--
문2) 주어진 배열의 모든 요소의 합을 반환하는 함수를 작성하세요.
console.log(sumArray([1, 2, 3, 4, 5])); // 결과 : 15
console.log(sumArray([10, 20, 30])); // 결과 : 60
-->
<script type="text/javascript">
function sumArray(array){
let res=0;
for(let i=0; i<array.length; i++){
res += array[i];
}
return `결과 : ${res}`;
}
console.log(sumArray([1, 2, 3, 4, 5]));
console.log(sumArray([10, 20, 30]));
</script>
<!--
문3) 주어진 숫자의 팩토리얼을 구하는 함수를 작성하세요. 팩토리얼은 1부터 주어진 숫자까지의 모든 숫자의 곱이다.
document.write(factorial(5)); // 결과 : 120
document.write(factorial(7)); // 결과 : 5040
-->
<br><br>
<script type="text/javascript">
function factorial(x){
let res=1;
for(let i=1; i<=x; i++){
res *= i;
}
return `결과 : ${res}<br>`;
}
document.write(factorial(5));
document.write(factorial(7));
</script>
<br>
<!--
문4) 주어진 문자열에서 특정 문자의 개수를 세는 함수를 작성하세요.
document.write(countChar("hello", "l")); // 결과: 2
document.write(countChar("javascript", "a")); // 결과 : 2
-->
<script type="text/javascript">
function countChar(x, y){
let b = [...x];
let cnt = 0;
for(let i=0; i<b.length; i++){
if(b[i] == y){
cnt ++;
}
}
return `결과 : ${cnt}<br>`;
}
document.write(countChar("hello", "l"));
document.write(countChar("javascript", "a"));
</script>
<br>
<!--
문5) 주어진 문자열 myString에서 숫자를 추출하여 그 합을 반환하는 함수를 작성하세요.
myString = "1a2b3c4d123"
document.write(totShow(myString)); // 출력: 16
힌트 : // 문자열을 개별 문자로 나눔 myString.split("");
-->
<script type="text/javascript">
function totShow(x){
let a = [...x];
let sum=0;
for(let i=0; i<a.length; i++){
if(!isNaN(a[i])){
sum += parseInt(a[i]);
}else continue;
}
return `출력 : ${sum}<br>`;
}
myString = "1a2b3c4d123"
document.write(totShow(myString));
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 자바스크립트 돔(DOM) (1) | 2024.07.24 |
|---|---|
| 자바스크립트 폼(form)과 부트스트랩(bootstrap) 활용 (0) | 2024.07.24 |
| 자바스크립트 이벤트(javascript event) (4) | 2024.07.24 |
| 자바스크립트 함수(Arrow 함수, 재귀함수) (1) | 2024.07.24 |
| 자바스크립트 문법 배우기 (1) | 2024.07.24 |