01장. 수업 소개
HTML은 정적 페이지 -> Javascript를 이용해 만들어진 웹 페이지를 사용자와 상호작용할 수 있도록 함.
"동적"인 기능을 부여
02장. 수업의 목적
아간 모드와 주간 모드, 버튼을 이용해 바꾸는 것을 구현할 때 -> 자바스크립트 사용
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
">input 태그를 이용해 버튼을 만들 수 잇다.
속성으로 buttoh을 지정
value 속성에는 night를 작성 (버튼의 이름)
클릭 시에 (onclick) -> 이 문서에서 <body> 태그를 선택하고, 그 태그 style의 backgroundColor 속성 값으로 black, color 속성 값으로 white를 설정해주는 기능
03장. HTML과 JS의 만남: <script> 태그
자바스크립트는 HTML 위에서 동작한다.
ex1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Javascript</h1>
<script>
document.write("hello world!");
</script>
</body>
</html>
html에서 1+1 => 영원히 1+1이지만,
Javascript에서 1+1은 2이다!
지금부터 자바스크립트를 사용하겠다! 는 것을 선언하는 것이 script 태그이다.
04장. HTML과 JS의 만남: 이벤트
ex2.html
<body>
<input type="button" value="hi">
</body>hi라고 적힌 버튼이 화면에 생긴다.
이 버튼을 눌렀을 때 경고창이 뜨도록 해보자.
<input type="button" value="hi" onclick="alert(hi)">
버튼을 눌렀을 때 (onclick) 알림(alert) 기능이 잘 작동하는 것을 볼 수 있다. 이처럼 웹 브라우저, 웹 페이지 안에서 일어나는 일을 이벤트 (Event) 라고 한다. 어떤 이벤트가 발생했을 때, 자바스크립트를 이용해 어떤 동작이 발생하도록 할 수 있다. 여기에서는 click이라는 이벤트가 발생했을 때 hi라는 알림창을 띄우도록 하였다.
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text">
</body>
텍스트 입력 창이 잘 생긴 것을 확인할 수 있다. 여기에 작성된 내용이 변했을 때 체크하는 이벤트를 알아보자. 바로 onchange 속성이다.
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed!')">
</body>
성공적으로 실행되는 것을 확인하였다.
05장. HTML과 JS의 만남: 콘솔
콘솔 (Console)
간단하게 어떤 코드를 시행해야 하는 상황에서 사용할 수 있다.
ex) 글자 수 세기
이처럼 간단한 코드를 실행할 때 사용해볼 수 있다. 이렇게 즉석에서 자바스크립트 고드를 실행할 수 있다는 것이 장점이다.
06장. 데이터 타입 - 문자열과 숫자
문자와 숫자라는 데이터 타입에 대해 깊게 이해해 보자.
|
alert(1) //1
alert(1+1) //2이처럼 숫자에서는 이항 연산자가 매우 중요한 역할을 한다. 덧셈, 뺄셈, 곱셈, 나눗셈이 가능하다.
문자열의 중요한 기능들도 살펴보자.
- .toUpperCase
'hello world'.toUpperCase() // HELLO WORLD문자열의 모든 문자를 대문자로 출력시키는 메서드이다.
- indexOf
'Hello world'.indexOf('O'); //-1
'Hello world'.indexOf('o'); //4어느 자리에 해당 문자열이 있는지를 찾아 주는 역할이다.
- trim
" hello ".trim(); //hello문자열의 모든 공백을 제거하는 메서드이다.
숫자와 문자열의 차이는 아래와 같다.
1+1 //2, number끼리의 덧셈
"1"+"1" //11, string끼리 연결
'생활코딩! HTML+CSS+자바스크립트' 카테고리의 다른 글
| WEB 6주차 (Javascript 16장~) (0) | 2023.09.10 |
|---|---|
| WEB 5주차 (Javascript 7~15장) (0) | 2023.09.03 |
| WEB 3주차 (CSS 7장~15장) (0) | 2023.08.20 |
| WEB 2주차 (HTML 17~22장, CSS 1~6장) (0) | 2023.08.13 |
| WEB 1주차 (HTML 1~16장) (0) | 2023.08.05 |