[자바스크립트] 1213 수업 소스코드 아카이브

label문

프로그램 내의 특정 영역을 식별할 수 있도록 해주는 식별자. 

label문을 사용하면 continue문과 break문의 동작이 프로그램의 흐름을 특정 영역으로 이동

-continue: 해당 루프의 나머지 부분을 건너뛰고, 바로 다음 표현식으로 넘어가게 함

문법1) continue;

문법2) continue 라벨 이름;

-break: 반복문을 완전시 종료시키고 다음 위치의 실행문으로 프로그램 흐름을 이동시킴

문법1) break;

문법2) break labelName;

 

**.. label 문은 안쓰는게 좋음...^^...

 

var i=1;

var sum=0;

while(i<=100){

    sum+=i;

    i++;

}

document.write("1. 무한루프 x : "+sum+"<br/>");

sum=0;

i=1;

while(true){

    sum+=i;

    i++;

    if(i>100){

        break;

    }

}

document.write("2. 무한루프 o : "+sum+"<br/>");

sum=0;

i=1;

do{

sum+=i;

i++

}while(i<=100)

document.write("3. do~while문 : "+sum+"<br/>");

</script>

 

결과:

1. 무한루프 x : 5050
2. 무한루프 o : 5050
3. do~while문 : 5050

배열(array)

배열의 특징: 

-배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수 있음

-배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수 있음

-자바스크립트에서의 배열은 Array 객체로 다뤄짐

*Array 객체의 생성자를 이용하는 세 가지 방법

var arrList = {1, true, "javaScript"};    []

varr arrObi = Array{1, true, "JavaScript"}; ()

var arrNewObi = new Array(1, true, "JavaScript"}; ()

 

배열의 참조

배열의 각 요소를 참조하고 싶을 때는 [] 연산자를 사용함. 

배열의 요소 개수를 배열의 길이라고 함

배열의 길이는 length 프로퍼티에 자동으로 갱신됨

<script>

        var arr = ["JavaScript"];

        var ele = arr[0];

        arr[1] =10;

        arr[2]=ele;

        document.write("배열의 요소는 ["+arr+"] 입니다.<br/>");

        document.write("배열의 길이는 "+arr.length+"입니다. <br/>");

        delete arr[1];

        document.write("배열의 요소는 ["+arr+"] 입니다.<br/>");

        document.write("배열의 길이는 "+arr.length+"입니다. <br/>");

    </script>

결과

배열활용

배열의 요소는 [JavaScript,10,JavaScript] 입니다.
배열의 길이는 3입니다.
배열의 요소는 [JavaScript,,JavaScript] 입니다.
배열의 길이는 3입니다.

 

문법: 배열이름[인덱스]

 

배열 요소 추가(문법)

1. arr.push(추가요소);

2. arr[arr.length]=추가할 요소;

3. arr[특정 index]=추가할 요소;

push 메서드와 length 프로퍼티를 이용한 방법은 모두 배열의 끝에 새로운 요소 추가

  arr.push("Script");

        arr[arr.length]=100;

        document.write("배열의 요소는 ["+arr+"] 입니다.<br/>");

        document.write("배열의 길이는 "+arr.length+"입니다. <br/>");

        arr[20]="자바스크립트";

        document.write("배열의 요소는 ["+arr+"] 입니다.<br/>");

        document.write("배열의 길이는 "+arr.length+"입니다. <br/>");

        document.write("arr의 10번째:"+arr[10]+"<br/>");

    </script>

결과

배열의 요소는 [JavaScript,,JavaScript,Script,100] 입니다.
배열의 길이는 5입니다.
배열의 요소는 [JavaScript,,JavaScript,Script,100,,,,,,,,,,,,,,,,자바스크립트] 입니다.
배열의 길이는 21입니다.
arr의 10번째:undefined

배열 요소 접근

모든 요소에 차례대로 접근하고 싶을 때는 for/in과 같은 반복문을 사용하여 접근

 

Array 객체

배열(array)는 정렬된 값들의 집합으로 정의되며 array 객체로 다뤄짐. 

    <h3>배열 요소 접근</h3>

    <script>

        arr=[1, true, "javaScript"];

        var result = "<table border=1><tr>";

            for(var idx in arr){

                result += "<td>" +arr[idx]+"</td>"

            }

            result +="</tr></table>";

            document.write(result);

            document.write("<br/><br/>")

            document.write("typeof arr :"+(typeof arr)+"<br/>");

            document.write("typeof arr[0] :"+(typeof arr[0])+"<br/>");

            document.write("typeof arr[1] :"+(typeof arr[1])+"<br/>");

            document.write("typeof arr[2] :"+(typeof arr[2])+"<br/>");

    </script>

결과

 

희소 배열

배열에 속한 요소의 위치가 연속적이지 않은 배열을 의미함 

희소 배열의 경우 배열의 length 프로퍼티 값보다 배열 요소의 개수가 언제나 적다. 

ex) arr[20]번째에만 push로 뭔가 넣으면, arr[0]~arr[19]까지 빈칸으로 생성, length는 21

 

다차원 배열

배열 요소가 또 다른 배열인 배열을 의미함  

2차원 배열이란 배열 요소가 1차원 배열인 배열을 의미함. 

    <h3>다차원 배열</h3>

    <script>

        arr=new Array(3);

        var row, col;

        for(row=0;row<3;row++){

            arr[row]=new Array(4);

            for(col=0;col<arr[row].length;col++){

                arr[row][col]="["+row+","+col+"]";

                document.write(arr[row][col]+" ");

            }

            document.write("<br/>");

        }

    </script>

 결과

다차원 배열

[0,0] [0,1] [0,2] [0,3]
[1,0] [1,1] [1,2] [1,3]
[2,0] [2,1] [2,2] [2,3]

연관 배열(associative array)

숫자로 된 인덱스 대신에 문자열로 된 키(key)를 사용하는 배열을 연관 배열이라고 함. 

arr["하나"]=1;

arr["참"]=ture;

 

arr은 length 프로퍼티 값으로 0을 반환함. Array 객체가 아닌 기본 객체로 배열이 아님 

 <h3>연관배열</h3>

    <script>

        arr=[];

        arr["하나"]=1;

        arr["참"]=true;

        arr["자바스크립트"]="javaScript";

        document.write(arr["참"]+"<br/>");

        document.write("arr.length: "+arr.length);

        document.write("<br/>arr[0]:"+arr[0]+"<br/>");

결

연관배열

true
arr.length: 0
arr[0]:undefined

 

문자열을 배열처럼 접근

문자열은 변하지 않는 값이므로, 읽기 전용 배열로 다룰 수 있음.  

        //문자열을 배열처럼 접근

        var str="안녕하세요!";

        document.write("str.charAt(2) : "+str.charAt(2)+"<br/>");

        document.write("str[2] : "+ str[2] + "<br/>");

    </script>

결과

str.charAt(2) : 하
str[2] : 하

함수(function)

하나의 특별한 목적으로 작업을 수행하도록 설계된 독립적인 블록을 의미한다. 

필요할 때마다 호출하여 해당 작업을 반복하여 수행할 수 있음

 

자바스크립트의 블록이란, 함수나 실행문의 중괄호로 묶여진 부분을 의미함

 

함수의 정의는 function 키워드로 시작되며 다음과 같은 구성요소를 가짐

1. 함수의 이름

2. 괄호 안에 쉼표(,)f로 구분되는 함수의 매개변수(parameter)

3. 중괄호 ({})로 둘러싸인 자바스크립트 실행문

문법) function 함수이름 (매개변수1, 매개변수2...){

 함수가 호출되었을 때에 실행하고자 하는 실행문;} 

    <title>자바스크립트-함수</title>

    <script>

        function addNum(x,y){

            document.write("add Num 함수 호출<br/>");

            return x+y;

        }

        function addNum2(x,y){

            document.write("addNum2(x,y) : "+(x+y)+"<br/>");

        }

    </script>

</head>

<body>

    <h3>자바스크립트-함수</h3>

    <script>

        document.write("addNum(x,y) : "+addNum(2,3) +"<br/>");

        addNum2(13,"일 입니다.");

        document.write("addNum(x,y) : "+addNum() +"<br/>");

        addNum2(13,"일 입니다.");

    </script>

   

자바스크립트-함수

add Num 함수 호출
addNum(x,y) : 5
addNum2(x,y) : 13일 입니다.
add Num 함수 호출
addNum(x,y) : NaN
addNum2(x,y) : 13일 입니다.

 

*** NaN 수학적인 연산을 해야 하는데 불가능할때

매개변수가 맞지 않더라도 함수 호출이 가능하다!!!!

(따라서 자바스크립트에서는 메서드 오버로딩이 불가능함!!)

 

반환(return)문

함수는 반환문을 포함할 수 있음. 실행을 중단하고, return 키워드 다음 명시된 표현식의 값을 호출자에게 반환(allType ok)

 

값으로서의 함수(onlyForJavaScript)

함수가 변수에 대입될 수도 있으며, 다른함수의 인수로 전달될 수도 있음.

function sql(x){

            return x*x;

        }

 <head>

<script>

        //값으로서의 함수

        var sqlNum=sql;

        document.write("sql(4) : "+sql(4)+"<br/>");

        document.write("sqlNum(5) :"+sqlNum(5) + "<br/>");

    </script>

결과 

sql(4) : 16
sqlNum(5) :25

변수의 유효범위

유효범위에 따라 1. 지역변수(local variable) / 2. 전역변수(global variable) 로 구분됨. 

-지역변수: 함수 내에서 선언된 변수, 함수 내에서만 유효, 종료되면 메모리에서 사라짐. (매개변수도 지역변수 취급)

        function localNum(){

            var num=10;

            num2=20;

            document.write("함수 내부에서 변수 num의 타입은 "+(typeof num)+"입니다.<br/>");

            document.write("함수 내부에서 변수 num2의 타입은 "+(typeof num2)+"입니다.<br/>");

num2 에 선언 var 쓰지 않으면 자동으로 전역변수

    <script>

        //변수 유효범위(전역변수/지역변수)

        localNum();

        document.write("함수 호출이 끝난 뒤의 변수 num의 타입은? "+(typeof num)+"<br/>");

        document.write("함수 호출이 끝난 뒤의 변수 num2의 타입은? "+(typeof num2)+"<br/>");

    </script>

결과

함수 내부에서 변수 num의 타입은 number입니다.
함수 내부에서 변수 num2의 타입은 number입니다.
함수 호출이 끝난 뒤의 변수 num의 타입은? undefined
함수 호출이 끝난 뒤의 변수 num2의 타입은? number

-전역변수: 페이지가 닫히면 메모리 삭제 (var 키워드 사용 않고 변수 선언하면, 해당 변수는자동으로 전역변수)

 함수 내에서 전역변수  호하려면 window.변수 이렇게 선언하면 된다. 

 var num=10;

        function globalNum (){

            var num=20;

            document.write("함수 내에서 지역변수 num의 값은? "+num);

            document.write("<br/>함수 내에서 전역변수 num의 값은?"+window.num);

        }

사용 예) <head>

매개변수(paramether)

함수 정의 시 매개변수의 타입을 따로 명시하지 않으며, 함수 호출 시 인수(argument)로 전달된 값에 대해 어떠한 타입 검사도 하지 않음. 

함수를 호출할 때 함수의 매개변수보다 적은 인수가 전달되더라도 오류가 발생하지 않음

(나머지 매개변수에는 자동으로 undefined 들어감...)

        //매개변수

        document.write("<br/><br/>");

        document.write("addNum3(1,2,3): "+addNum3(1,2,3)+"<br/>");

        document.write("addNum3(1,2): "+addNum3(1,2)+"<br/>");

        document.write("addNum3(1): "+addNum3(1)+"<br/>");

        document.write("addNum3(): "+addNum3()+"<br/>");

결과

addNum3(1,2,3): 6
addNum3(1,2): NaN
addNum3(1): NaN
addNum3(): NaN

정확하게 말하자면 메서드 오버로딩이 오류나지는 않는데, 기능이 안된다. 

<title>Document</title>

    <script>

        function add(){

            alert("1");

            var sum=1;

            return sum;

        }

        function add(a){

            alert("2");

            var sum=a+1;

            return sum;

        }

        function add(a,b){

            alert("3");

            var sum=a+b;

            return sum;

        }

        function add(a,b,c){

            alert(4);

            var sum=a+b+c;

            return sum;

        }

    </script>

</head>

<h2>인자의 개수가 적을 때 처리 방법</h2>

    <script>

        var r = add();

        var r1 = add(2);

        var r2 = add(2,3);

        var r3 = add(4,5,6);

        document.write("함수인수 부족 r:"+r);

        document.write("<br/>함수 인수 부족 r1:"+r1);

        document.write("<br/>함수 인수 부족 r2:"+r2);

        document.write("<br/>함수 인수 부족 r3:"+r3);

    </script>

 

이렇게 하면, alert(4) 만 4번 뜬다는 것. 

아래는 실제 찍힌 것. 

인자의 개수가 적을 때 처리 방법

함수인수 부족 r:NaN
함수 인수 부족 r1:NaN
함수 인수 부족 r2:NaN
함수 인수 부족 r3:15

 

이렇게!

여기서 알 수 있는 점: 동명의 여러 함수가 존재할 경우, 위에서 아래로 실행하므로, 마지막에 있는 함수를 호출한다. 

 

메서드 오버로딩과 같은 결과를 내고 싶다면!

        //바로 위 함수에서 매개변수에 따라 NaN 결과가 나오지 않도록 처리.

        function add(a,b,c){

            var sum;

            alert(4);

            if(a === undefined && b===undefined &&c===undefined){

                sum=0;

            }

            else if(b===undefined && c===undefined){

                sum=a;

            }

            else if(c===undefined){

                sum=a+b;

            }

            else{

               sum=a+b+c;  

            }

            return sum;

        }

 

이렇게 메서드 안에서 경우의 수를 나눠 주면 된다. 

        // function addNum3 (x, y, z){

        //     return x+y+z;

        // }

        //위 함수를 매개변수가 없을 경우 NaN 발생하지 않도록 처리

        function addNum3 (x, y, z){

            if(x===undefined){

                x=0;

            }

            if(y===undefined){

                y=0;

            }

            if(z===undefined){

                z=0;

            }

            return x+y+z;

원래 function 안에서 var 없이 변수를 사용하면 전역 변수가 되지만, 위 경우에는 매개변수를 사용하는 것이므로 지역변수가 된다. (여기서 전역변수 x를 사용하고 싶다면 window.x를 쓰면 된다. 

 

-Arguments 객체

함수 정의보다 더 많은 인수가 전달되었을 때 arguments 객체를 이용하여 함수로 전달된 인수의 총 개수를 확인하거나, 각각의 인수에서 바로 접근할 수 있음. 

 

전달받은 인수의 개수에 상관없이 정상적인 계산을 할 수 있다. arguments 객체는 배열과 비슷하지만, Array 객체는 아니므로 index와 length 프로퍼티만을 제외하고는 배열의 여타 모든 기능을 사용할 수 없음.  

    <script>

        function addNum(){

            var sum =0, i;

            for(i=0; i<arguments.length;i++){

                sum+=arguments[i];

            }

            return sum;

        }

    </script>

 

String 메서드

-문자열에서 위치 찾기

Stirng 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치나 마지막으로 등장하는 위치를 반환함

indexOf()

lastIndexOf()

전달받은 특정 문자나 문자열을 찾을 수 없을 때에는 -1 반환.  

대소문자 구별함.

  <script>

        var str = "abcDEFabc";

        document.write("indexOf('abc'): "+str.indexOf('abc')+"<br/>");

        document.write("indexOf('abcd'): "+str.indexOf('abcd')+"<br/>");

        document.write("indexOf('abc',3): "+str.indexOf('abc',3)+"<br/>");

        document.write("lastIndexOf('abc'): "+str.lastIndexOf('abc')+"<br/>");

        document.write("lastIndexOf('d'): "+str.lastIndexOf('d')+"<br/>");

        document.write("lastIndexOf('c'): "+str.lastIndexOf('c')+"<br/>");

    </script>

결과

indexOf('abc'): 0
indexOf('abcd'): -1
indexOf('abc',3): 6
lastIndexOf('abc'): 6
lastIndexOf('d'): -1
lastIndexOf('c'): 8

 

대소문자를 구분한다는 점에 주의

charAt()    //머... 위치값 반환

charCodeAt()   //(유니코드)아스키코드 리턴 

charPointAt()

잘 안씀..

\\

 

 

문자열 추출

String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스까지 바로 앞까지의 문자열을 추출해 만든 새로운 문자열 반환

.slice(2,6)    // 2번째부터 5번째까지 (시작은 포함, 끝은 제외), 음수로 전달될 경우 뒤에서부터 센다. 

.substring()

.substr(2,4)  //2번째부터 4개. 

 

문자열 주위의 공백 제거

String 인스턴스의 양 끝에 존재하는 모든 공백과 줄 바꿈 문자를 제거한 새로운 문자열 반환

 

        //공백 제거

        var tmp = "      java script     ";

        document.write("["+tmp+"]"+", length: ["+tmp.length+"]<br/>");

        document.write("["+tmp.trim()+"]"+", length: ["+tmp.trim().length+"]<br/>");//중간 공백은남아있고 앞뒤만 날아감.

    </script>

[ java script ], length: [22]
[java script], length: [11]

 

-문자열 분리

String 인스턴스를 구분자(separator)를 기준으로 나눈 후, 나눈 문자열을 하나의 배열로 반환. 

.split() // 소괄호()안에 아무것도 없으면 그대로 내보내진다.  ("")이면 한 글자씩. (띄어쓰기도 한 글자로)

split() 메서드는 인수로 구분자를 전달하지 않으며, 전체 문자열을 하나의 배열 요소로 가지는 길이가 1인 배열을 반환

 

-문자열의 대소문자 변환

모든 문자를대문자나 소문자로 변환한 새로운 문자열을 반환 함

str.toUpperCase()

str.toLowerCase(); 

 

const arr = str.split(" ");

        document.write("arr.length: "+arr.length+"<br/>");

        document.write("arr[0] : "+arr[0]+"<br/>");

        document.write("arr[1] : "+arr[1]+"<br/>");

        document.write("arr[2] : "+arr[2]+"<br/>");

        document.write("arr[3] : "+arr[3]+"<br/>");

 

Array method

Array 객체에 정의된 배열과 관련된 작업을 할 때 사용하는 메서드 

-Array.prototype 메서드

push() 

pop() : 배열의 가장 마지막 요소를 꺼내옴(그리고 배열에서 제거) 따라서 실행할때마다 배열의 길이가 1씩 줄어든다. 

shift() : 배열의 가장 마지막 요소가 아닌 첫 요소를 제거하고, 그 제거된 요소를 반환함. 실행할 때마다 배열의 길이가 1씩 줄어들게 됨. 

 

**delete 는 배열의 길이가 줄어들지는 않지만, pop() 메서드는 아예 배열의 길이가 줄어든다는 차이점이 있다. 

 

splice() method: 배열 요소를 제거하거나 새로운 배열 요소를 추가하여 내용 변경함. 

첫 번째 인수는 새로운요소가 삽입될 위치 인덱스 두 번째는 요소의 개수, 나머지는 배열 요소로 지정 위치부터 차례로 시작.  

문서 객체 모델(Dom)

문서 객체모델은 HTML 문서에 접근하기 위한 일종의 인터페이스. 

이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공

-객체 모델을 이용한 작업

새로운 HTML요소나 속성을 추가

존재하는 HTML 요소나 속성을 제거

*(요소 ex. <p><p/> 속성 ex. font ...)

HTML 문서의 모든 html 요소를 변경

HTML 문서의 모든 html 속성을 변경

html 문서의 모든 css 스타일을 변경

html 문서의 새로운 html 이벤트 추가

html 문서의 모든 html 이벤트에 반응

html DOM은 HTM문서를 조작하고 접근하는 표준화된 방법을 정의함. 

 document<html<head/body

 

Document 객체

웹 페이지 그 자체를 의미하며, 웹 페이지에 존재하는 HTML 요소에 접근하고자 할때는 반드시 document 객체부터 시작해야 함. 

-HTML 요소 선택

getElementByTagName/ById/ByClassName/ByName

클릭과 관련된 핸들러

document.getElementById(아이디).onclick=funcion(){실행할 코드}

html 객체 선택

document.body

cookie/domain/forms/head/URL

    <ul>

        <li id="even">월</li>

        <li>화</li>

        <li name="first">수</li>

        <li>목</li>

        <li name="first">금</li>

        <li id="even">토</li>

        <li id="even">일</li>

    </ul>

Dom 요소 : 특정 html 요소를 선택하는 방법

item(): 이 메서드는 해당 html 객체 집합에서 전달받은 인덱스에 해당하는 요소 반환

 //아이디를 이용하여 선택한 후 텍스트 변경(단, 아이디가 여러개인 경우 첫 번째만 적용됨)

        function fn_id(){

            var sItem = document.getElementById("even");

            sItem.style.color="red";

        }

 

하하

함수가 안될땐.. 함수확인+부른 식 확인..^0^

 

Name 속성을 이용한 선택

getElementByName() 은 html 요소의 name 속성을 이용하여 html 요소를 선택한다. 

<script>

        //name 이 id인 거는 다 바뀜

        var selectI = document.getElementsByName("first");

        for(var i=0; i<selectI.length;i++){

            selectI.item(i).style.color="blue";

        }

Css 선택자(selector)를 이용한 선택

querySelectorAll() 매서드는 css 선택자 (id / class / attribute / attribute value) 를 이용하여 html 요소를 선택

ㄴ근데 얘는 익스플로러 8 & 그 이전 버전에서 지원 안됨.. 

 

HTML 객체 집합(object collection)을 이용한 선택

: 객체 집합을 이용하여 html 요소를 선택

(title)

       //title 요소 선택

        var title = document.title;

        document.write("<br/>"+title+"<br/><br/>");

   </script>

DOM 요소의 내용 변경

:HTML 요소의 내용(content)이나 속성값 등을 쉽게 변경, 가장 쉬운 방법은 innerHTML 프로퍼티를 이용하는 것. 

DOM 요소의 스타일 변경

var str=dicument.getElementById("text"); 

function changeRedColor(){str.style.color="red";}

   <h2>DOM요소의 스타일 변경</h2>

   <p id="text">이 부분의 스타일이 변경됩니다.</p>//이 부분때문에 id가 생성된 다음 부분으로 이 스크립트를 넣어야 함

   <input type="button" value="changed red" onclick="redColor()"/>

   &nbsp;

   <input type="button" value="change black" onclick="blackColor()"/>

   <script>

    var str = document.getElementById("text");

    function redColor(){

        str.style.color="red";

    }

    function blackColor(){

        str.style.color="black";

    }

   </script>