HTML과 JavaScript의 만남 1 (script 태그)
HTML 코드 안에 JavaScript를 쓰겠다는 것을 알려주는 태그(script)
<body>
<h1>JavaScript</h1>
<script>
document.write('hello world');
</script>
</body>
document.write는 출력하는 JavaScript 코드이다.
<body>
<h1>JavaScirpt</h1>
hello world
</body>
위 두 코드가 나타내는 결과값은 같지만 자바스크립트는 동적이라는 차이가 있다.
예를 들어, 밑에 코드에 1+1을 작성하면 1+1이 그대로 나오지만 document.write(1+1);은 계산기처럼 2가 나온다.
HTML과 JS의 만남 (이벤트)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="submit" value="submit">
<button>버튼</button>
<div>버튼 같지 않지만 버튼이 된다.</div>
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')">
</body>
</html>웹페이지에 버튼을 생성하는 HTML 코드
<input type="button">
<input type="button" value="hi">input 태그에 type을 button으로 지정하고 value에 텍스트를 넣으면 그 글자대로 버튼이 생성된다.
<input type="submit">
<input type="submit" value="서브밋">submit 타입은 데이터를 아무런 검증없이 보내기 때문에 자바스크립트에서 검증을 한 후 데이터를 전송해야 한다.
<button>
<button>버튼</button>
<div>
<div>버튼 같지 않지만 버튼이 된다.</div><div>는 일반 text를 쓸때 사용하는 태그로, 위의 세 가지 방법과는 달리 눌리는 기능이 없다.
그래서 CSS로 뒷배경 색깔을 넣어서 버튼처럼 보이게 만든 후 기능을 달아서 사용한다.
<a>태그와 같이사용해서 버튼기능을 넣고
CSS에 :active { } 를 사용해서 마우스가 눌렀을때 변화도 설정할 수 있다.
웹페이지에 text box 생성하는 HTML 코드
<input type="text">
event (이벤트)
JavaScript onkeydown event attribute
https://www.w3schools.com/tags/ev_onkeydown.asp
onclick: 클릭했을 때 이벤트
<input type="button" value="hi" onclick="alert('hi')">hi 버튼을 클릭했을 때 hi라는 창이 뜬다.
onclick 속성의 속성값으로 자바스크립트가 와야한다.
onchange: 입력필드의 값을 변경할 때 발생하는 이벤트
<input type="text" onchange="alert('changed')">텍스트 박스에 글자를 적고 클릭하면 changed라는 창이 뜬다.
같은 텍스트를 입력하면 아무런 창도 뜨지 않는다.
onkeydown : 키를 눌렀을 때 이벤트
<input type="text" onkeydown="alert('key down!')">텍스트 박스에 아무키나 누르면 key down!이라는 창이 뜬다.
onkeyup : 키를 눌렀다가 땠을 때 이벤트
onkeypress : 실제로 글자가 써질 때 이벤트
<input type="text" onkeypress="alert('keypress!')">
*on으로 시작하는 이벤트의 속성값으로는 모두 자바스크립트가 와야한다.
여러가지가 있다.
HTML과 JS의 만남 (Console)
자바스크립트 코드를 실행하기 위해 파일을 생성하지만 경우에 따라 파일이 아니더라도 코드를 실행해야 하는 상황이 있는데 이때 사용하는 것이 콘솔이다.
웹페이지에서 [검사] 버튼을 누르고 console 탭을 누른다.
이 콘솔을 활용하면 파일을 생성하지 않더라도 자바스크립트 코드를 실행시킬 수 있다.
예를 들어 계산이 필요할 때 이 콘솔을 계산기로 쓸수도 있고, 데이터를 간단하게 처리할 수 있다.
alert() 함수는 웹페이지에 경고창을 띄어주는 함수
.length은 문자의 개수를 알려주는 명령어이다.
alert('문자열'.length)를 실행하면 문자열의 개수를 알려준다.
'Full-Stack Study' 카테고리의 다른 글
| WEB2 - CSS (0) | 2024.04.02 |
|---|---|
| WEB1-HTML (0) | 2024.02.02 |