1. Object (객체)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object(객체)</title>
</head>
<body>
<script>
/*
* 객체 *
객체 지향 프로그래밍에서 데이터(속성) &
데이터에 관련되는 동작(절차, 기능)을 모두 포함한 개념
* 객체의 구조 *
{key:value, key:value, ...}
key: 객체의 property(속성) - 문자열로 표현
value: key의 값(기본자료형, 배열, 함수, 객체타입 데이터)
(1) 내장 객체
-> 자바스크립트 엔진에 내장된 객체
-> 날짜, 문자, 배열, 수학
*/
// ex) 연도를 가져오는 객체
const moonLanding = new Date();
console.log(moonLanding.getFullYear());
/*
(2) 브라우저 객체 (BOM, browser object model)
-> 브라우저에에 내장된 객체
-> alert(), console.log(), ...
-> window(): 브라우저 객체 중 최상위 객체, 브라우저에 관련된 기능
-> window.open("http://www.naver.com", "네이버 받아라", "width=500px; height=500px")
(+) 문서객체모델
-> 웹문서를 제어할 수 있는 객체
(3) 사용자 정의 객체
-> 사용자가 직접 만든 객체
-> 자바스크립트 엔진이 구동되는 시점에 생성
*/
// ex) 사용자 정의 객체
let person = {
"name" : "dain",
"Age" : 50,
"gender" : "female",
"info" : function() {
console.log(this);
}
}
// person 객체를 출력하는 함수 실행하기
console.log(person.name);
person.info();
console.log(person);
</script>
</body>
</html>
2. DOM (Document Object Model)
2-1. DOM(문서객체모델)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM(문서객체모델)</title>
</head>
<body>
<h1 id="tit">문서객체모델(DOM)</h1>
<ul>
<li class="items">HTML</li>
<li class="items">CSS</li>
<li class="items">JS</li>
</ul>
<script>
/*
DOM(문서객체 모델): html 태그를 자바스크립트에서 사용할 수 있도록 객체로 변환
* HTML 문서에 접근하는 방법 *
document: 현재 HTML 문서에
.: 접근해서
getElement: 요소를 가져올거야
ByID: "tit"라는 id 값을 가진
*/
let title = document.querySelector("tit");
let anotherTitle = document.getElementById("tit");
console.log(title);
console.log(anotherTitle);
/*
document: 현재 HTML 문서에
.: 접근해서
getElements: 요소들을 가져올거야
ByClassName: "itmes"라는 class 값을 가진 */
let items = document.getElementsByClassName("item");
console.log(items);
</script>
</body>
</html>
2-2. innerHTML vs textContent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM innerHTML and textContent</title>
</head>
<body>
<p id="msg">오늘은 문서객체모델에 대해서 배워보았다</p>
<script>
let msg = document.getElementById("msg");
// 태그 + 내용 까지 콘솔에 통째로 찍힘
console.log(msg);
// html 태그와 같이 내용을 적용할 때: innerHTML
// 텍스트 내용만 적용할 때: textContent
// p태그의 전체 내용 접근
// 태그 안쪽 텍스트만 찍힘
console.log(msg.innerHTML);
// p태그의 전체내용 변경
// 태그 안쪽 글씨가 바뀜
msg.innerHTML = "내용 바뀐거 봐라~ㅋㅋㅋ 신기하지?"
console.log(msg.innerHTML);
// p태그 안쪽 내용에 태그 하나 추가
msg.innerHTML += "<span> 이런것도 가능~</span>"
// p태그의 텍스트 값 접근
console.log(msg.innerHTML);
// p태그의 텍스트 값 변경
msg.textContent = "텍스트 바뀌는거 룩앳미"
msg.textContent = "<span> + 와우! 텍스트 바뀐당 >_< + </span>";
</script>
</body>
</html>
2-3. querySelector vs getElementByID
요즘에는 어차피 다 라이브러리 쓰지만
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dom querySelector and getElementByID</title>
</head>
<body>
<h1 id="bb">DOM 활용해보기</h1>
<button id="btn-h1">h1태그 내용 변경</button>
<button id="btn-a">a 태그 생성</button>
<button id="btn-ul">ul태그 생성</button>
<div id="area"></div>
<script>
// 1. h1 내용변경 버큰을 클릭하면 기존 h1 태그의 내용이 "내용 잘 바뀌었다!" 로 바뀌게 하지
// 2. a태그생성 버튼을 클릭하면 div에 [google.com]로 이동하는 a태그 생성
// 3. ul태그생성 버튼을 클릭하면 div에 html, css, javascript를 담는 ul 리스트를 생성
let btn1 = document.querySelector("#btn-h1");
btn1.addEventListener("click", function(){
document.querySelector("h1").textContent = "내용 잘 바뀌었다!"
});
let btn2 = document.querySelector("#btn-a");
btn2.addEventListener("click", function(){
document.getElementById("area").innerHTML += "<a href=https://google.com>구글</a>"
});
let btn3 = document.querySelector("#btn-ul");
btn3.addEventListener("click", function(){
document.getElementById("area").innerHTML +=
`<ul>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>`
});
// * getElementByID vs querySelector *
// 지원되는 선택자:
// getElementByID: 오직 id 선택자만 지원한다.
// querySelector: id, class, tag 등 다양한 CSS 선택자를 지원한다.
// 결론:
// 만약 id로 요소를 찾고자 한다면 getElementByID를 사용하는 것이 좋다.
// 여러 선택자를 사용하여 더 유연하게 요소를 찾고 싶다면, querySelector을 사용하는것이 좋다.
</script>
</body>
</html>
2-4. addEventListener
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM addEventListener</title>
</head>
<body>
<input type="text" id="user-input">
<button id="btn">난버튼이지롱</button>
<script>
let userinput = document.getElementById("user-input");
let btn = document.getElementById("btn");
// 요소에 이벤트 적용하는법
// (이벤트: 사용자가 브라우저에 동작하는 행위 -- 클릭, 스크롤, 마우스오버, 키보드 입력 등)
// 이벤트 핸들러(콜백함수): 이벤트가 발생했을 때 처리할 함수
btn.addEventListener("click", function(){
// alert("클릭 이벤트 발생")
// 유저가 입력한 값을 console 창에 입력하는
// input.select.textArea의 값에 접근할 때: value
console.log(userinput.value);
})
</script>
</body>
</html>
2-5. 예제1_counting
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM counting</title>
</head>
<body>
<p id="num">0</p>
<button id="btn-plus">증가</button>
<button id="btn-minus">감소</button>
<script>
let num = document.getElementById("num");
let plus = document.querySelector("#btn-plus");
let minus = document.querySelector("#btn-minus")
plus.addEventListener("click", function(){
let i = Number(num.textContent)
i += 1;
num.textContent = i;
});
minus.addEventListener("click", function(){
let i = Number(num.textContent)
i -= 1;
if (i <= 0) {
i = 0;
};
num.textContent = i;
});
</script>
</body>
</html>
2-6. 예제2_반복문
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dom repeat</title>
</head>
<body>
<input type="text" id="user-input">
<button id="btn-plus">출력</button><br>
<div id="result"></div>
<script>
document.querySelector("#btn-plus").addEventListener("click", function(){
document.querySelector("#result").innerHTML += "<p>" + document.querySelector("#user-input").value+"</p>"
});
</script>
</body>
</html>
2-7. 예제3_keyboardEvent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM keyboardEvent</title>
<style>
/* 스타일링된 박스 */
#box {
width: 50px;
height: 50px;
background-color: rgb(255, 14, 14);
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<!-- 움직이는 박스 -->
<div id="box"></div>
<script>
// 키 입력 이벤트 리스너 추가
document.addEventListener("keydown", function(event) {
let box = document.getElementById("box"); // 박스 요소 가져오기
let step = 10; // 이동 거리 지정
let top = parseInt(window.getComputedStyle(box).top); // 현재 top 값 가져오기
let left = parseInt(window.getComputedStyle(box).left); // 현재 left 값 가져오기
// 키 입력에 따라 박스 이동
switch (event.key) {
case "w": // 위로 이동
box.style.top = top - step + "px";
break;
case "s": // 아래로 이동
box.style.top = top + step + "px";
break;
case "a": // 왼쪽으로 이동
box.style.left = left - step + "px";
break;
case "d": // 오른쪽으로 이동
box.style.left = left + step + "px";
break;
}
});
</script>
</body>
</html>
3. function (함수)
3-1. 함수를 선언하는 세 가지 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>function</title>
</head>
<body>
<script>
/*
함수: 특별한 목적의 작업을 수행하기 위해 독립적으로 설계된 블럭
- 내가 편하게 사용하기 위해 만드는 ㄱ니ㅡㅇ
- 함수를 정의할 때는 input(입력, 매개변수), output(출력, 반환데이터)
함수를 선언하는 세 가지 방식
- 함수선언문
- 함수표현식
- 화살표함수
*/
// (1) 함수선언문
// - 함수 선언문으로 정의한 후 함수 호출 시 어디에서든 호출이 가능하다
// ★ 함수 호이스팅 ★
// - 함수 선언문이 자바스크립트 엔진에 의해서 먼저 실행되는 방식
// - 원치 않는 실행 결과가 나올 수 있기 때문에 최근 트렌드는 함수표현식(+화살표 함수)를 채택하고 있다.
function greet() {
console.log("함수선언문go");
}
greet();
// (2) 함수표현식
// - 함수를 값으로 취급
const greet2 = function () {
console.log("함수표현식 잘봐");
}
greet2();
// (3) 화살표함수
let greet3 = (name) => {
console.log("화살표 함수 이게 찐!");
return(console.log(name));
}
greet3("다인");
// return이 있을 때, 실행문이 한 문장일 경우에는 return과 {} 생략 가능
let greet4 = (name) => ("안녕하세요?" + name);
console.log(greet4("다인"));
</script>
</body>
</html>
3-2. 예제1_plus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>function plus</title>
</head>
<body>
<div id="result">결과확인</div>
<script>
let num1 = Number(prompt("첫 번째 정수 입력"));
let num2 = Number(prompt("두 번째 정수 입력"));
const add = function(num1, num2) {
console.log(num1 + num2);
return num1 + num2;
}
let addadd = (num1, num2) => {
console.log(num1 + num2);
return num1 + num2;
}
document.querySelector("#result").addEventListener("mouseover", function(){
console.log(add(num1, num2));
alert(add(num1, num2));
})
</script>
</body>
</html>
3-3. 예제2_emoji 별찍기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>function emoji</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<div class="emo">출력되는 이모지: </div>
<div class="num">숫자: </div>
<br>
<script>
/*
문제) 이모지와 숫자를 입력받은 후 피라미드 모양을 출력하는 pyramid()
1. 이모지와 숫자를 입력받는다.
2. 두 입력값을 pyramid() 에 전달한다
3. 전달받은 값을 이용하여 피라미드 모양을 출력한다.
*/
let emoji = prompt("이모지를를 입력하세요.");
let num1 = Number(prompt("숫자를 입력하세요."));
// ex) ★, 5
$(".emo").append(emoji);
$(".num").append(num1);
let pyramid = (emoji, num1) => {
for (let i=0; i<num1; i++) {
for (let j=0; j<=i; j++) {
document.write(emoji);
}
document.write("<br>");
}
}
pyramid(emoji, num1);
</script>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 제이쿼리 (jQuery) 기본선택자에 대해 알아보자! (10) | 2025.02.07 |
|---|---|
| [JavaScript] jQuery를 사용할 때 유의해야 할 사항들 (8) | 2025.02.05 |
| [JavaScript] 자바스크립트 백틱(``), 달러(${ }) 표현식 (템플릿 리터럴) (32) | 2025.01.04 |
| [JavaScript] JSON 데이터 다룰때 기본적인 JS 사용법(배열, 객체 등) (41) | 2024.12.28 |
| [JavaScript] 서버 통신과 JSON (7) | 2024.12.22 |
