22.09.16ver
1. 수업 소개
WEB 1_HTML & Internet을 보고 올 것을 권한다.
HTML이 무엇인지 안다면 바로 공부해도 된다.
HTML은 정적이다. 만들어진 그대로만 존재한다.
정적인 것을 동적으로 만들어 사용자와 상호작용하게 만드는 것이 JavaScript
HTML이 그림을 그리는 것이라면,
JS는 그림을 움직이게 하는 것이다.
2. 수업의 목적
기능을 적용하는 데 필요한 문법을 공부하는 위주
우선은 보자. 문법을 익히려고 애쓰기보다 어떻게 작동하는 지에 집중하자.
3. HTML과 JS의 만남 : script 태크
<body>
<h1>JavaScript</h1>
<script>
document.write(1+1);
</script>
<h1>html</h1>
1+1
</body>
<script> </script> 안 쪽에 있는 코드를 JS로 해석한다.
결과 값은 동적으로 계산되어 나온다.
4. HTML과 JS의 만남 : 이벤트
웹브라우저에서 일어나는 현상 : 사건(이벤트)
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('bey down!!')">
</body>
5. HTML과 JS의 만남 (콘솔)
1) 웹페이지 -> 오른쪽 클릭 -> 검사 -> console
2) F12
3) ctrl + shift + j
console을 이용하면 파일을 만들지 않아도 즉석에서 JS를 코드를 실행할 수 있다.
'프론트엔드 > 생활코딩' 카테고리의 다른 글
| 생활 코딩 12~18강. 조건문과 리팩토링 (0) | 2022.09.16 |
|---|---|
| 생활 코딩 6~11강. 데이터타입과 CSS 기초 (0) | 2022.09.16 |
| 생활코딩 Java Method 정리 1~9강 (0) | 2022.01.07 |
| JAVA 1 생활 코딩 11-15강. Parameter, Arguments, 컴파일, API, UI, 패키지, 클래스, 변수, 메소드, 인스턴스, 상속 (0) | 2022.01.06 |
| JAVA 1 생활 코딩 8-10강. 변수, 데이터 타입 변환, 프로그래밍, 프로그램, 디버거 (0) | 2022.01.06 |
댓글