1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script type="text/javascript"> 객체 만드는법 var hong = { "name" : '홍', "age" : 23, "kor" : 30, //자바스크립트 객체 문법 "math" : 50, "eng" : 80 }; var kim = {}; kim.name = "김"; //딱히 타입이 정해지지 않았기때문에 kim.age = 30; kim.kor = 100; kim.math = 70; kim.eng = 80; </script> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> 공통틀 있는 객체 만들기 function makeStudent(name,age,kor,math,eng){ var stu = {}; stu.name = name; stu.age = age; stu.kor = kor; stu.math = math; stu.eng = eng; return stu; } var hong = makeStudent('홍',23,50,30,40); | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> function Student(name,age,kor,math,eng){ this.name = name; this.age = age; this.kor = kor; //생성자 함수,,? this.math = math; this.eng = eng; this.getAverage = function(){ return (kor + math + eng) / 3; } } var hong = new Student('hsg',23,50,30,40); //new 키워드를 사용하지 않았을때 this키워드는 window객체를 나타냄 //-> 함수를 실행하는 동안 window객체에 속성을 추가하게됨 //new 키워드를 사용하면 함수가 실행될때 새로운 객체를 위한 공간을 만들고 this 키워드가 해당 공간을 의미 | cs |
document.body.innerHTML = 'Hello World';
1 2 3 4 5 | <script> //브라우저 윈도우가 다 열렸을때 호출되는 함수 window.onload = function(){ document.body.innerHTML = 'Hello World'; }//document객체의 body속성의 innerHTML속성에 Hello World라는 문자열을 대입 | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script> window.onload = function(){ setTimeout(function(){ //여기에서 h1제목태그에 접근해서 글자색을 빨갱이로 바꾸도록 명령어 작성 //특정요소에 접근하는 방법 //- 태그이름으로 탐색 //- 요소의 id속성을 기준으로 탐색 //- 요소의 class속성을 기준으로 탐색 //- 기타등등 document.getElementById('header'); header.style.color='red'; },3000); } | cs |
1 2 3 | // h1.addEventListener("mouseenter", function(){ // h1.style.color = 'red'; // }); | cs |
<script src="외부 자바스크립트파일"></script>
외부에 .js파일로 작성해둔 자바스크립트 파일 로드
jQuery란?
1. 엘리먼트(선택자)를 선택하는 강력한방법 <id나 class값을 통해 html요소 선택>
2. 선택된 엘리먼트들을 효율적으로 제어할 수 있는 다양한 수단을 제공 <속성값 변경(문서제어), 이벤트처리, 애니메이션 효과>
3. 자바스크립트 라이브러리
https://code.jquery.com/
1 2 3 | <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 해당파일을 우리 웹서버의 webcontent에 복사해두고 내부에서 참조해되 됨 |
1 2 3 4 5 | <script type="text/javascript"> $(document).ready(function(){ alert('jQuery 가봅시당'); }); </script> | cs |
외부 스크립트파일을 CDN방식으로 외부서버로부터 참조했음,
JQUERY 기본 , 선택자
기본
$(document).ready(function(){
풀로 쓰기
});
$(function(){
줄여쓰기
}
선택자
$(“*”) : 전체요소선택
$(“태그명”) : 태그명선택
$(“#아이디명”) : 아이디명 선택
$(“.클레스명”) : 클레스명 선택
$(“태그명1 태그명2″) : 태그명1의 하위요소 태그명2
$(“태그명1>태그명2″) : 태그명1의 자식요소
$(“선택요소”).parent : 선택요소의 부모요소
$(“선택요소”).children(“태그명”) : 선택요소의 자식요소
$(“선택요소”).prev() : 선택요소의 형제요소의 이전요소
$(“선택요소”).next() : 선택요소의 형제요소의 다음요소
$(“선택요소”).siblings(“태그명”) : 선택요소의 형제요소 모두
$(“:종류”) : input 요소 중 종류가 일치하는 요소 선택
' IOT 기반 응용 SW과정 > Web Programing' 카테고리의 다른 글
| Day82 (0) | 2016.07.14 |
|---|---|
| Day81 (0) | 2016.07.13 |
| Day79 (0) | 2016.07.11 |
| Day78 (0) | 2016.07.08 |
| Day77 (0) | 2016.07.07 |