07.28(traversing 예제)
2020. 7. 28. 20:20
프로그래밍/jQuery
traversing(요소 탐색) 예제 div (parent) p span h1 h2 h3 h4 p div.test ul1 li1-1 li1-2 ul2 li2-1 li2-2 li2-3 ul3 li3 fromMe
07.27(attr, prop)
2020. 7. 27. 20:58
프로그래밍/jQuery
attr 문서객체의 작성된 특정속성을 가져오거나 세팅할 수 있음 작성되지 않은 속성을 가져오려고 하면, undefined를 리턴 prop 문서객체의 속성값을 js를 처리하기 위해 true/false값 처리 게임 영화 운동
07.24(선택자)
2020. 7. 24. 20:33
프로그래밍/jQuery
선택자 CSS 선택자뿐만 아니라 몇몇 비표준 선택자까지도 사용할 수 있음 필터링에 사용할 수 있는 선택자 선택자 예제 설명 :eq(n) $("ul li:eq(3)") 선택한 요소 중에서 인덱스가 n인 요소를 선택 :gt(n) $("ul li:gt(3)") 선택한 요소 중에서 인덱스가 n보다 큰 요소를 모두 선택 :lt(n) $("ul li:lt(3)") 선택한 요소 중에서 인덱스가 n보다 작은 요소를 모두 선택 :even $("tr:even") 선택한 요소 중에서 인덱스가 짝수인 요소를 모두 선택 :odd $("tr:odd") 선택한 요소 중에서 인덱스가 홀수인 요소를 모두 선택 :first $("p:first") 선택한 요소 중에서 첫 번째 요소를 선택 :last $("p:last") 선택한 요소 중에..
07.23(정규표현식)
2020. 7. 23. 20:33
프로그래밍/JavaScript
정규표현식 특정패턴을 지닌 문자열 집합을 검색할 수 있는 형식언어 유효성검사, 검색, 문자열대체 등 다양하게 활용(특정언어에 제약을 받지 않음) 일반적 조건문을 사용해서 검사하는 것보다 훨씬 간단하지만, 간단한만큼 표현식 숙지가 어려움 정규표현식 객체 생성 및 사용 btn1.onclick = () => { //1. new RegExp let regExp1 = new RegExp('script'); //2. /정규표현식/ let regExp2 = /script/; //3. 혼합 let regExp3 = new RegExp(/script/); let str = 'javascript jquery ajax'; //정규표현식 객체 메소드 : exec (제일 많이 사용하는 건 test) area1.innerHTML..
07.22(이벤트)
2020. 7. 22. 20:22
프로그래밍/JavaScript
이벤트(event)란? 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행함 따라서 클라이언트 측 자바스크립트를 비동기식 이벤트 중심(event-driven)의 프로그래밍 모델이라고 함 이벤트핸들러 함수 바인딩 on이벤트 속성에서 함수 실행(계속해오던 방식) 스크립트태그 내에서 요소에 on이벤트 속성 지정 addEventListener(이벤트명, 콜백함수) 이벤트 객체 이벤트 발생시 관련 정보를 가진 객체, 이벤트핸들러 함수의 첫 번째 인자로 전달 이벤트 발생 객체 이벤트객체.target 속성값 이벤트 핸들러 함수안에서 this 키워드로 접근 이벤트 함수 안에서는 this가 window가리키지 않고 이벤트 발생객체 가리킴 이벤트 버블링 자식노드에서 발생한 이벤트는 부모노드로 자동..
07.21(Window 객체, BOM, DOM )
2020. 7. 21. 20:58
프로그래밍/JavaScript
window 객체 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 됨 window 객체의 메소드는 전역 함수이며, window 객체의 프로퍼티는 전역 변수 문서 객체 모델(DOM)의 요소들도 모두 window 객체의 프로퍼티가 됨 open 새로운 팝업 또는 탭을 열 수 있는 메소드 setTimeout 일정시간 이후에 지정한 콜백함수를 호출 (() => { setTimeout(function(){ alert("5초가 지났습니다."); }, 5000); })(); setInterval | clearInterval 일정시간 간격으로 콜백함수를 호출 생성된 인터벌함수를 제거 BOM Browser Object Model navigator location history ..
07.20(객체)
2020. 7. 20. 20:21
프로그래밍/JavaScript
객체(Object)란? 객체란 실생활에서 우리가 인식할 수 있는 사물 자바스크립트 객체 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합 자바스크립트에서 숫자, 문자, 불리언, undefined 타입을 제외한 모든 것이 객체임 (() => { let product = { "product-name" : '말린 망고', type : "피클류", ingredient : ['망고', '설탕'], amount : 10, origin : "필리핀" } // console.log(product.product-name); console.log(product['product-name']); //특수문자/공백등이 포함된 키값은 .(객체접근 연산자 사용불가) console.log(..
07.17(함수 클로저)
2020. 7. 17. 20:55
프로그래밍/JavaScript
자유변수 함수의 지역범위에서 정의되지 않은 변수 let hi = "안녕"; (function(name){ let word = hi + ", "+name; let greet = "반가워 :)"; let say = word + '\n' + greet; alert(say); })('철수'); //name, word, greet, say 지역변수 //hi 자유변수 내부함수 함수 안에서 또 다른 함수를 선언하는 것 function outter(){ function inner(){ var title = 'javascript'; alert(title); } inner(); //내부함수 } outter(); //외부함수 클로저 함수 자유변수를 가지고 있는 함수 클로저(closure)는 내부함수가 외부함수의 맥락(con..