JavaScript 기초 (HTML, CSS, JS)

• 자바스크립트 : 편함, 크로스브라우징

자바스크립트

• 인터프리터 방식의 언어
• 동적 타이핑 (dynamic typing)

함수

• 함수 선언

    함수 선언(정의)
    funtction 함수명([매개변수...]){
         실행문
         [return 값;]
         (리턴타입 정해져있지 않음. 리턴값 없어도 됨) 
    }

• 함수 예시

    aaa(); // 함수 선언문보다 실행문이 위에 있어도 함수 실행 가능함

    console.log(bbb); -> undefined

    // bbb(); // 에러 발생, 익명함수는 변수 선언 이전에 실행 불가능
    // 함수가 아니라는 오류 구문 
    // 자바스크립트 ~ 함수 선언 시 인터프리터가 함수를 위로 올려줌.
    // 변수 선언도 올라감
    // 그러나 변수 선언시 대입되는 부분은 안올라감
    // 따라서 bbb 변수는 선언되었으나, 오른쪽 익명함수는 실행되지 않으므로 함수 실행 안됨.
    // hoising?? 호이스팅

    // 함수 선언
    function aaa(){
        console.log('aaa');
    }

    // 함수 실행(호출, call..)
    aaa();

    // 익명함수, 함수 이름이 없음. 
    var bbb = function (){
        console.log('bbb');
    }; 

    bbb();

    console.log(bbb); -> 함수 선언문 출력됨

• 배열 속 함수

    var arr = [1, '홍길동', function(){
        console.log('ccc');
    }];
    arr[2]();

• 즉시 실행되는 함수

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

변수

• var : hoisting(호이스팅), 지역변수

console.log(x);
var x = 10; 
/* 위에서 undefined 출력됨.
∵ hoisting에 의해
var x;
console.log(x);
x = 10;
과 같은 순서로 실행
*/

var x = 20; // 재선언 가능 (자바에서는 이런식의 재선언 안됨)

• let : 지역변수, 재선언 불가능, 재할당은 가능

let y = 10;
y = 20; // 재할당
// let x = 20; // 재선언 -> 에러 발생, 이미 선언되어 있으므로
// let은 호이스팅 없음.

• const : 상수, 재할당/재선언 불가능

const z = 1;
// z = 2; // 에러 발생, 재선언 불가능

const arr = [1,2,3,4,5];
arr[0] = 6;
console.log(arr); // -> [6,2,3,4,5] 출력
// arr가 가리키는 주소값이 변하지 않음.
// 자리가 가리키는 값이 변한 것이지, arr가 변한것 x
// arr = [1,2,3,4,5] -> 에러 발생

이벤트 처리 방법

1. HTML 주체 이벤트 연결
   • html이 주체이므로 반복적인 작업을 해줘야 함.
2. Javascript 주체 이벤트 연결(속성) ~ onclick
   • 한 번 더 대입할 경우 덮어씌움(뒤에 하나만 실행)
3. Javascript 주체 이벤트 연결(이벤트 리스너) ~ addEventListener
   • JS로 선택자 잘 쓰면 한꺼번에 작업할 수 있음.
   • 한 번 더 대입할 경우 두 번 실행됨

클로저(Closure)

• 독립적인 변수를 가지는 함수
• 내부 함수를 이용하여 별도의 스코프 정의

AJAX

• Asynchronous Javascript And Xml(AJAX, 비동기 자바스크립트 XML)
  web: 무조건 동기적
  game, cs: 데이터가 실시간으로 바뀜
• 비동기 사용 이유: 새로고침 하지 않아도 새로운 정보 값을 화면 상에 반영하기 위해서
• .ajax(객체) : ajax 통신
• 객체 속성
  • url 주소
  • method get/post...
  • async true(기본값) / false : 비동기 여부
  • data 파라미터 : 서버로 전송할 데이터
  • dataType 응답 데이터 타입
  • cache true(기본값) / false : 캐시 기능 쓸 지 말 지
  • success 응답 성공 시 실행 함수
  • error 응답 실패 시 실행 함수

DOM _ JS

• VanillaJS: 순수 자바스크립트
• jQuery: Cross Browsing
• React: 객체지향처럼 화면을 부품화 할 수 있다는 장점(component)

이벤트 처리 방법

1. HTML 주체 이벤트 연결

• html이 주체이므로 반복적인 작업을 해줘야 함.
• head

<style>
    #result {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
        display: none;
    }
</style>
<script>
    function change(color) {
        document.querySelector("#result").style.backgroundColor = color;
    }

    function toggle(value) {
        document.querySelector("#result").style.display = value;
    }
</script>

• body

<input type="button" value="Red" onclick='change("red");'>
<input type="button" value="Green" onclick='change("green");'>
<input type="button" value="Blue" onclick='change("blue");'>

<input type="button" value="보이기" onclick="toggle('block')">

2. Javascript 주체 이벤트 연결(속성) ~ onclick

• 한 번 더 대입할 경우 아래 내용으로 실행됨(덮어 씌워짐, 맨 뒤의 하나만 실행)

window.onload = function(){
    // 이벤트 연결
    var btn = document.getElementById("btn");
    // 대입
    btn.onclick = () => {
        console.log(this);
        alert("클릭1");
    }
    // 한번 더 대입
    btn.onclick = () => {
        console.log(this);
        alert("클릭1-1");
    }
}

3. **Javascript 주체 이벤트 연결(이벤트 리스너) ~ addEventListener(권장)

• JS로 선택자 잘 활용하면 한꺼번에 작업할 수 있음
• 한 번 더 대입할 경우 덮어씌워지지 않고 두 번 실행됨.

window.onload = function () {
    // 이벤트 연결
    var btn6 = document.querySelector('#btn6');
    // 대입
    btn6.addEventListener('click', function () {
        alert('click6');
    });
    // 한번 더 대입
    btn6.addEventListener('click', function () {
        alert('click66');
        console.log(this.value);
    }); // 둘다 실행됨, 덮어씌우기x 더하는 것 
};