정적 요소의 객체화: $("셀렉터")는 이미<body> 안에 존재하는 요소에 대한 객체화 방식이다.
동적 요소의 객체화: let 객체이름=$("<태그명>")
생성한 요소를 화면에 적용하기
css("속성"): 속성값 읽기
css("속성","값"): 속성값 변경/ 추가
css({"속성1":"값1","속성2":"값2","속성3":"값3"): 속성값 읽기
addClass("클래스명"): 특정요소에게 CSS클래스를 적용할 겅우에 사용
removeClass("클래스명"):HTML 태그 요소에 적용된 특정 CSS클래스를 제거
ToggleClass("클래스명"):
DOM(문서 객체 모델) //트리 구조
트리(계층구조)
노드, 루트, 부모노드, 자식 노드, 형제 노드
id선택자로 접근하는 getElementById()메서드//id 빼고 다 element에 s
요소명.getElementById("id명"): 유일값
요소명.querySeletor("css선택자"(#))
요소명.querySeletorAll(): 원소 여러개
class 값으로 접근하는 getElementsByClassName() 메서드
태그 이름으로 접근하는 getElementsByTagName() 메서드
다양한 방법으로 접근하는 querySelector(),querySeletorAll()
노드.querySeletor(선택자)
노드.querySeletorAll(선택자 또는 태그)
웹 요소의 내용을 수정하는 innerText, innerHTML
요소명.innerText = 내용//설정
요소명.innerHTML=내용
속성을 가져오거나 수정하는 getAttribute(), setAttribute()
getAttribute("속성명")
setAttribute("속성명", "값")
 : 줄바꿈 없는 공백
addEventListener()메서드
요소.addEventListener(이벤트, 함수, 캡처여부);
텍스트 노드를 사용하는 새로운 요소 추가하기
1.요소 노드 만들기-createElement()
document.createElement(노드명)
2.텍스트 노드 만들기 - createTextNode()
document.createTextNode(텍스트);
3.자식 노드 연결하기-appendChild()
부모노드.appendChile(자식노드)
*기본틀
parentNode 프로퍼티
노드.parentNode
removeChild()
부모노드,removeChild(자식노드)
jQuery는 빠르고 작고 기능이 풍부한 JavaScript라이브러리
jQuery 라이브러리는 .js 확장자로 작성
| jQuery 동적으로 요소 생성하기 (0) | 2023.06.12 |
|---|---|
| 객체 (0) | 2023.06.02 |
| 객체 (0) | 2023.05.31 |
| 함수, 이벤트 (0) | 2023.05.30 |
| Js변수 (0) | 2023.05.26 |
객체: 객체에 포함된 데이터 하나를 가리켜 객체의 프로퍼티라고 부른다.
자바스크립트는 prototype 기반 언어이다.
객체를 원형(prototype) 형재로 생성, 그 안에 기능을 위한 함수나 변수를 추가
prototype 기반 언어에서의 객체 생성 과정
| 빈 객체의 생성 | 아무런 기능이 없는 상태의 빈 객체를 생성 |
| 변수(필드)의 추가 | 빈 객체 안에 변수들을 추가해 넣는다. |
| 함수(메서드)의 추가 | 빈 객체 안에 함수들을 추가해 놓는다. |
JSON(Javascript Object Notation): 텍스트-기반의 경량의 데이터교환형식, 구분형식은 Javascript를 따르지만 언어로부터 완전히 독립적이기 때문에 서로 다른 프로그래밍 언어 간에 데이터 교환하기 위해 현재 가장 널리 사용되는 표기법
자바스크립트에서는 JSON이 두가지 측면으로 사용
자바스크립트의 문법으로 사용
json 자체가 하나의 데이터로서 사용
json의 특징
javascript를 기반으로 만들어졌으며 특정 언어에 종속되지 않는 완벽한 독립적인 텍스트 형식을 가지고 있다.
json 객체의 데이터는 이름(key)/값(value)의 쌍으로 구성{ }
기본형식: let 객체명 = {이름: 값, 이름: 값, 이름:값 };
(with 키워드) 객체명을 with로 선언하고 코드를 줄여준다.
let view = "";
with(info){
view+="이름:"+name;
...
}
json에 배열 데이터 할당하기
let 객체명 = {이름:값, 이름:["값1", "값2", "값n"], 이름: 값};
할당된 데이터에 접근하기 위해서는 "객체명.이름[인덱스]"로 접근
json을 포함하는 json
let 객체명 = {
하위객체명:{이름:값, 이름:값},
하위객체명:{이름:값, 이름:값},
하위객체명:{이름:값, 이름:값}
};
json 데이터의 하위 제이터로 접근하고자 할 경우는 .을 통하여 계층을 표현한다.//반복 불가능
객체명.하위객체명.값의이름
json을 포함하는 배열//반복가능
let 객체명 = [
하위 객체명 : [
{이름: 값, 이름:값},
{이름: 값, 이름:값},
{이름: 값, 이름:값}
]
};
json 데이터의 하위 데이터로 접근하고자 할 경우는.을 통하여 계층을 표현한다.
객체명.하위객체명[index].값의이름
json을 포함하는 배열
parse() : String 객체를 JSON으로 변환해 준다.
stringify() : JSON 객체를 String으로 변환해 준다.
| jQuery 동적으로 요소 생성하기 (0) | 2023.06.12 |
|---|---|
| DOM (0) | 2023.06.05 |
| 객체 (0) | 2023.05.31 |
| 함수, 이벤트 (0) | 2023.05.30 |
| Js변수 (0) | 2023.05.26 |
Date 객체: 자바스크립트에서 날짜와 시간을 다루는데 사용되는 객체
컴퓨터의 시간과 날짜를 알아낼 수 있고, 특정 날짜 정보를 저장해 놓을 수도 있다.
let 객체명 = new Date();
let 객체명 = new Date(년, 월-1, 일);
getFullYear(), getMonth(), getTime()(날짜간격), getDay(),...
브라우저와 관련된 객체: 웹 브라우저와 관련된 모든 객체들의 집합
window, document, navigator, history, location, screen
브라우저의 창 제어 기능
toolbar, location, status, menubar, scrollbars, resizable, width, height
window.close(): 창 닫기
document 객체: HTML 문서의 구조나 내용을 제어하기 위한 기본 기능을 갖고 있다.
함수
매개변수와 인수, return문
익명함수, 즉시 실행 함수, 화살표 함수
이벤트: 동작, 행위>>브라우저에서의 동작, 행위: click, keydown, keyup, mouseover, drag, submit, change,...
이벤트 리스너: 이벤트가 발생하는 것을 대기하고 있다가 이벤트가 발생하는 것이 감지되면 연결된 기능(함수) 수행
이벤트 핸들러(이벤트 처리기): 이벤트가 발생했을 때 처리하는 함수
이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결
<태그 on이벤트명 = "함수명">
인라인 이벤트 모델: 요소 내부에 이벤트를 작성
window.onload
내장 객체의 제공: 모든 웹 브라구저 개발사들이 공통 기능의 필요성을 인지하고, 사정네 객체명과 함수(메서드)들을 통일하여 구현한 뒤, 브라두저 안에 내장시켜 놓았다.
브라우저를 제어하기 위한 내장 객체(BOM)
window, location,history, navigator, screen
HTML 요소를 제어하기 위한 내장 객체
document, image, form
변수 선언 위치에 따른 구분
Java
자바 변수 선언을 기준으로
public class Srudent{
//필드(멤버 변수)
private String name; //인스턴스 변수
public static String schoolName;//클래스 변수, static 변수
//메소드
public setName(String name /*메소드 매개변수*/){
this.name=name;
int num=10; //메소드 지역 변수
if(){
int a = 20;// if 지역변수
}
}
}
변수 선언하기: var 뒤에 변수 이름 작성, var을 한번만 쓰고 뒤에 여러개의 변수를 한꺼번에 선언할 수도 있음
스코프: 변수가 적용되는 범위, 스코프에 따라 지역변수(로컬변수)와 전역변수(글로벌 변수)
Javascript
자바스크립트 변수 선언을 기준으로
var num1; //전역변수(선언된 후 같은 문서 내 어디서든 사용가능)
num2; //전역변수(변수명 앞에 아무런 키워드가 없으면 전역변수가 된다.)
function test(){
var num3; //function 지역변수
num4; //전역변수(변수명 앞에 아무런 키워드가 없으면 전역변수가 된다.)
if(조건식){
var num5; //function 지역변수
num6; //전역변수(변수명 앞에 아무런 키워드가 없으면 전역변수가 된다.)
}
}
호이스팅: 변수를 뒤에서 선언하지만, 마치 앞에서 선언한 것처럼 인식함, 함수 실행문을 앞에 두고 선언 부분을 뒤에 두더라도 앞으로 끌어올려 인식함.
재선언과 재할당이 가능하다.
재선언: 이미 선언한 변수를 다시 선언할 수 있음
재할당: 같은 변수에 다른 값을 할당할 수 있음
->재선언과 재할당이 가능하면 실수로 변수를 잘못 조작할 확률이 높아짐.
let을 사용한 변수의 특징
const를 사용한 변수의 특징
자바스크립트 변수, 이렇게 사용하자
변수 선언 방식
var: 변수, 변수명 중복 O(덮어쓰기), 함수 레벨 scope, 재선언과 재할당이 가능.
let: 변수, 변수명 중복 X, 블록{} 레벨scope, 재할당을 가능하나 재선언은 불가능
const: 상수, 변수명 중복X, 블록{} 레벨 scope
1순위: const(Js는 특정 요소를 선택해서 사용하는 경우가 많아서 변수에 고정시케둠)
2순위: let
3순위: var (ES6 이후부터 사용 빈도가 많이 적어짐)
| 기본 | 숫자형 | 따옴표 없이 숫자로만 표기합니다 | |
| 문자열 | 작은따옴표나 큰따옴표 묶어서, 숫자를 따옴표로 묶으면 문자로 인식 | ||
| 논리형 | 참과 거짓이라는 2가지 값만 있는 유형, true false는 소문자 | ||
| 복합 | 배열 | 하나의 변수에 여러개의 값 저장 | |
| 객체 | 함수와 속성을 함께 포함 | var date() = new Date | |
| 특수 | undefined | 자료향이 지정되지 않았을 때의 상태 예를 들어 변수 선언만 하고 값을 할당하지 않은 변수 | |
| null | 값이 유효하지 않음 |
typeof: 콘솔에 입력하면 자료형을 알려줌
배열: 하나의 변수에 여러 값을 저장할 수 있는 복합 유형
배열명["값1", "값2",..]
배열명[ ]: 빈 배열 선언
자바스크립트 기능표현 함수 단위.
function 함수명([매개변수1, 매개변수2,...]){
명령
}
실행: 함수명() or 함수명(변수)
익명함수(함수 표현식)
function(매개변수){ // 함수 선언 ①
// 함수 정의
}
const 변수 = function(매개변수){ // 함수 선언 ②
// 함수 정의
}
즉시실행함수
(function(매개변수){
// 함수 정의
})();
(function(매개변수){
// 함수 정의
}());
- 익명 함수의 한 종류로써
함수가 정의 되자마자 바로 실행되는 함수
*** 즉시 실행 함수 사용 이유
1) 함수 선언, 정의, 호출의 일련의 과정을 수행하지 않아도 바로 실행된다.
-> 호출부가 없으므로 일반적인 함수보다 속도적 우위를 가지고 있음.
2) 사용하려는 변수명이 전역변수로 사용되어지고 있는 경우
즉시 실행 함수를 이용하여 내부의 지역 변수로 작성하여
변수명 충돌 문제를 해결할 수 있다.
화살표 함수
익명 함수의 표현식을 간단히(간결하게) 표현한 표기법
작성법 1. 기본 형태 ([매개변수]) => { 함수 정의 }
익명 함수 : function(){ }
화살표 함수 : () => { }
익명 함수 : function(num){ return num * 2; }
화살표 함수 : (num) => { return num * 2; }
작성법 2. 매개변수가 "하나"인 경우 () 생략 가능
익명 함수 : function(e){
e.target.style.backgroundColor = "yellow";
}
화살표 함수 : e => {
e.target.style.backgroundColor = "yellow";
}
작성법 3. 매개변수가 없을 경우 "무조건" () 작성
작성법 4. 함수 정의 부분이 return [식 또는 값] 으로만 작성되어 있는 경우
4-1. {}, return 생략 가능
4-2. return되는 값이 객체(object)인 경우 {}, return 생략 불가능
자바스크립트
작성방법
src가 있는 스크립터는 내용X
데이터를 입력받는 구문(변수저장)
confirm: 질문에 대한 예/아니오 결과를 얻고자 할 때 사용하는 대화 상자 출력 함수
prompt: 텍스트를 작성할 수 있는 대화상자. 확인: 입력한 값 반환(문자열)
취소: null 반환
설정: text요소.value = 값;
접근: let 변수 = text 요소.value;
| 함수, 이벤트 (0) | 2023.05.30 |
|---|---|
| Js변수 (0) | 2023.05.26 |
| CSS고급 선택자 (0) | 2023.05.24 |
| CSS,박스 모델 (0) | 2023.05.23 |
| p.233,234,235 예제 (0) | 2023.05.22 |
background-repeat: 브라우저 화면에 가득 찰때 까지 가로와 세로로 반복하는 것이 기본값. no-repeat을 자주 씀.
background-position: 배경 이미지의 위치를 조절
[background-position: <수평 위치> <수직 위치> ;]
background: tor url(() no-repeat center bottom fixed;
속성값이 다르므로 입력 순서는 상관 없습니다.
선택자: 스타일 시트를 적용할 대상.
전체 선택자: *.와일드 선택자라고도 하며 모든 HTML태그 선택
아이디와 클래스의 차이: 아이디는 한번만, 클래스는 복수 요소에 적용.
연결 선택자: 선택자와 선택자를 연결해 적용 대상을 제한하는 선택자(컴비네이션 선택자, 조합 선택자)
하위 선택자:
[상위요소 하위요소] //이것때문에 띄어쓰기 함부러 하면 안됨.
section p{...(section 요소 안의 모든 p 요소에 적용할 스타일 규칙)}
자식선택자: 하위 선택자와 다르게 자식 요소에만 스타일을 적용하는 선택자
[부모요소>자식요소]
형제 관계: 웹 문서에서 부모 요소가 같을 경우
인접 형제 선택자: 형제 요소 중에서 첫번째 동생 요소만 선택하는 것(상위 요소 기점)
[요소1+요소2]
형제 선택자: 모든 형제 요소 적용
[요소1~요소2]
#table>tr*2>td*3
[속성] 선택자: 지정한 속성을 가진 요소를 찾아 스타일 적용
[원하는 속성]
a[href] //href 속성이 있는 a 요소를 찾는 선택자
[속성=속성값] 선택자: 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일 적용
a[target = _blank]{..} // <a target="_blank">인 요소
a태그 밑줄 없애는 법 text-decoration:none(p.217)
새로운 창: target
[속성~=값] 선택자: 여러 속성 값 중에 해당 값이 포함되어 있는 요소를 찾아 스타일 적용
[class~=button]{..} class값 중에 button이 있는 요소
[속성|=값] 선택자: 특정 속성값이 포함된 속성 요소를 선택
[속성^=값] 선택자: 즉정 속성값으로 시작하는 속성 요소
[속성$=값] 선택자: 특정한 값으로 끝나는 속성의 요소
[속성*=값] 선택자: 값의 일부가 일치하는 속성을 가진 요소를 찾아 스타일 적용
가상 클래스(가상 선택자): 사용자 동작에 반응
구조 가상 클래스: 웹 문서의 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 적용할 때 사용하는 가상 클래스 선택자.
| :only-child | 부모 안에 자식 요소가 하나뿐일 때 자식 요소를 선택 |
| A:only-type-of | 부모 안에 A 요소가 하나뿐일 때 선택 |
| :first-child | 부모 안에 있는 모든 요소중에서 첫번째 자식 요소를 선택 |
| :last-child | 부모 안에 있는 모든 요소중에서 마지막 자식 요소를 선택 |
| A:first-of-type | 부모 안에 있는 A 요소중에서 첫번째 요소를 선택 |
| A:last-of-type | 부모 안에 있는 A 요소중에서 마지막 요소를 선택 |
| :nth-child(n) | 부모 안에 있는 모든 요소중에서 n번째 자식 요소를 선택 |
| :nth-last-child(n) | 부모 안에 있는 모든 요소중에서 끝에서 n번째 자식 요소를 선택 |
| A:nth-of-type(n) | 부모 안에 있는 A 요소중에서 n번째 요소를 선택 |
| A:nth-last-of-type(n) | 부모 안에 있는 A 요소중에서 끝에서 n번째 요소를 선택 |
수식을 사용해 위치 지정 :nth-child(odd) :nth-child(even)
가상요소: 화면 꾸미기용 요소를 웹 문서에 포함시키지 않기 위해 가상요소를 사용
| Js변수 (0) | 2023.05.26 |
|---|---|
| 자바스크립트 (0) | 2023.05.25 |
| CSS,박스 모델 (0) | 2023.05.23 |
| p.233,234,235 예제 (0) | 2023.05.22 |
| p.191, 192 예제 (0) | 2023.05.22 |