자바스크립트 3가지 작성방법
1. 인라인 방식 : tag내 속성으로 작성 , on@@@으로 시작
2. 임베디드 방식: document(문서)내에 <script>를 통해 작성 ->문서 내에 아무데나 작성
3. 링크 방식: js파일을 만들어서 src로 연결해서 사용
작동순서
-> 가장마지막에 있는게 작동되므로 js를 제일 위로 올리면 js가 먼저 읽히고 마지막에 임베디드방식이 있으므로
'임베디드에 있는 링크드 작동'이 뜸
js가 더 밑에있다면 js가 임베디드보다 나중에 읽히므로
'링크드 클론'이 읽힘
만약 이렇게 짜여져있다면
body 위에 선언1 -> 링크 alert -> body 위에 선언2 순서로 alert가 뜸
그런데 window.onload = 맨 마지막에 쓰임
defer="defer" 지연처리방식 - > javascript에서 가장 마지막에 실행됨
1. defer 속성을 사용하면 : 외부 링크 방식에서만 속성을 추가해서 사용 가능함
2. body tag 마지막에 사용하면 화면이 모두 렌더링 된 후에 작동된다
이런식으로 js에서 함수를 구현하는게 가능함
변수의 이용
var a; 이렇게 선언만 되어 있는 변수 = console에 undefinded라고 뜬다
변수 사용범위 scope
하나의 function 내부에서 scope는 서로 공유된다
변수 var b, c를 JAVA와는 달리 if 문 밖에서도 계속 사용 가능함
-> 하나의 function 내부에 있기 때문... 이게 변수사용범위 scope임
let 지역변수 const 상수
->ES6 문법에서 새로 추가된 변수
const = 상수라서 2번 선언하면 작성만되고 console가보면 오류남 / const도 지역변수임
let = 지역변수라서 for문 밖에서 돌리면 dfined 되지 않았다는 오류가 뜸
변수의 선언규칙
(식별자/idnetifier)
1.대소문자를 구분
2.영문, $, _로 시작해야함
3.영문, $, _를 포함해야하고 그 외의 특수문자는 허용X
4.키워드 및 예약어는 사용이 불가능함
innerText와 innerHTML의 차이
textContent도 innerText처럼 content중 text를 다 가져옴
innerHTML= content를 HTML로 인식해서 가져옴
javascript 타입의 종류
문자(string)
숫자(number) -> 정수, 실수 둘다 숫자임
논리(boolean) -> false/ true 0 과 1로 됨
널(object/null)
객체(object/array)
함수(function)
자바스크립트 타입에서 주의할점
1.
New 했기때문에 object가 됨
2. boolean 타입 변수에 숫자 더하고 타입볼때 주의점 (컨켄트네이션)
3. null이 하나의 값임
null은 object임
null 자체가 하나의 값이라서 null이라고 값을 출력
숫자랑 합할때 null은 0으로 인식
문자랑 합할때는 컨켄트네이션 발생
4. undefind는 엄밀하게 말하면 타입은 아님 (선언만하고 값이 없는 상태)
type of -> undefinded라고 뜸
unde + 1 -> NaN undefind 상태에서 숫자를 더하면 NaN (Not a Number)이라고 뜸
unde+문자열aa -> 컨켄트네이션 발생-> undefindaa
5. 함수도 하나의 변수임!!!!!!!!!!
그래서
var08 라고만 쓰면 실행안됨 var08()이라고 괄호를 붙여줘야 실행됨
이름이 없는 변수 값으로 있는 함수 = 익명함수
선언되어 있는 함수가 값을 전달받지 않을 경우 전달값은 undefinded 임
자바스크립트에서 향상된 for문
for in -> 자바와 다르게 인덱스 출력
for of -> '값' 출력
객체 Node, Element
꼭 외우기!!!
•HTML의 body의 tag를 DOM탐색하면 Element를 가져오는데 이건 Object임
탐색 방법은 id, tagName, class 등이 있음
• id =1개만 존재하기때문에(여러개라면 첫번째만가져오겠지?)
document.getElement
• class, tag는 화면에 여러개 이기 때문에 nodeList의 형태로 가져옴
document.getElements
• dom탐색 결과는 object인거 확인
• 만약에 탐색되는 이름(DOM)이 없다면 결과가 null 임
global 함수의 재선언
alert라는 함수를 변수 10으로 재선언해서 오염돼버림
대화형함수
1. alert : 사용자에게 경고 혹은 확인 내용을 띄움 (디버그용)
2.prompt : 텍스트 입력창을 제공해서 값을 입력할 수 있도록 해줌
1 누르면 1~ default/ 2 입력하면 2~default 다실행됨. break; 쓰면 거기서 끝
3.confirm: 확인과 취소, 선택에 따라서 true/ false 반환
확인 눌렀을 경우 선택한 color로 변환/ 아닐시 fff(검정)
4. 예쁘게 하고 싶으면 SweetAlert 쓰기
자바스크립트 함수의 사용
1. 명시적 함수
2. 익명 함수
3. 함수 리터럴 중요!!!
함수가 값의 역할을 하는거 확인
literal = function / ( "안녕하세요") = msg가 되는거
arguments의 속성
콜백CallBack함수 클로저Closure함수
콜백함수: 특정 함수의 arguments 부분을 함수로 받는 함수를 이야기 함
클로저함수: 외부에서 선언된 변수가 내부에서 사용될 때, 내부 함수 부분을 클로저 함수라고 함
anEdu가 실질적으로 갖고있는건 addVal 함수임..?
-> HTML : 오전이 출력됨
propagation
프로파게이션 (이벤트 전파 방지)
js에서 return false가 넘어와서.. 다음 이벤트를 막아줌?? html에도 return 넣는거 기억하기
구디아카데미 후기/ 국비지원IT개발자 취업 / 전민균 강사님
