728x90
목차
014
onclick
- 클릭 이벤트 태그이다.
- 해당 태그를 클릭했을 때 일어나는 이벤트이다.
<button onclick="btnFn()">글자 입력!</button>
<!--button 태그에 btnFn 함수를 클릭이벤트로 전달해서 클릭할 때마다 함수가 실행된다.-->
생성자 함수
- 객체를 함수로 만들 때 많이 사용한다.
- 객체를 생성할 때 사용하는 함수
- 문법
function createObj(_name, _atk, _def, _speed){ // createObj가 생성자 함수다.
this.name = _name;
this.dtk = _atk;
this.def = _def;
this.speed = _speed;
}- 생성자 함수를 가지고 객체를 생성하는 방법
- new 키워드 사용.
- 동적할당이 가능하게 한다.
- 새로운 객체를 생성하기 위한 메모리 공간을 동적으로 사용할 수 있도록 할당해준다.
- new 키워드 사용 시 빈 객체를 만들어주고 생성자 함수를 실행시켜서 this가 빈 객체를 참조한다.
- 키 값을 추가해주고 객체를 만들어준다.
- new 키워드 사용.
let temp = {
name: "이름";
age: "나이";
}
// 한 사람을 temp라는 객체로 만들어 놓고 해당 사람의 정보를 키와 값으로 만들어서 하나의 오브젝트화 시킨다. (물건도 마찬가지)
let obj = new createObj("고블린", 100, 100, 10);
console.log(obj);
//결과: createObj > def: 100, dtk: 100, name: "고블린", speed: 10
let obj2 = new createObj("트롤", 200, 100, 10);
console.log(obj2);
//결과: createObj > def: 100, dtk: 200, name: "트롤", speed: 10
//객체를 편하게 동적으로 할당할 수 있다.
//접근 방법
obj.name // obj객체의 name값인 고블린이 출력된다.- 객체의 값에 접근하는 방법
let obj_name = "고블린";
let obj_atk = 100;
//obj._name: 객체의 값에 접근하는 방법
console.log(obj.name); //값: 고블린
//obj["name"] : 객체의 값에 접근하는 방법
console.log(obj["name"]); //값: 고블린
for ~ in 반복문
- 자동완성 했을 때 object라고 적혀있는 변수에 우리가 보고싶은 객체를 넣어준다.
- 객체의 속성들을 반복하여 작업을 수행할 수 있다.
- 모든 객체에서 사용이 가능하다.
const obj = {
name: 'curryyou',
job: 'engineer'
}
for (const key in obj){
console.log(`${key} : ${obj[key]}`);
// name : curryyou
// job : engineer
}
console.log(key); //key: 객체안에 있는 키값이 key 변수에 순서대로 담겨 콘솔로 노출된다.
console.log(obj); //obj: 객체가 키 값의 수 만큼 노출된다.
BOM, DOM
DOM(Document Object Model)
- 문서 객체 모델
- 문서를 객체의 모양으로 만든 것
- 문서의 접근을 가능하게 해준다.
- 페이지에 있는 태그들을 객체로 표현한 것이다.
- 문서에 대한 모든 내용을 담고있는 객체. 도큐먼트에 관련 된 내용 모두를 객체화하여 관리 가능하다.
- 자바스크립트로 객체화된 모델을 이용하여 동적 HTML을 제어할 수 있다.
- elementds에 대한 접근을 통해 HTML의 내용을 변경할 수 있다.
- CSS(style)의 내용을 변경할 수 있다.
- 문서 즉 열려진 페이지에 대한 정보를 따로 객체화 시켜서 관리한다.
document
- 객체에서 태그를 선택하는 방법이다. 객체를 이용해서 찾고싶은 태그를 자바스크립트로 가져와서 사용할 수 있다.
BOM(Brouser Object Model)
- 브라우저 객체
- 브라우저의 기능들을 객체로 사용할 수 있게 해준 것이다.
- 브라우저에 대한 모든 내용을 담고있는 객체. 브라우저에 관련 된 내용 모두
- 뒤로가기, 북마크, 즐겨찾기, 히스토리, URL정보 등..
- 브라우저가 가지고 있는 정보를 따로 객체화 시켜서 관리함
onload 메소드
- 브라우저의 랜딩이 끝나고 보여줄 준비가 되었을 때 실행되는 함수
- 문서 랜더링을 끝내고 실행되는 함수이다.
태그 선택자
ID
getElementById
- 메소드로 태그의 아이디를 찾아서 태그를 가져올 수 있다.
- 아이디 값이 있는 태그는 그냥 변수처럼 사용해도 된다.
let div2 = document.getElementById("div1");
//HTML에서 div1이라는 ID값을 가진 태그를 접근하거나 조작할 수 있다.
let div3 = div1;
//아이디 값이 있는 태그는 그냥 변수처럼 사용해도 된다.querySelector
- 만능이다. 이 선택자만 사용할 정도이다.
- 선택자를 받아서 선택자와 일치하는 첫 번째 엘리먼트 요소를 반환한다. 일치하는 요소만을 반환할 수 있으므로, 일치하는 요소가 없을 경우 null값을 반환한다.
let div4 = document.querySelector('#div1')
//아이디(#) div1을 찾아줘| 구분 | getElementById | querySelector |
| 차이점 | 기호(#)없이 아이디명 입력 | css 선택자를 입력한다. |
| id가 명시되어 있는 요소에서만 사용이 가능하다. | ||
| 공통점 | 요소를 찾아서 반환해준다. 반환된 요소는 dom 본 객체이다. 따라서 조작할 수 있는 대상이다. |
|
CLASS
querySelector
- id는 지정되는 이름이 중복될 수 없으므로 변수처럼 사용할 수 있지만, class의 경우에는 중복으로 선언이 가능하므로 변수처럼 사용이 불가하다.
- 문서를 읽다가 첫 번째로 발견한 태그 하나만을 가져온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="class_div">나는 div 1번!</div>
<div class="class_div">나는 div 2번!</div>
<div class="class_div">나는 div 3번!</div>
<div class="class_div">나는 div 4번!</div>
</body>
<script>
let div = document.querySelector('.class_div');
console.log(div);
//결과: <div class="class_div">나는 div 1번!</div>
</script>
</html>
querySelectorAll
- 해당하는 전채 태그들을 가져온다.
- 배열의 형태로도 가져올 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="class_div">나는 div 1번!</div>
<div class="class_div">나는 div 2번!</div>
<div class="class_div">나는 div 3번!</div>
<div class="class_div">나는 div 4번!</div>
</body>
<script>
let div = document.querySelectorAll('.class_div');
console.log(div);
/*결과
NodeList(4)
0: div.class_div
1: div.class_div
2: div.class_div
3: div.class_div
length: 4
[[prototype]]: NodeList
*/
console.log(div[2]);
//결과: <div class="class_div">나는 div 3번!</div>
</script>
</html>innerHTML
JS에서 태그에 텍스트 넣기
- querySelector로 가져온 도큐먼트 오브젝트의 내용이나 내부 HTML코드를 자바스크립트에서 변경할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1"></div>
<div id="div1"></div>
<div class="class_div"></div>
<div class="class_div"></div>
<div class="class_div"></div>
<div class="class_div"></div>
</body>
<script>
div1.innerHTML = "<div>나는 div태그야</div>";
div1.innerHTML = "<ul><li>나는 ul 태그임</li></ul>";
console.log(div1.innerHTML);
// 브라우저에서 읽어서 해석하기 때문에 div, ul 등이 해석된다.
let div2 = document.querySelector('.class_div');
div2.innerHTML = "나는 class_div를 가진 첫 번째 태그야";
//결과: HTML의 class_div의 첫 번째 영역에서 해당 텍스트 노출
let div3 = document.querySelectorAll('.class_div');
div3[2].innerHTML = "나는 class_div를 가진 세 번째 태그야";
//결과: HTML의 class_div의 세 번째 영역에서 해당 텍스트 노출
</script>
</html>
++ JS에서 버튼에 기능넣기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="div1"></div>
<div id="div1"></div>
<div class="class_div">1 나는 div 태그</div>
<div class="class_div">2 나는 div 태그</div>
<div class="class_div">3 나는 div 태그</div>
<div class="class_div">4 나는 div 태그</div>
<button onclick="btn()">텍스트 통일</button>
</body>
<script>
function btn(){
//class_div클래스를 가지고 있는 태그들을 div 변수에 담는다.
let div = document.querySelectorAll('.class_div');
//그 배열들을 forEach로 순회하면서 아이템을 매개변수로 받는다.
div.forEach(function(i){
i.innerHTML = "이 문자로 통일! 버튼눌렀지?";
});
}
</script>
</html>1 나는 div 태그
2 나는 div 태그
3 나는 div 태그
4 나는 div 태그
👩🏫총괄예시_input으로 정보 입력받아 리스트 제작
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>세번째</title>
<link rel="stylesheet" href="./index3.css">
</head>
<style>
.buttondiv{
border: 1px solid black;
width: 100px;
height: 50px;
background-color: antiquewhite;
border-radius: 12px;
box-shadow: 1px 1px 1px black;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
</style>
<body>
<label for="">이름</label>
<input type="text">
<label for="">나이</label>
<input type="text">
<label for="">내용</label>
<input type="text">
<ul id="talbles">
<li></li>
</ul>
<div class="buttondiv" onclick="divBtn()">버튼</div>
</body>
<script>
//생성자 함수 생성
let objArr = [];
function create(name, age, content){ //객체를 만들 수 있다.
this.name = name;
this.age = age;
this.content = content;
}
function divBtn(){ // 버튼 누르면 실행시킬 기능
console.log("나 눌렸어");
addArr();
//화면을 업데이트 하기 위해 만든 함수
dro();
}
function addArr(){ //객체를 배열에 추가하는 기능
//new 키워드로 빈 객체를 만들고 함수에서 this로 그 객체를 참조해서
//name 키에는 값을 매개변수로 "이름"을
//age 키에는 값을 매개변수로 10을
//content 키에는 값을 매개변수로 "나 컨텐츠"를 전달해서 빈 객체에 키 값을 추가해준다.
//obj라는 변수에 만들어진 객체를 넣어준다.
//input 태그명을 querySelectorAll 메소드 매개변수로 전달해서
//input 태그들을 배열로 가져와서 inputs 변수에 담아놓고
let inputs = document.querySelectorAll("input");
console.log(inputs);
//input 태그는 value라는 키 값이 있다.
//input에 입력한 값이 value키에 값으로 담긴다.
console.log(inputs[0].value);
console.log(inputs[1].value);
console.log(inputs[2].value);
let obj = new create(inputs[0].value, inputs[1].value, inputs[2].value);
objArr.push(obj);
console.log(objArr);
//객체와 배열은 래퍼런스 타입이기 때문에 값이 아니라 키 값의 주소를 들고 있다.
//일반변수(원시타입)는 값을 가리키는 주소를 가리키지만 obj의 경우는 값을
//주소를 들고 있는 개념. 주소를 console에 찍기 때문에 주소를 바라보면 마지막으로 변한 값을 확인 할 수 있다.
//주소는 값을 가리키는 친구.
}
//무언가를 그려주는 함수
function dro(){
let text = ""; // 렌더링 하기 전에 문자열 초기화
objArr.forEach(function(i){
// +=: 원래 있는 값에 추가를 시켜준다. 값을 덧붙인다.
// 예. +=2 / 원래 있는 값에 2씩 증가
text += `<li>이름: ${i.name} 나이: ${i.age} 내용: ${i.content}</li>`
});
console.log(text);
//text 지역변수는 여기서 사용하고 끝
document.querySelector('#talbles').innerHTML = text;
}
</script>
</html>
728x90
