2. 수업의 목적
- html은 웹페이지 한번 뜨면 끝인데 자바스크립트는 동적인 효과를 줄 수 있다. 사용자와 상호작용.
- 야간모드 버튼 만들기
- <input type="button" value="야간모드" onclick="
document.querySelector('body').style.backgroundColor='black';
"> - onclick 속성 안의 내용은 자바스크립트로 해석.
- <input type="button" value="야간모드" onclick="
3. HTML과 JS의 만남: script 태그
- <script> : 이 태그 안의 내용은 자바스크립트라고 알려줌.
- 1+1을 입력하면 html은 문자 그대로를 출력하지만 자바스크립트는 계산기 기능을 작동해서 2라고 출력.
4. HTML과 JS의 만남: 이벤트
- <input type="button" value="hi" onclick="alert('hi')">
- <input> : 버튼을 입력할 거다. 버튼 안의 값은 hi다.
- onclick : 클릭하면 'hi'라고 적힌 경고창(alert)이 뜰거다.
- onclick 속성의 값은 반드시 JS가 와야 함.
- 웹브라우저가 그 값을 기억하고 있다가, onclick 속성이 포함된 태그를 사용자가 클릭할 때 JS 문법으로 해석해서 동작.
- 이벤트 : 이렇게 웹브라우저 안에서 일어나는 일. on~
- onclick : 클릭했을 때
- onchange : 내용이 변했을 때
- 이벤트 검색 문구 : javascript "상황" event attribute(속성)
5. HTML과 JS의 만남: 콘솔
- 자바스크립트를 실행하는 다른 방법 : html 파일 만들지 않고 즉석에서 간단한 코드 실행하면 될 때. 데이터 처리 등.
- 검사 > 콘솔(Console) 탭 : 웹페이지를 대상으로 실행됨. 열린 페이지 안에 삽입된 JS인 것처럼 동작.
- '텍스트'.length : 따옴표 안 문자열의 문자 개수. alert( ) 통해 값 확인.
- 검사 > Elements 탭에서 esc : 콘솔 창이 html 태그들 아래에 뜸.
- JS 코드로 웹페이지의 댓글 중 랜덤 추첨 가능.
- 검사 > 콘솔(Console) 탭 : 웹페이지를 대상으로 실행됨. 열린 페이지 안에 삽입된 JS인 것처럼 동작.
6. 데이터타입(자료형) - 문자열과 숫자
- 숫자 : 숫자에서는 연산 중요
- 산술 (이항) 연산자 : + - * /
- 문자형
- ' ' 혹은 " "로 감싸서 표기.
- 유용한 기능들 검색 : "javascript string"
- '텍스트'.toUpperCase() : 대문자로 바꿔줌.
- '텍스트'.indexof('찾는 글자') : 찾는 글자가 몇 번째 자리에 있는지 알려줌. 'world'와 같이 단어를 찾을 수도 있음.
7. 변수와 대입 연산자
- x = 1; y = 1; x+y;결과는 2라고 나옴.
- x, y : 변수.
- = : 대입연산자. 오른쪽 항의 값을 왼쪽의 변수에 대입.
좌항과 우항 결합하여 우하으이 값을 만들어냄.
- 1=2;
- 에러남. 1은 상수. 대입연산자 통해 값이 바뀔 수 있는 변수가 아님.
- 변수의 이용
- var name = 'egoing';
alert(" "+name+" "+name+" "); - 어떤 문구에서 상황에 따라 이름을 바꿔줘야 하는데 이름이 여러 번 등장할 때 수동으로 다 바꾸기 어려움.
- var name = 'egoing';
8. 웹브라우저 제어
- <input type="button" value="야간모드" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
">- "야간모드"라는 버튼을 클릭하면 <body style = "background-color: black; color: white;"> 스타일 속성으로 css 코드를 이렇게 쓴 것처럼 작동함.
- CSS 기초와 JS 문법으로 속성을 주려는 <body> 태그를 웹브라우저에 알려주는 방법 알아야 함.
- [오류] 왜 나는 <body> 태그를 선택했는데 <h1>이랑 <ul>은 글자가 하얘지지 않는가?
- <a>에 글자색을 블랙으로 해놔서 그런 것 같다. <body> 안의 <a>는 포함되지 않는건가?
12. 제어할 태그 선택하기
- 자바스크립트 문법으로 스타일 속성을 적용할 태그 선택. css 선택자(태그, 클래스, id) 사용.
- 검색 : "javascript select tag by css selector"
- document.querySelector('body')
- 스타일 속성은 이어서 .style 하고 쓰면 됨.
'TIL' 카테고리의 다른 글
| [TIL-12] 생활코딩 WEB2 JavaScript-19~22 (0) | 2021.09.20 |
|---|---|
| [TIL-11] 생활코딩 WEB2 JavaScript-13~18 (0) | 2021.09.19 |
| [TIL-9] 생활코딩 WEB2 CSS-12~15(완강) (0) | 2021.09.17 |
| [TIL-8] 생활코딩 WEB2 CSS-6~11 (0) | 2021.09.16 |
| [TIL-7] 생활코딩 WEB2 CSS-1~5 (0) | 2021.09.15 |
