본문 바로가기

전체 글

 (71)
2. jQuery 선택자 테스트1 테스트2 테스트3 테스트1 테스트2 테스트3 5. 속성 선택자 - 요소[속성] : 특정 속성을 가지고 있는 객체 선택 - 요소[속성 = 값] : 속성 안의 값이 특정 값과 같은 객체 선택 - 요소[속성 ~= 값] : 속성 안의 값이 특정 값을 같은 단어로서 포함하는 객체 선택 - 요소[속성 ^= 값] : 속성 안의 값이 특정 값으로 시작하는 객체 선택 - 요소[속성 $= 값] : 속성 안의 값이 특정 값으로 끝나는 객체 선택 - 요소[속성 *= 값] : 속성 안의 값이 특정 값을 포함하는 객체 선택 성별: 남자 여자 확인 prop() 메소드 - prop("속성명") : 해당 속성이 요소에 존재하면 true, 아니면 false - prop("속성명, true | false ") : 해당 속성을 c..
13. 최신 자바스크립트 기술: ES6 문법 객체 1. 객체 초기화 const name = "Kim"; const age = 21; const major ="Math"; const student = {name:name, age:age, major:major} console.log(student) // 결과: { name: 'Kim', age: 21, major: 'Math' } 이렇게 원래 객체를 선언할 시에는 {key:value, key:vakue} 로 선언하였다. const name = "Kim"; const age = 21; const major ="Math"; const student = {name, age, major} console.log(student) // 결과: { name: 'Kim', age: 21, major: 'Math' }..
12. 함수 기본적인 함수의 선언, 정의, 호출 function 함수명([매개변수]) { // 함수 선언 console.log("코드 == 함수정의") // 함수 정의 } 함수명([매개변수]) // 함수 호출 익명함수 - 필요 시 마음대로 호출하는 것이 불가(이름이 없기 때문) - 선언된 함수가 여러 곳에서 재사용 되는 것이 아닌, 이벤트핸들러와 같은 특정 동작이나 상황에서만 수행하는 함수가 필요한 경우 사용 - 매개변수로 전달되는 함수의 형태가 일정하지 않을 때 사용 A.addEventListener("click", function(){ // 함수 선언(함수명X) console.log("함수 정의") }) 즉시 실행 함수 - 익명 함수의 한 종류로, 함수가 정의되자마자 실행되는 함수 - 사용이유 1) 함수 선언 및..
11. DOM DOM(Document Object Model) HTML(웹문서, 웹페이지) 문서를 객체 기반으로 표현한 것 -> HTML문서에 작성된 내용을 트리구조(계층형)로 나타냈을 때 각각의 태그, text, commet 등을 Node라 한다. * 계층형 구조 document : { DOCTYPE : html HTML : { HEAD : { TITLE : { TEXT : "문서제목"} STYLE : {...} META : {...} }, BODY : { H1 : {TEXT : "제목", ATTRIBUTE : "속성"} COMMENT : {TEXT: 주석내용} DIV : {...} } } } Node 확인하기 부모 요소.parentNode 요소의 부모 노드 탐색하여 반환 자식 요소.childNodes 요소의 자식 ..
1. jQuery 개요 jQuery 기존에 복잡했던 클라이언트 측 HTML 스크립팅을 간소화 하기 위해 고안된 JavaScript 라이브러리 적은 양의 코드로 빠르고 풍부한 기능 제공 * 라이브러리: 프로그램, 프로그래밍 언어에 없는 추가적 기능 1. jQuery 라이브러리 다운로드하여 external 방식으로 연결 2. CDN(Content Delivery Network) 이용하여 온라인 환경에서 페이지 로딩 시 다운로드 하여 연결( 자바스크립트 버튼 제이쿼리 버튼 HTML 해석 순서와 window.onload, jQuery ready()함수 HTML 문서는 위에서 아래로 항상 순서대로 해석된다. 즉, 아래쪽에서 작성되어 아직 해석이 안 된 코드는 사용할 수 없다. window.onload - HTML(현재창)이 모두 로딩이..
10. JavaScript 객체, JSON JavaScript 객체 JavaScript 객체는 {} 내에 key : Value 가 모여있는 Map형태로 작성된다. -> { K:V, K:V, K:V...} - JavaScript에서 객체를 생성하는 방법 1) {} : 객체 리터럴 표기법을 이용하여 생성 2) 생성자 + new 생성자()를 이용하여 생성 ** JS객체의 Key는 무조건 string(묵시적 string) = key 작성 시 "", '', 따옴표X 모두 string으로 인식 const brand = "Macdonald" const product = { "pName" : "Cheese Burger", "brand" : "Burger King", price : 7000, size : ["s", "M", "L"], 'info' : functi..
9. 윈도우 내장 객체 윈도우 객체 1. 브라우저 창 자체를 나타내는 객체 2. window 객체는 js에서 최상위 객체로 DOM, BOM으로 분류된다. - DOM(Document Object Model) : html 자체를 나타내는 객체 (document.get~) - BOM(Browser Object Model) : location, history, screen, navigator -> 페이지 간 이동 * window 객체는 창 자체를 나타내고 있으므로 브라우저 창 내에서 어디서든 접근 가능 즉, window 객체의 속성과 기능을 호출 시 window. 을 붙이지 않아도 호출 가능하다. ex) window. alert() == alert() window.setTimeout(함수, 지연시간ms) 지정된 지연시간 후 함수를 실..
8. 배열 배열(Array) 변수를 묶음으로 다루는 것(변수가 연속적으로 나열) * JS 변수의 특징 1. 자료형 제한이 없다. 2. 길이의 제한이 없다. (== Java Collenction List와 비슷) * JS 배열 선언 방법 1. const arr1 = new Array(); -> 0칸짜리 배열 생성 2. const arr2 = new Array(3); -> 3칸짜리 빈 배열 생성 1. const arr3 = []; -> 0칸짜리 배열 생성 1. const arr3 = ['가', '나', '다']; -> 3칸짜리 초기화된 배열 생성 const arr1 = new Array() const arr2 = new Array(3) const arr3 = [] const arr4 = ['가', '나', '다'] *..

티스토리툴바