w3schools로 자바스크립트 공부한 내용을 정리합니다.
자바스크립트는 HTML, 웹 프로그래밍 언어이다.
자바스크립트는 배우기 쉽다.
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body> <h2>JavaScript test</h2> <button type="button" onclick="document.getElementById('test').innerHTML = Date()">click me</button> <p id="test"></p> </body> </html> | cs |
자바스크립트와 자바는 컨셉과 디자인 측면 모두에서 완전히 다른 언어이다.
자바스크립트는 1995년 Brendan Eich 에 의해 만들어졌고 1997년에 ECMA 스탠다드가 되었다.
ECMAScript가 또다른 공식적인 이름이다.
많은 자바스크립트 HTML methods 중 하나는 getElementById() 이다.
아래 예시는 괄호 안의 HTML 요소를 찾아 innerHTML로 요소 콘텐츠를 바꾸는 방법이다
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <p id="demo">JavaScript can change HTML content.</p> <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button> </body> </html> | cs |
자바스크립트는 큰따옴표(" ")와 작은 따옴표(' ')를 모두 허용한다.
자바스크립트는 HTML 스타일(CSS)도 변경할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <button type="button" onclick="document.getElementById('test').style.fontSize='40px'">Click please</button> <p id="test">JavaScript can change the style of an HTML element.</p> </body> </html> | cs |
위 코드를 실행해서 버튼을 클릭하면 글자크기가 40px로 커진다.
버튼 클릭 시 문구를 사라지게 할 수도 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> <h2>What Can JavaScript Do?</h2> <button type="button" onclick="document.getElementById('test').style.display='none'">Click Please</button> <p id="test">JavaScript can hide HTML elements.</p> </body> </html> | cs |
위 소스를 실행 후 버튼을 클릭하면 문구가 사라진다. style.display='none' 때문이다.
'문돌이의 IT > JavaScript' 카테고리의 다른 글
| w3schools JavaScript 자바스크립트 output (0) | 2018.11.04 |
|---|---|
| Front-end Framework trend (0) | 2018.09.04 |
| 자바스크립트 디자인패턴 참고자료 (0) | 2018.09.04 |
| 자바스크립트 객체(javaScript Object) (0) | 2018.09.03 |
| 자바스크립트 클로저(javaScript Closure) (0) | 2018.09.02 |