-
[Javascript] 1. 소개(Introduction) - 자바스크립트 강좌Web/JavaScript 2015. 6. 13. 14:21
1. JavaScript Can Change HTML Content
HTML 메서드인 document.getElementById() 를 이용하여 HTML Content를 바꿔보도록 하겠습니다!다음 예제는 HTML 요소(id="demo")를 찾기위한 메소드를 사용하고 "Hello JavaScript"로 요소 내용을 변경하는 예제입니다.아래와 같이 HTML을 작성합니다.12345678910111213141516<!DOCTYPE html><html><body><h1>What Can JavaScript Do?</h1><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 그러고선 웹에서 실행합니다!위와 같이 뜨면 버튼을 클릭하여 결과를 확인합니다.이전 문구가 'Hello JavaScript!' 로 바뀌었죠??document.getElementById().innerHTML 속성으로 해당 p 태그의 HTML text를 삽입 한 것입니다!!2. JavaScript Can Change HTML Attributes이번에는 이미지를 클릭시, 바꾸는 예제를 진행하겠습니다!12345678910111213141516171819202122232425<!DOCTYPE html><html><body><h1>JavaScript Can Change Images</h1><img id="myImage" onclick="changeImage()" src="bbb.jpg" width="200" height="180"><p>Click the image to change the image.</p><script>function changeImage() {var image = document.getElementById('myImage');if (image.src.match("bbb")) {image.src = "aaa.jpg";} else {image.src = "bbb.jpg";}}</script></body></html>cs 실행하면 아래와 같이 나오는데, 클릭을 통해 확인합니다!이번 예제는 이미 정의된 img 태그의 속성을 가져와서Script 내에서 제어를 하는 changeImage() 함수를 생성하여 이미지를 변경하는 예제입니다!image 변수를 HTML의 아이디가 myImage로 된 태그로 매핑해주고,이미지 소스의 값에 따라 if / else 로 변경합니다!3. JavaScript Can Change HTML Styles (CSS)이번에는 CSS 바꾸는 예제를 진행하겠습니다!12345678910111213141516171819202122<!DOCTYPE html><html><body><h1>What Can JavaScript Do?</h1><p id="demo">JavaScript can change the style of an HTML element.</p><script>function myFunction() {var x = document.getElementById("demo");x.style.fontSize = "25px";x.style.color = "red";}</script><button type="button" onclick="myFunction()">Click Me!</button></body></html>cs 버튼 누르기 전의 화면입니다.버튼을 누르면 폰트 색과 사이즈가 변경이 됩니다!4. JavaScript Can Validate Data이번에는 값을 검사하는 예제를 진행하겠습니다!값 검사는 패스워드 확인, 이메일 폼 확인 등등 여러 방식으로 많이 쓰이죠~1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html><html><body><h1>JavaScript Can Validate Input</h1><p>Please input a number between 1 and 10:</p><input id="numb" type="number"><button type="button" onclick="myFunction()">Submit</button><p id="demo"></p><script>function myFunction() {var x, text;// Get the value of the input field with id="numb"x = document.getElementById("numb").value;// If x is Not a Number or less than one or greater than 10if (isNaN(x) || x < 1 || x > 10) {text = "Input not valid";} else {text = "Input OK";}document.getElementById("demo").innerHTML = text;}</script></body></html>cs Script의 가운데 부분에 isNaN 과 숫자 입력값이 1 부터 10 사이인지 검사하는 if 문이 존재합니다!!if /else에서 체크해서 text를 위의 첫 예제 방식으로 뿌려주는 것이지요~5. JavaScript Can Hide HTML ElementsHTML 요소를 숨기는 것 또한 가능합니다.1document.getElementById("demo").style.display="none";cs W3schools의 JS 섹션을 참고로 작성했습니다!
'Web > JavaScript' 카테고리의 다른 글
[javascript] 6. 주석(Comments) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 5. 구문(Statements) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 4. 문법(Syntax) - 자바스크립트 강좌 (0) 2015.06.13 [javascript] 3. 출력(Output) - 자바스크립트 강좌 (0) 2015.06.13 [javascript] 2.WhereTo - 자바스크립트 강좌 (0) 2015.06.13 [JavaScript] 웹페이지에서 스크롤 맨아래로 내려갔을때 추가 항목 로드(ex. facebook 타임라인 불러오기) JS / CSE (0) 2015.06.13
