반응형
script 태그
기본적으로 JavaScript는 HTML위에서 동작하는 언어이다. 따라서 HTML언어 위에 다른 언어인 JavaScript를 함께 사용하는지 알아보자.
<script>
HTML위에서 JavaScript가 시작됨을 알리는 태그
HTML와 JavaScript의 차이
HTML은 정적이므로 연산을 할 수 없지만, JavaScript는 동적이므로 연산을 할 수 있다.
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>JavaScript</h1>
<script>
document.write('hello world<br>');
document.write(1+1);
</script>
<h1>html</h1>
hello world<br>
1+1
</body>
</html><결과>
이벤트
button : onClick 이벤트
<body>
<input type="button" value="hi" onClick="alert('hi')"/>
</body><input type="button" : 버튼 만들기
* 속성 *
value : 버튼에 작성될 값
onClick
- 1. 속성값에 반드시 JavaScript가 와야 한다.
- 2. 속성값은 웹브라우저가 기억해놓았다가, onClick이 위치한 태그를 사용자가 클릭했을 때 자바스크립트 문법에 따라 웹브라우저가 동작한다.
이처럼 웹브라우저 위에서 일어나는 일들을 이벤트라고 한다.
어떤 이벤트가 일어났을 때 어떤 자바스크립트가 일어나도록 하는 것이 onClick이다.
text : onChange 이벤트
텍스트 속 내용이 변경되었을 때를 체크하는 이벤트
<input type="text" onChange="alert('changed')">
text : onkeydown 이벤트
키보드의 키를 입력할 때마다 발생하는 이벤트
<input type="text" onkeydown="alert('key down!')">
콘솔
개발자 도구 > Console을 이용하여 자바스크립트 파일을 만들지 않고도 자바스크립트를 실행할 수 있다.
ex)
개발자 모드 > Elements 에서 esc한번 누르면 아래에 console이 뜬다.
이곳에 자바스크립트로 작성한 코드를 입력하게 되면 현재 웹페이지 정보를 불러와서 자바스크립트를 실행시킬 수 있다.
즉, 이미 만들어진 웹사이트에 필요에 따라 간단한 자바스크립트 코드를 작성하여 문제를 해결할 수 있다.
반응형
'Front-End: Web > JavaScript' 카테고리의 다른 글
| HTML에서 JavaScript 로드하기 (0) | 2020.09.24 |
|---|---|
| [생활코딩: JavaScript] 3. 데이터타입 - 문자열과 숫자 (0) | 2020.09.16 |
| [생활코딩: JavaScript] 1. Intro (0) | 2020.09.16 |
| 자바스크립트와 웹 애플리케이션 개발 (0) | 2020.09.01 |
| 클로져(Closure) (0) | 2020.08.31 |