jQuery 호출 및 표기방법
%()의 의미
jQuery 코드를 보면 jQuery() 보다 $()를 더 많이 접하게 되는데, $표시는 jQuery의 단축 표현이다.
jQuery = $() 와 같다.
jQuery() = $()
| jQuery기초 계층(Hierarchy) 선택자 (0) | 2022.10.23 |
|---|---|
| jQuery 문서 준비 이벤트, 따옴표 (0) | 2022.10.23 |
| jQuery 명령어 잘 정리된 사이트 (0) | 2022.10.22 |
| jQuery 3가지 호출방법 (0) | 2022.10.22 |
| 자바스크립트 객체 생성 3가지 방법 (0) | 2022.10.20 |
| jQuery 문서 준비 이벤트, 따옴표 (0) | 2022.10.23 |
|---|---|
| jQuery 호출 및 표기방법 (0) | 2022.10.23 |
| jQuery 3가지 호출방법 (0) | 2022.10.22 |
| 자바스크립트 객체 생성 3가지 방법 (0) | 2022.10.20 |
| 자바스크립트 배열 생성 방법 (0) | 2022.10.20 |
jQuery 3가지 호출방법
1. jQuery의 핵심은 jQuery() 함수이다. 모든 jQuery의 시작은 jQuery()함수를 거쳐햐 한다. 이 함수를 통해 리턴되는 결과는 모두 jQuery 객체로서
jQuery의 수많은 기능들을 사용할 수 있게 된다. jQuery 명령들을 잘 사용하기 위해서는 함수의 용도와 사용법에 대해 잘 알고 있어야 한다.
2. jQuery()함수는 ()안에 들어가는 형식에 따라 3가지로 처리된다.
2-1. jQuery()함수 내부에 selector를 매개 변수로 넣어 jQuery 객체를 만들 수 있다.
jQuery('h1') // DOM에서 h1 노드를 모두 선택하여 jQuery 객체로 만들어 준다.
jQuery('ul h1') // DOM에서 ul 노드 내부에 있는 li 노드를 모두 선택하여 jQuery 객체로 만들어 준다.
2-2. jQuery()함수 내부에 HTML 문자열을 입력하면 jQuery 객체를 직접 만들 수 있다.
// <body> 태그에 <p>태그를 생성하여 추가한다.
jQuery('<p id="hello"> 안녕하세요 </p>').appendTo('body');
Javascript에서 노드를 동적으로 만드는 createElement() 메서드와 같은 기능을 한다. jQuery 내부에서는 반드시 createElement()메서드를 사용하여
처리를 한 것을 알 수 있다.
2-3. jQuery()의 괄호 안에 함수가 들어가는 경우
(문서 준비 이벤트) 이 함수는 웹 브라우저가 HTML문서를 읽어 DOM Tree를 생성한 직후에 실행되는 콜백함수*
*콜백함수: 스스로 부르는 함수, 특정 조건을 만족하여 스스로 호출되는 함수
이 방법은 jQuery를 <head> 태그 내에서 작성할 때에 반드시 사용해야 한다. 왜내하면 웹 브라우저는 <body>보다 <head>를 먼저 로딩하기때문에
<body>의 내용들이 로딩 전이라면 jQuery가 body의 노드들을 읽을 수 없기 때문이다.
*jQuery
jQuery(function() { alert("문서가 모두 읽어졌습니다.")} );
*Javascript
window.onload = function() { alert("문서가 모두 읽어졌습니다."); };
*jQuery vs Javascript 차이점
window.onload - HTML 로딩이 끝난 후에 실행되는 것으로, 이미지와 같은 콘텐츠가 모두 불려진 후에 콜백함수 호출
jQuery(function) - 웹브라우저가 DOM Tree를 생성하게 될 때에 콜백함수가 호출된다. 이는 HTML의 뼈대만 읽고 콜백함수를 호출하고 난 후, 이미지나 콘텐츠 등을 나중에 Load하는 것이다.
| jQuery 호출 및 표기방법 (0) | 2022.10.23 |
|---|---|
| jQuery 명령어 잘 정리된 사이트 (0) | 2022.10.22 |
| 자바스크립트 객체 생성 3가지 방법 (0) | 2022.10.20 |
| 자바스크립트 배열 생성 방법 (0) | 2022.10.20 |
| Javascript Selector (0) | 2022.05.19 |
***객체 생성 방법
객체를 만들고 값을 추가하는 방법에는 3가지가 있다
1. new 생성사 사용
var obj = new Object(); // 빈 객체 생성
obj.a = 10;
obj.name = "홍길동";
obj.fn = function(){console.log("Hello World!")};
2. 객체를 생성하면서 요소 추가
var my_array = new Object( {a:10, name:"홍길동", fn:function(){}});
console.log(my_array); // 배열 객체를 생성하면서 요소 추가
3. 중괄호({})를 사용하여 직접 생성
var my_array = {a:10, name:"홍길동", fn:function(){}};
console.log(my_array);
console.log(my_array.name);
| jQuery 명령어 잘 정리된 사이트 (0) | 2022.10.22 |
|---|---|
| jQuery 3가지 호출방법 (0) | 2022.10.22 |
| 자바스크립트 배열 생성 방법 (0) | 2022.10.20 |
| Javascript Selector (0) | 2022.05.19 |
| 자바스크립트 심볼, 클래스, 프로미스 (0) | 2022.05.19 |
***자바스크립트 배열 생성 방법
- 배열을 만들고 값을 추가하는 방법에는 아래의 세 가지 방법이 있다.
1. new 생성자 사용
var my_array = new Array(); // 배열 객체 생성
my_array[0] = "데이터1";
my_array[1] = "데이터2";
my_array[2] = "데이터3";
console.log(my_array);
console.log(my_array[0]);
2. 배열 객체를 생성하면서 요소 추가
var my_array = new Array(4, 7, 3); // 배열 객체를 생성하면서 요소 추가
console.log(my_array);
console.log(my_array[0]);
3. []연산자를 사용하여 직접 생성
var my_array = ["orange" , "apple" , 56];
console.log(my_array);
console.log(my_array[0]);
Array객체에는 원소 간의 정렬, 삽입, 삭제 등과 같이 배열을 조작할 수 있는 다양한 메서드(함수)들이 존재한다.
| jQuery 3가지 호출방법 (0) | 2022.10.22 |
|---|---|
| 자바스크립트 객체 생성 3가지 방법 (0) | 2022.10.20 |
| Javascript Selector (0) | 2022.05.19 |
| 자바스크립트 심볼, 클래스, 프로미스 (0) | 2022.05.19 |
| 클로저 (0) | 2022.05.19 |
| 자바스크립트 객체 생성 3가지 방법 (0) | 2022.10.20 |
|---|---|
| 자바스크립트 배열 생성 방법 (0) | 2022.10.20 |
| 자바스크립트 심볼, 클래스, 프로미스 (0) | 2022.05.19 |
| 클로저 (0) | 2022.05.19 |
| ajax, Javascript 조건문 (0) | 2022.05.19 |
자바스크립트 중급 강좌 #4 - 심볼(Symbol).zip
2.48MB
자바스크립트 중급 강좌 #15 클래스(Class).zip
3.04MB
자바스크립트 중급 강좌 #16 프로미스(Promise).zip
6.08MB
| 자바스크립트 배열 생성 방법 (0) | 2022.10.20 |
|---|---|
| Javascript Selector (0) | 2022.05.19 |
| 클로저 (0) | 2022.05.19 |
| ajax, Javascript 조건문 (0) | 2022.05.19 |
| Javascript 배열 (0) | 2022.05.19 |
function makeAdder(x) {
return function(y){
return x + y;
}
}
const add1 = makeAdder(3);
console.log(add1(2));
const add2 = makeAdder(5);
console.log(add2(7));
console.log(add1(4));
function makeCounter() {
let num = 0; // 은닉화
return function () {
return num++;
};
}
let counter = makeCounter();
console.log(counter());
console.log(counter());
console.log(counter());
| Javascript Selector (0) | 2022.05.19 |
|---|---|
| 자바스크립트 심볼, 클래스, 프로미스 (0) | 2022.05.19 |
| ajax, Javascript 조건문 (0) | 2022.05.19 |
| Javascript 배열 (0) | 2022.05.19 |
| Javascript 변수와 연산자 (0) | 2022.05.19 |
| 자바스크립트 심볼, 클래스, 프로미스 (0) | 2022.05.19 |
|---|---|
| 클로저 (0) | 2022.05.19 |
| Javascript 배열 (0) | 2022.05.19 |
| Javascript 변수와 연산자 (0) | 2022.05.19 |
| 자바스크립트 함수 (0) | 2022.05.19 |
2차시 Javascript 배열.txt
0.00MB
Javascript 반복문.txt
0.00MB
jQuery 소개.txt
0.00MB
2차시 Javascript 배열.zip
3.19MB
배열 생성 예제
var student_name=["홍길동","성춘향", "이몽룡"];
다양한 데이터 형태의 값을 함께 저장 가능
var student=["Gildong", "21900001", "이몽룡"];
var students=['이xx','박xx','최xx','김xx'];
students[0]
students[1]
var students=['이xx','박xx','최xx','김xx'];
students[0]='홍길동'
console.log(students)
students.length
*배열의 맨 마지막에 항목 추가(push)
- 새로 등록한 수강생 추가하기
- {배열이름}.push({값})
var students=['홍길동','박xx','최xx','김xx'];
students.push('김아무개')
*i번째 수강생 삭제
{배열이름}.splice(i,1)
{배열이름}.splice(순서,개수)
var students=['홍길동','박xx','최xx','김xx','김아무개'];
students.splice(2, 1)
*이름이 "이xx"인 학생의 인덱스(번호) 찾기
{배열이름}.indexOf({값})
var students=['홍길동','최xx','박xx','김xx','이xx', '김아무개'];
var index = students.indexOf('이xx')
console.log(index)
----------------------------------------------------------------------------------------------------------
네비게이션 만들기
- 이동한 기록 저장하기
- {배열이름}.push({값}) 이용
var navigation = []
navigation.push('직진 200M')
navigation.push('우회전')
navigation.push('직진 50M')
- 이동한 기록 거꾸로 재생하기
- 배열 마지막 요소를 꺼내려면 {배열이름}.pop() 이용
navigation.pop()
navigation.pop()
navigation.pop()
----------------------------------------------------------------------------------------------------------
복불복 게임 만들기
- 목록 중 임의의 요소 선택하기
- Math.random() 을 이용하면 0에서 0.99... 의 값을 얻을 수 있음
- Math.random()*10은 0에서 9.99...
- Math.floor({값})을 이용해 값의 소수 부분을 제거
var students=['홍길동','최xx','박xx','김xx','이xx', '김아무개'];
students[Math.floor(Math.random()*students.length)]
----------------------------------------------------------------------------------------------------------
HTML 문서에 자바스크립트 코드 포함
- HTML의 <script> 태그 사용
- <script>...</script> 안에 자바스크립트 코드 포함
- 포함된 코드는 문서가 열릴 때 실행됨
HTML 태그 선택
- 자바스크립트로 HTML요소를 조작하려면 조작할 요소를 선택해야 함
- 자바스크립트 변수에 HTML 요소 저장
- HTML태그의 id, class, 태그이름 등으로 요소를 찾을 수 있음
HTML 태그 선택
document.getElementById({id})
document.getElementsByTagName({태그명})
document.getElementsByClassName({class})
| 클로저 (0) | 2022.05.19 |
|---|---|
| ajax, Javascript 조건문 (0) | 2022.05.19 |
| Javascript 변수와 연산자 (0) | 2022.05.19 |
| 자바스크립트 함수 (0) | 2022.05.19 |
| 자바스크립트 조건문 (0) | 2022.05.19 |
|
