기타/엘카데미
[엘카데미 챌린지] 11일차 생활코딩 자바스크립트 (1)
actt
2023. 7. 27. 14:54
1. 서론
계속 자바 알고리즘 풀이만 진행하다가 환기겸 자바스크립트 기초를 다시 보려고 한다.
과목명은 [생활코딩! HTML + CSS + 자바스크립트]이고, HTML & CSS는 건너뛰고 자바스크립트부터 진행하였다.
배운 내용들을 정리해서 작성하려고 한다.
2. 정리
1) <script>를 <body>최하단에 넣어야 하는 이유
이건 강의에서 알려준 내용과는 별개로 본인이 알고있던 지식이다.
자바스크립트 코드는 일반적으로 html 태그 어디에 넣더라도 동작한다.
다만 웹브라우저의 동작방식을 살펴보면 html은 위에서 아래로 파싱이 진행되고, parser가 <script>를 만나면 자바스크립트 코드를 실행하기 위해 파싱을 잠시 중단하고 자바스크립트 코드를 먼저 불러온다. 그래서 웹 브라우저 렌더링 속도가 느려져 페이지가 나타나는 속도가 느려질 수 있다. 따라서 <script>를 <body> 최하단에 넣는다면 일단 html 파싱이 모두 완료되고 자바스크립트 코드를 읽어오기 때문에 페이지가 보이는 속도가 향상될 수 있기 때문이다.
2) 이벤트 태그
onclick : 어떤 이벤트가 일어났을 때 어떠한 자바스크립트 코드를 실행하게 하는 것.
<input type="button" value="hi" onclick="alert('hi')">onchange : 내용이 변했을 때 이벤트 발생
<input type="text" onchange="alert('changed')"/>onkeydown : 어떤 키를 눌렀을 때 이벤트 발생
<input type="text" onkeydown="alert('key down!')"/>
3) 내장 함수
toUpperCase() : 모두 대문자로 출력
'Hello World'.toUpperCase()indexOf() : 찾고자 하는 값의 문자열 자릿수 출력
'Hello world'.indexOf('world')출력 결과 : 6
0부터 카운트하여 공백까지 포함한 자릿수
trim() : 공백 제거
' hello '.trim()