[ex02~05] JavaScript

ex02

 

HTML 문서에 JavaScript를 적용하는 방법

1. 인라인 방식(정식명칭X) > 이벤트 핸들러(Event Handler) == 이벤트
    - 태그에 직접 기재
    - 모든(대부분) 태그 > onXXX 속성 제공

2. 임베디드 방식
    - <script> 태그 내에 기재

3. 외부 방식
    - *.js > 독립된 파일에 기재
    - <script src="URL">

---

ex03

자바 스크립트 디버깅 > 값 확인
1. alert(값);
alert(new Date());

2. console.log(값); > 표준(권장)
console.log(new Date());

3. 사용 금지!!
window.document.all.txt1.value = new Date();

 

---

ex04

JavaScript 자료형

            1. number
                - 숫자형(정수, 실수)

            2. string
                - 문자, 문자열

            3. boolean
                - 논리형

            4. object
                - 객체형
                - JavaScript에는 클래스가 없다. 하지만 객체는 있다.
                - JavaScript에서 미리 정의 타입 객체는 있다. 개발자가 클래스는 선언할 수 없다. 
                - 자바        > 객체 지향 프로그래밍 언어
                - 자바스크립트 > 객체 기반 프로그래밍 언어

            5. 기타(= 상수)
                a. null
                b. undefined
                c. NaN(Not a Number)
            
            변수, 상수(리터럴)
            - JavaScript는 변수의 타입이 없다.
            - var 변수명;
            - 변수는 모든 자료형의 데이터를 저장할 수 있다.(=자바의 Object 변수)

 

            연산자 > 자바와 동일

            제어문 > 자바와 동일

            문자 이스케이프 > 자바와 동일

 

---

 

ex05

 

Javascript Function

 

function m1(num) {
    return 10;
}

 

function m1() {
    console.log('m1');
}

m1();

 

*** 자바스크립트는 초기화가 되지 않은 변수의 상태를 null이라고 하지 않고, undefined라고 한다.

function m2(name) {
            console.log('name', name);

            //모든 매개변수를 자동으로 담는 배열
            console.log(arguments); //예약어 > 내장 배열
            console.log(arguments[0]);
            console.log(arguments[1]);
        }
        m2(); //name undefined
        m2('홍길동', '하하하'); //name 홍길동

 

		var n1; 
        var n2 = null;

        console.log('n1', n1); //undefined > 비어있는 상태(자연스러운 상태)
        console.log('n2', n2); //null > 비어있는 상태(개발자가 의도적으로 비어놓은 상태)

        console.log(n1 == n2); //true
        console.log(undefined == null); //true

        console.log(typeof undefined); //undefined
        console.log(typeof null);      //object

        console.log(undefined === null); //false

 

        ==  : 동등 비교 연산자. 자료형의 비교(X), 값만 비교(더 많이 씀)
        === : 동등 비교 연산자. 자료형의 비교(O) > 우리가 아는 연산자

        console.log(10 == '10'); //true
        console.log(10 === '10'); //false

        console.log(10 != '10');  //false
        console.log(10 !== '10'); //true

        function m3() {
            return 100;
        }

        var result = m3();
        console.log(result);