자바스크립트 1
1. 프리트랙
1) 문제
① 변수 생성
var a = "bero";
var b = "beri";
document.write(a); // bero
document.write(a); // beri
b = "cream";
document.write(b); // cream② 데이터 타입 - 배열
var hamster = ["bero", "beri", "bebe", "cream"];
document.write(hamster); // ["bero", "beri", "bebe", "cream"]
document.write(hamster[0]); // bero
haster[0]="kim_bero";
document.write(hamster); // ["kim_bero", "beri", "bebe", "cream"]③ 프로퍼티와 메서드 - 문자열
var anna = "love is open door";
document.write(anna.length);
document.write(anna.charAt[6]);
document.write(anna.split(" "));④ 프로퍼티와 메서드 - Math
document.write(Math.abs(-7));
document.write(Math.ceil(0.45));
document.write(Math.floor(8.98));
document.write(Math.random());⑤ 조건문 - else if
var a = 12; var b = 24; var c= 100;
if (a > b) {document.write("a > b")}
else if (b > c) {document.write("b > c")}
else if (a < c){document.write("a < c")}
else if(b < c){document.write("b < c")}
else{document.write("모든 조건을 만족하지 않는다.")}⑥ isPrime: 소수 출력 함수 만들기
function isPrime(n) {
var divisor = 2;
if (n == 1) return false;
while (n > divisor) {
if (n % divisor === 0) {
return false;
} else {
divisor++;
}
}
return true;
}
for (var i = 11; i <= 20; i++) {
document.writeln(i, isPrime(i));
}⑦ reverse: 문자열 거꾸로 출력 함수 만들기
function reverse(str){
var reverStr="";
for(var i = str.length-1;i >= 0;i--){
reverStr=reverStr+str.charAt(i);
}
return reverStr;
}⑧ 반복문으로 구구단 완성하기
for(var n=2;n<10;n++) { // 2단부터 9단까지 출력하는 반복문
for(var i=1;i<10;i++){
document.write(n+" x "+i+" = "+n*i);
}
}2. 자바스크립트 문제
1) 문제 1
① 숫자와 문자열
var a=1;
var b=2;
var str1="1";
var str2="2";
// a+b=3, str1+str2=12
// a+str1=11, b+str2=22② 함수 만들고 호출하기
function add(x, y) {
return x + y;
}③ addStringLength: 문자열 관련 함수 만들기
function addstringLength(a, b) {
var aLength = a.length
var bLength = b.length
return aLength + bLength
};
var a = "ABC";
var b = "DE";
addstringLength(a, b); // ABCDE④ repeatString: 문자열 관련 함수 만들기 2
function repeatString(str,num) {
return str.repeat(num);
};
var a = "bibi";
var b = 10;
module.exports = { inputs: [a, b], func: repeatString }⑤ sortStringArray: 배열 관련 함수 만들기
function sortStringArray(arr1){
return arr1.sort();
}
var a = ["c", "b", "d"];
sortStringArray(a);⑥ reverseStringArray: 배열 관련 함수 만들기 2
function reverseStringArray(arr1){
return (arr1.sort().reverse());
}
var a = ["c", "b", "d"];
reverseStringArray(a);⑦ addMiddleNumbers: 배열 관련 함수 만들기 3
function addMiddleNumbers(arr1){
return arr1[1]+arr1[4]+arr1[6];
}
var a = ["c", "b", "d"];
addMiddleNumbers(a);⑧ makeTotalPrice: 객체 관련 함수 만들기
function makeTotalPrice(a){
var q1 = a.quantity1;
var p1 = a.price1;
var q2 = a.quantity2;
var p2 = a.price2;
return q1*p1+q2*p2;
}
var a = {
quantity1: 4,
price1: 500,
quantity2: 2,
price2: 300
};
makeTotalPrice(a);⑨ makeIntroducingText: 객체 관련 함수 만들기 2
function makeIntroducingText(a){
var name1 = a.firstName
var name2 = a.lastName
var age1 = a.age
return "안녕하세요, 저의 이름은 "+name2+name1+"이고, 나이는 "+age1+"살입니다."
}
var a = {
firstName: "명수",
lastName: "박",
age: 25
};
makeIntroducingText(a);2) 문제 2
① 변수 비교하기
var a=10
var b=10
document.write(a==b)
document.write(a===b)
b="10"
document.write(a==b)
document.write(a===b)② 소수의 합 구하기
var sum = 0;
for (var i = 1; i <= 200; i++) {
for (var j = 2; j <= i; j++) {
if (i % j == 0) {
break;
}
}
if (j == i) {
sum += j;
}
}
document.write("1이상 200이하의 소수의 합 = " + sum);③ getOnlyEvenNumber: 짝수 반환 함수 만들기
function getOnlyEvenNumber(a) {
var evenNumbers = [] // 반환값도 배열
for (let n of a) { // 입력값 하나하나
if (n % 2 === 0) {
evenNumbers.push(n)
}
}
return evenNumbers
};
var a = [1, 2, 3, 4, 5, 6, 7]
// 배열 입력 받는 경우엔 무조건 먼저 빈 배열을 정의해줘야 한다.④ getOnlyOddNumber: 홀수 반환 함수 만들기
function getOnlyOddNumber(a) {
var oddNumbers = []
for (let n of a) {
if (n % 2 === 1) {
oddNumbers.push(n)
}
}
return oddNumbers
};⑤ getDigits: 각 자리수 반환 함수 만들기
function getDigits(num) {
var answer = [];
var str = String(num); // 입력값을 문자열로
var len = str.length; // 문자열의 길이
for(var i = 0; i < len ; i++){ // 문자열의 길이만큼
answer.push(str.charAt(i)); //
}
return answer.map((i) => Number(i)); // 숫자로 변환
}
var inputA = 1100✨ Array.prototype.map()
[]=['1','2','3']이라 가정할 때, 아래 코드는 동일하게 [1, 2, 3]이 출력된다.
[].map((i) -> parseint(i)); = [].map(return int) = [].map(Number)
⑥ makeNumberFromDigits: 자릿수 배열을 숫자로 되돌리는 함수 만들기
function makeNumberFromDigits(arr1){
var num = "";
for (var n of arr1) {
num += n;
}
return Number(num);
}
var inputA = [1, 1, 0, 0]⑦ getOnlyAdults: 성인만 골라내는 함수 만들기
function getOnlyAdults(a) {
var arr1 = [];
for (var n of a) {
if (n.age >= 20) {
arr1.push(n.name);
}
}
return arr1;
}
var a = [{name: "박태환", age: 35}, {name: "유재석", age: 49},
{name: "김강훈", age: 12}, {name: "이지원", age: 15}]⑧ isRightTriangle: 직각삼각형 여부를 판단하는 함수 만들기
function isRightTriangle(a,b,c){
if(a*a===b*b+c*c){
return true
}else{
return false
}
}3. DOM
1) DOM(Document Object Model)
① DOM(문서객체모델)
객체 지향 모델로써 구조화된 문서를 표현하는 형식
XML이나 HTML 문서의 프로그래밍 인터페이스
문서의 구조화된 표현을 제공하여 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있도록 한다.
- DOM의 종류
Core DOM: 모든 문서 타입을 위한 DOM 모델
HTML DOM: HTML 문서를 위한 DOM 모델
HTML 문서를 조작하고 접근하는 표준화된 방법, 모든 HTML 요소는 HTML DOM을 통해 접근 가능
XML DOM: 문서를 위한 DOM 모델
XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의, 모든 XML 요소는 XML DOM을 통해 접근 가능
② Document
document 객체: 웹페이지를 의미. 웹페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작
document 메소드: HTML 요소와 관련된 작업을 도와주는 다양한 메소드 제공
(HTML 요소의 선택, HTML 요소의 생성, HTML 이벤트 핸들러 추가, HTML객체의 선택)
③ HTML
HTML 요소의 선택: 새로운 HTML 요소를 선택하기 위해 제공되는 메소드
document.getElementById() // 해당 아이지의 요소를 선택
document.getElementByClassName // 해당 클래스에 속한 요소를 선택
document.getElementByName // 해당 name 속성값을 가지는 요소를 선택
document.querySelectorAll() // 해당 선택자로 선택되는 요소를 모두 선택
document.querySelector() // 해당 선택자로 선택되는 요소를 1개 선택HTML 요소의 생성
document.create Element() // 지정된 html 요소를 생성
document.write() // html 출력 스트림을 통해 텍스트를 출력HTML 이벤트 핸들러 추가
요소.onclick = function(){} // 마우스 클릭 이벤트와 연결된 이벤트 핸들러DOM의 트리 구조: HTML -> DOM
<!DOCTYPE html> <html>
<head> <title></title> </head>
<body> <article> <header></header>
<section><header></header></section>
</article> </body> </html>2) 자바스크립트와 DOM
① DOM 요소의 선택
var selectedItem = document.getElementByTagName("li");
// HTML <li> 요소를 선택
var selectedItem = document.getElementById("id");
// 아이디가 "id"인 요소를 선택
var selectedItem = document.getElementByClassName("odd");
// 클래스가 "odd"인 요소를 선택
var selectedItem = document.getElementByName("first");
// name 속성값이 "first"인 요소를 선택Ex)
// HTML <div> 요소를 선택 var selectedTagName=document.getElementsByTagName('div'); // 아이디가 “banana"인 요소를 선택 var selectedId=document.getElementById('banana'); // 클래스가 "vegetable"인 모든 요소를 선택 var selectedClassNameS = document.getElementsByClassName('vegetable'); // name 속성값이 "red"인 모든 요소를 선택 var selectedNameS=document.getElementsByName('red'); // 선택된 요소들을 출력 document.write(selectedTagName); document.write(selectedId); document.write(selectedClassNameS); document.write(selectedNameS);
② DOM 요소의 스타일 변경
var selectedItem = document.getElementById("even")
// 아이디가 "even"인 요소를 선택
selectedItem.style.color = "red";
// 선택된 요소의 텍스트 색상을 변경Ex)
// 아이디가 "apple"인 요소를 선택 var selectedId = document.getElementById('apple'); // 선택한 요소의 색깔을 red로 바꿉니다. selectedId.style.color = "red"; // 아이디가 "banana"인 요소를 선택 var selectedId=document.getElementById('banana') ; // 선택한 요소의 색깔을 yellow로 바꿉니다. selectedId.style.color='yellow';
③ DOM 요소의 내용 변경
var str = document.getElementById("text");
str.innerHTML = "요소의 내용을 바꿉니다.";Ex)
// 아이디가 "apple"인 요소를 선택 var selectedId = document.getElementById('apple'); // 선택한 요소의 내용을 "strawberry"로 바꿉니다. selectedId.innerHTML = "strawberry"; // 아이디가 "onion"인 요소를 선택 var selectedId=document.getElementById('onion'); // 선택한 요소의 내용을 "garlic" 바꿉니다. selectedId.innerHTML='garlic';
3) Node 객체
① 노드와 노드트리
노드: HTML DOM에서 정보를 저장하는 계층적 단위
노드 트리: 노드들의 집합, 노드 간의 관계를 나타냄.
노드 트리의 모든 노드는 서로 계층적 관계를 맺고 있다. (부모/자식/형제)
② 노드의 종류
문서노드: html 문서 전체를 나타내는 노드
요소노드: 모든 html 요소는 요소노드로, 속성노드를 가질 수 있는 유일한 노드
주석노드: html 문서의 모든 주석은 주석노드
속성노드: 모든 html 요소의 속성은 속성노드이며, 요소노드에 관한 정보를 가진다. 하지만 해당 요소 노드의 자식 노드에는 포함되지 않는다.
텍스트노드: html 문서의 모든 텍스트는 텍스트노드
③ 노드의 값
노드에 대한 정보는 다음과 같은 프로퍼티를 통해 접근할 수 있다.
nodeName(이름) / nodeValue(값) / nodeType(타입)
document.childNodes[0].nodeName;
// html 문서의 모든 자식노드 중에서 첫번째 노드의 이름을 선택
document.getElementById("heading").firstChild.nodeValue;
// 아이디가 "heading"인 요소의 첫번째 자식 노드의 노드값을 선택
document.getElementById("heading").firstChild.nodeType;
// 아이디가 "heading"인 요소의 첫번째 자식노드의 타입을 선택노드의 값 접근(이름)
var node1 = document.childNodes[1]; // document 의 자식 노드들 중 두번째 노드를 node1변수에 할당
var node2 = node1.childNodes[2] ; // node1의 자식 노드들 중 세번째 노드를 node2변수에 할당
var node3 = node2.childNodes[1]; // node2의 자식 노드들 중 두번째 노드를 node3변수에 할당
document.write(node1.nodeName); // node1, node2, node3의 이름을 nodeName을 이용해 출력
document.write(node2.nodeName);
document.write(node3.nodeName);
console.log(node2.childNodes); // `node2`의 자식 변수들을 모두 출력노드의 값 접근(값)
var apple_node = document.getElementById('apple');
// document.getElementById()를 사용하여 아이디가 apple인 요소를 선택
apple_node.firstChild.nodeValue='apple_pie';
// firstChild.nodeValue를 사용하여 node의 첫번째 자식 노드의 값을 `apple_pie`로 변경노드의 값 접근(타입)
var apple_node = document.getElementById('apple').childNodes[0];
// 아이디가 apple인 요소의 첫번째 자식 노드를 선택
var apple_node_value = apple_node.nodeValue; // apple_node의 값을 변수에 할당
var apple_node_type = apple_node.nodeType; // apple_node의 타입을 변수에 할당
document.write(apple_node_value); // apple_node의 값과 타입을 출력
document.write(apple_node_type);4) 이벤트
① 이벤트: 웹 브라우저가 알려주는 html 요소에 대한 사건의 발생, 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행할 수 있다.
이벤트 타입: 발생한 이벤트의 종류(폼, 키보드, 마우스, HTML DOM, Window 객체 등)
<p onclick="changeText(this)">여길 클릭하세요!</p>
<script>
function changeText(element){
element.innerHTML = "내용이 바뀌었습니다!";
}
</script>이벤트 핸들러: 이벤트가 발생했을 때 그 처리를 담당하는 함수
지정된 이벤트가 발생하면, 웹브라우저는 그 요소에 등록된 이벤트 핸들러를 실행시킨다.
window.onload = function(){
var text = document.getElementById("text");
text.innerHTML = "HTML 문서가 로드되었습니다.";
}② 이벤트 핸들러1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자바스크립트 기초</title>
</head>
<body>
<div name="text" class="text" id="text">NULL</div>
<button onclick="this.innerHTML='성공입니다!'">클릭하세요!</button>
<script src="index.js"></script>
</body>
</html>window.onload =
// window.onload를 사용하여 HTML 문서가 로드될 때 이벤트 핸들러가 작동
function() {
var text = document.getElementById('text');
// 아이디가 "text"인 요소를 선택
text.innerHTML = "페이지가 열렸습니다";
} ③ 이벤트 핸들러2
var carrot_btn = document.getElementById('carrot') ;
// 아이디가 "carrot"인 요소를 선택
function showText() { // click 할 시 텍스트를 보여주는 함수
document.getElementById("text").innerHTML = '토끼가 나타났어요!!';
}; // 버튼을 클릭하면 "토끼가 나타났어요!!" 문장을 출력
carrot_btn.addEventListener("click",showText);
// 선택한 요소에 "click" 이벤트 핸들러를 등록(이벤트명:"click", 함수이름)상자의 크기와 위치를 변경하기
function move() { var box = document.getElementById('move'); box.style.width = "600px"; box.style.height = "600px"; box.style.left = "300px"; }; var btn = document.getElementById('btn'); btn.addEventListener("click",move);
체크박스 기능을 완성하기
// slect 클래스를 가지고 있는 3개의 요소 var selectedClassNameS=document.getElementsByClassName('one'); var selectedClassNameS=document.getElementsByClassName('two'); var selectedClassNameS=document.getElementsByClassName('three'); function handleOnclick() { this.classList.toggle("on"); // 선택된 요소에 on 클래스를 추가 } var one= document.getElementById('one'); // 가져온 3개의 요소에 이벤트를 등록합니다. one.addEventListener("click",move); var two= document.getElementById('two'); two.addEventListener("click",move); var three= document.getElementById('three'); three.addEventListener("click",move);
4. 도전! 크로켓 경기 소개 페이지 만들기
1) 내비게이션 기능 구현
// 1) Scroll Navigation
var aTags = document.querySelectorAll('header a');
for(var i = 0; i < aTags.length; i ++) {
aTags[i].onclick = function(e) {
e.preventDefault();
var target = document.querySelector(this.getAttribute("href"));
window.scrollTo({
'behavior': 'smooth',
'top': target.offsetTop
})
}
}2) 이미지 슬라이드(자동 전환)
// 2) Image Slider
var slider = document.querySelector("#slider");
var slides = slider.querySelector(".slides");
var slide = slides.querySelectorAll(".slide");
var currentSlide = 0;
setInterval(function() {
var from = -(1024 * currentSlide);
var to = from - 1024;
slides.animate({
marginLeft: [from + "px", to + "px"]
}, {
duration: 500,
easing: "ease",
iterations: 1,
fill: "both"
});
currentSlide++;
if (currentSlide === (slide.length - 1)) {
currentSlide = 0;
}
}, 3000);3) 탭 버튼
// 3) Tabs
var links = document.querySelectorAll(".tabs-list li a")
var items = document.querySelectorAll(".tabs-list li")
for (var i = 0; i < links.length; i++) {
links[i].onclick = function(e) {
e.preventDefault();
}
}
for (var i = 0; i < items.length; i++) {
items[i].onclick = function() {
var tabId = this.querySelector("a").getAttribute("href");
console.log(this.classList);
document.querySelectorAll(".tabs-list li, .tabs div.tab").forEach(function(item) {
item.classList.remove("active");
console.log(item);
});
document.querySelector(tabId).classList.add("active");
this.classList.add("active");
}
} 4) 이미지 슬라이드(화살표 누르기)
// 4) Click Image Slider
document.querySelector(".right-arrow").onclick = function () {
var currentSlide = document.querySelector("#photo .slide.active");
var nextSlide = currentSlide.nextElementSibling;
if (nextSlide === null) {
nextSlide = currentSlide.parentElement.firstElementChild;
}
currentSlide.animate({
opacity: [1, 0]
}, {
duration: 500,
easing: "ease",
iterations: 1,
fill: "both"
});
currentSlide.classList.remove("active");
nextSlide.animate({
opacity: [0, 1]
}, {
duration: 500,
easing: "ease",
iterations: 1,
fill: "both"
});
nextSlide.classList.add("active");
}
document.querySelector(".left-arrow").onclick = function () {
var currentSlide = document.querySelector("#photo .slide.active");
var prevSlide = currentSlide.previousElementSibling;
if (prevSlide === null) {
prevSlide = currentSlide.parentElement.lastElementChild;
}
currentSlide.animate({
opacity: [1, 0]
}, {
duration: 500,
easing: "ease",
iterations: 1,
fill: "both"
});
currentSlide.classList.remove("active");
prevSlide.animate({
opacity: [0, 1]
}, {
duration: 500,
easing: "ease",
iterations: 1,
fill: "both"
});
prevSlide.classList.add("active");
}5. 인스타그램 클론코딩
1)
①
②
③
프론트를 시작으로 풀스택을 걸쳐 모든 분야를 아우르고 싶은 야망이 살짝 있는 아기 개발자입니다.