JS의 개념
언어의 종류
- js - 웹(클라이언트 - 프론트엔드 + 서버(node.js))
- 파이썬 - 딥러닝 + 교육 - 장고/플라스크
- 자바 - 취업(웹)
- C - 하드웨어
- C++ - 빠르기 때문에 게임제작
- C# - 유니티스크립트 + .net +asp.net core
HTML vs CSS vs JS
HTML : 마크업 언어
CSS : 스타일시트 언어
JS : 프로그래밍 언어
AJAX & jQuery & Node.js
AJAX : javascrpit의 비동기식 전송 방식, 웹페이지를 전체 새로고침 하지 않고 특정부분만 데이터를 변경하게 끔
jQuery : js 라이브러리 but 잘 안씀
v8 - > Node.js -> Deno : JS는 브라우저에서만 사용하는 언어였는데, 구글이 v8이라는 것을 오픈소스로 풀고난 후 서버단에서 사용가능 하게끔 변경
JS 문법
데이터 타입
- Number 객체 - int 및 float 모두 포함
- String 객체 - "A"
- Boolen 객체 - true, false(소문자로)
- Array 객체
- Fuction 객체 - 함수도 타입이다.
변수 선언
var - 사용하지 않음
const - 90% 사용, 배열 및 객체의 변경/삭제/추가 가능 , for문이나 flag / .cnt 등 값이 변해야 할때는 const 사용 x
let - const를 사용할 수 없는 10% 상황에서 사용 , for문이나 flag/ .cnt 등 값이 변해야 할 때는 const 사용
연산 +
문자+문자 = A+B = AB : 문자를 붙인다.(띄어쓰기 없이)
문자+숫자 = A+123 = A123 : 123을 문자로 자동변환 후 붙인다.
문자길이 .length
a = JS -> a.length = 2
a = [1,2,3] -> a.length = 3
조건문 if
if(조건문) { } ;
조건문
== 값 비교
=== 타입까지 비교
!= 값 비교
!== 타입까지 비교
ex) 123 == "123"을 쓰면 true but 123 === "123"을 쓰면 false
반복문 for
for(let i = 1; i <= 10; i++) { }
i, j 사용시 const 대신 let을 사용
flag, cnt 등 변해야만 하는 것 let을 사용해야함
while : let i = 0 ; while(i <= 10){ i++ };
입력 Prompt
prompt( ) - 문자열을 입력받음
변수 선언문 & 변수 할당문
var study = 19;
변수 선언문 : var study;
study라 변수를 선언하고 해당 값을 undefined로 바꿈
변수 할당문 : study = 19;
study에 저장된 undefined를 밀어버리고 19로 바꿈
변수 : 어떠한 한값을 담고 있는 메모리의 주소 또는 메모리 주소에 붙인 룸
함수 선언문 & 함수 표현식
함수 선언문 : fucntion sum(a,b) { return a+b;}
함수 표현식 : const sum = fucntion sum(a,b) { return a+b;}
Arrow Function
값을 전달하고, 리턴이 가능한 무명함수입니다.
const sum = (a,b) => { return a+b }
명령어 1줄일 땐 {} 생략가능 , 전달하는 파라미터가 1개일 때도 () 생략가능
이벤트 버블링 & 이벤트 캡처링
이벤트 버블링 : 발생한 타겟부터 바디까지 올라간다.
이벤트 캡처링 : 바디부터 발생한 타겟을 향해 내려간다.
이벤트 위임 : 부모한테 이벤트를 맡긴다.
DOM
DOM - 웹페이지의 모든 정보를 나타내는 거대한 객체
객체(object) - 키와 값으로 이루어진 프로퍼티(properties)의 모음이다. ( = 파이썬의 dict) , 객체는 순서가 없다.
property -> key : "value"
object = { property1, property2};
object.key = value;하나의 HTML은 Document이다. 웹페이지가 하나의 거대한 객체라면 원하는 프로퍼티 변경을 통해 웹페이지 변경한다.
Eventhandler
eventhandler - 태그에 상관없이 작동됨
구조 : on + event
ex) onclick , onchange
Callback 함수
다른 함수의 파라미터로 넘겨 진 후, 특정 이벤트에 의해 호출되는 함수
당장 쓰는게 아니고 나중에, 특정 조건을 만족시킬 때 발생한다.
CreateElement
사용이유 : 특정 조건을 달성하면 실행되게 하려고
// 엘리먼트 만들기
const btn = document.createElement("button");
// console.dir(btn);
// 버튼 안에 들어갈 텍스트 만들기
const txt = document.createTextNode("나를 눌러줘~");
// console.log(txt);
//에튜리뷰트 넣어주기
btn.setAttribute("class", "sampleBtn");
// console.log(btn);
btn.appendChild(txt);
// console.log(btn);
document.querySelector("body").appendChild(btn);