자바스크립트 정리
WHY 자바스크립트? HTML: 기본적인 문서 작성 CSS: 스타일 지정 JAVASCRIPT: 동적인 HTML 문서 작성 event 처리: onClick, onLoad, onMouseOver, onMouseOut … event 발생시: 함수 호출 함수 호출시 document 객체 속성: document.getElementById(“ ”).style.속성=“ … ” document 객체 내용: document.getElementById(“ ”).innerHTML=“ … ” document 객체 값: document.getElementById(“ ”).value=“ … ”
자바스크립트 프로그램 활용 예제-1 버튼 클릭시 ID 요소 색상 바꾸기 <html> <head> <script> function changeColor(element) { document.getElementById(element).style.background=“blue”; } <script> </head> <body> <h1 id=header>My First Javascript</h1> <button onclick=“changeColor(‘header’)>배경색 바꾸기</button> </body> </html>
자바스크립트 프로그램 활용 예제-2 버튼 클릭시 슬라이드 메뉴 보이기/감추기 <style> .sidenav { height: 100%; width: 0px; position: fixed; top: 0; left: 0; z-index: 1; transition: 0.5s; } </style> <script> function openNav() { document.getElementById("mySidenav").style.width = "250px"; function closeNav() { document.getElementById("mySidenav").style.width = "0"; </script>
결과를 문서로 출력하기 document.write(“텍스트”) alert(“텍스트”) confirm(“텍스트”) document.getElementById(“ ”).innerHTML=“텍스트”
프로그래밍 언어의 요소 상수와 변수 연산자 배열 조건문 loop 함수 표준 입력 및 출력 정수형/실수형: 1, 123, -5, 1.0, -1.2 문자형: “a”, “My Name is” Boolean: true, false 연산자 +, -, *, /, % 배열 array=[1,2,3]; name=[“John”,”Sam”] 조건문 if, if-else, if-else if-else, switch loop for, while, do while 함수 표준 입력 및 출력
내장 객체(Object) - Date Date 객체 var now = new Date(); // 오늘 날짜 생성 객체 var thisYear=now.getFullYear() // 올해 연도 구하는 method var thisDay=now.getDay() // 요일 구하는 method now.setDate(1) //now 객체의 날짜를 1일로 지정 var last=new Date(2016,12,31) // last 객체를 날짜 지정 생성
내장 객체(Object) - String String 객체 var str = “abcded”; // 문자열 지정string 객체 생성 var len=str.length // str의 문자열의 길이 구하는 속성 var char=str.charAt(0) // str의 0번째 문자 = ‘a’ var char=str.charAt(1) // str의 1번째 문자 = ‘b’ var n=str.indexOf(“cde”) // 문자열 ‘cde’의 위치 2 (“abcded”) var res=str.replace(“cde”, “ABC”) // str 문자열에서 ‘cde’를 ABC로 대채 res=“abABCd”
String method – charAt() str.charAt()을 이용하는 것이 안전함
내장 객체(Object) - Array Array 객체 var cars=[“Saab”, “Volvo”, “BMW”] // array 객체 생성 cars[0]=“Saab”; cars[1]=“Volvo”, cars[2]=“BMW”; // 0부터 시작 var len=cars.length; // 배열의 크기 속성=3 var a=cars.indexOf(“Volvo”); // a=1 문자열 “Volvo”가 저장되어 있는 위치 index 반환
내장 객체(Object) - Math Math 객체 var x=Math.PI; // 𝜋의 값 var y=Math.sqrt(2) // 2 의 값 계산 var z=Math.pow(4,3) // 4 3 =64 var a=Math.floor(3.72) // a=3 소수점 이하를 버리고 정수값만 var b=Math.ceil(3.72) // b=4 소수점 이하를 무조건 올림 var c=Math.round(3.72) // c=4 소수점 이하 반올림
함수(function) <script> var x = myFunction(4, 3); // Function is called, return value will end up in x document.write(“x=“+x+”<br>”); function myFunction(a, b) { return a * b; // Function returns the product of a and b } </script>
함수 – 전역변수와 로컬변수
함수 – 전역변수와 로컬변수 자바스크립트에서는 변수 선언에 대한 제약이 거의 없음 함수 밖에서 var 선언된 모든 변수는 전역변수 전역변수는 함수에 인수(parameter)로 넘겨줄 필요가 없음 함수 안에서 전역변수의 값 변경 가능 함수 안에서 var 선언된 변수는 모두 local 변수 즉, 함수를 벗어나면 없어지는 변수
DOM과 BOM
DOM – HTML 요소 찾기 ID로 찾기 -> 내용 변경하기 CLASS로 찾기 -> 스타일 변경하기 Document.getElementById(“id”).innerHTML = xxx CLASS로 찾기 -> 스타일 변경하기 Document.getElementsByClassName(“class”).style.??? 태그 이름으로 찾기 document.getElementsByTagName(“tagname”).속성 이름으로 찾기 -> 입력창의 값 변경하기 document.getElementsByName(“name”).value = xxx
BOM
BOM – window 객체 window.open(“URL”) 새 창 열기 window.close() 창 닫기
BOM – location 객체 location.reload() 현재 창 새로 고치기
BOM – history 객체 history.back() history.forward() history.go(-1) 이전 페이지로 이동 history.forward() 앞 페이지로 이동 history.go(-1) 이전 -1 페이지로 이동
event - mouse onClick onMouseOver onMouseOut onDBLclick
event - keyboard onKeyDown onKeyPress onKeyUp
event – Frame/Object onLoad onUnload onResize onScroll
event - form onChange onFocus onBlur onSubmit
데이터 입력 확인하기
데이터 길이 확인하기
자바스크립트를 공부합시다 http://www.w3schools.com/default.asp https://www.codecademy.com/