JavaScript : 사용자와 상호작용을 하기 위한 언어 /html위에서 작동하며, html로 만들어진 정적인 웹 페이지를 동적으로 만들어 준다.
<script> <!-- 자바스크립트가 들어갈 자리 언급 -->
(javascript코드)
</script>이벤트: 웹브라우저에서 일어날 수 있는 기념할 만한 일
javascript 자료형 : String.메서드(), 숫자(+,-,*,/,%: 사칙연산), boolean(true/false),
연산자 : 대입연산자(=),비교연산자(===)
변수 선언: var
<javaScript 야간모드 실습>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='hsl(255, 5%, 15%)';
document.querySelector('body').style.color='white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
">프로그램: 순서
프로그래밍: 순서를 만드는 것
프로그래머: 순서를 만드는 사람
[조건문]: 하나의 흐름이 아닌 조건에 따라 흐름이 생기도록 하는 것
<조건문 실습>
<input id="night_day" type="button" value="night" onclick="
if (document.querySelector('#night_day').value === 'night') {
document.querySelector('body').style.backgroundColor='hsl(255, 5%, 15%)';
document.querySelector('body').style.color='white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('body').style.color='black';
document.querySelector('#night_day').value = 'night';
}
">this: 자기 자신을 가리키는 태그
<리팩토링>
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if (this.value === 'night') {
target.style.backgroundColor='hsl(255, 5%, 15%)';
target.style.color='white';
this.value = 'day';
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night';
}
">[반복문]: java에서 알던 반복문과 유사하여 넘어간다
[배열]: 수납장
- 배열 선언 및 초기화: var 배열명 = [data1, data2, ...];
- 데이터 가져오기: 배열명[index];
- 배열 길이: 배열명.length;
- 데이터 추가: 배열명.push(data);
- 등등 필요한 것은 검색을 통해 알아보자..
<반복문 배열 실습>
<input type="button" value="night" onclick="
var target = document.querySelector('body');
var a_list = document.querySelectorAll('a');
if (this.value === 'night') {
target.style.backgroundColor='hsl(255, 5%, 15%)';
target.style.color='white';
this.value = 'day';
var i = 0;
while (i < a_list.length) {
a_list[i].style.color='powderblue';
i += 1;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = 'night';
var i = 0;
while (i < a_list.length) {
a_list[i].style.color='blue';
i += 1;
}
}
">[함수]: 코드를 정리정돈 하기 위한 하나의 도구
선언: function 함수명(parameter) {로직};
<함수 실습>
---생략---
<head>
<meta charset="UTF-8">
<title>IndexPage</title>
<!-- <link rel="syltesheet" href="style.css"> -->
<script>
function nightDayHandler(self) {
var target = document.querySelector('body');
var a_list = document.querySelectorAll('a');
if (self.value === 'night') {
target.style.backgroundColor='hsl(255, 5%, 15%)';
target.style.color='white';
self.value = 'day';
var i = 0;
while (i < a_list.length) {
a_list[i].style.color='powderblue';
i += 1;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
self.value = 'night';
var i = 0;
while (i < a_list.length) {
a_list[i].style.color='blue';
i += 1;
}
}
}
</script>
</head>
---생략---
<input type="button" value="night" onclick="nightDayHandler(this)">
---생략---
WEB
웹이 어쩌구 저쩌구
[객체]: 서로 연관된 함수와 변수들을 하나의 이름으로 묶는 도구
*메소드: 객체 안에 함수
*프로퍼티: 객체 안에 변수
- 생성: var 객체명 = {요소들}
- 객체명.접근할 대상
- 데이터 추가 1: 객체명.변수명 = 데이터; 2: 객체명[변수명] = 데이터;
- 객체 안에 함수 정의: 객체명.함수명 = function() {로직};
<객체 실습>
---생략---
<script>
var body = {
setColor: function(color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor: function(color) {
document.querySelector('body').style.backgroundColor = color;
}
}
var links = {
setColor: function(color) {
var a_list = document.querySelectorAll('a');
var i = 0;
while (i < a_list.length) {
a_list[i].style.color= color;
i += 1;
}
}
}
function nightDayHandler(self) {
if (self.value === 'night') {
body.setBackgroundColor('hsl(255, 5%, 15%)');
body.setColor('white');
self.value = 'day';
links.setColor('powderblue');
} else {
body.setBackgroundColor('white');
body.setColor('black');
self.value = 'night';
links.setColor('blue');
}
}
</script>
---생략---
<input type="button" value="night" onclick="nightDayHandler(this)">
---생략---
WEB
웹이 어쩌구 저쩌구
[파일로 쪼개서 정리 정돈하기]
<colors.js>파일 생성
var body = {
setColor: function (color) {
document.querySelector("body").style.color = color;
},
setBackgroundColor: function (color) {
document.querySelector("body").style.backgroundColor = color;
},
};
var links = {
setColor: function (color) {
var a_list = document.querySelectorAll("a");
var i = 0;
while (i < a_list.length) {
a_list[i].style.color = color;
i += 1;
}
},
};
function nightDayHandler(self) {
if (self.value === "night") {
body.setBackgroundColor("hsl(255, 5%, 15%)");
body.setColor("white");
self.value = "day";
links.setColor("powderblue");
} else {
body.setBackgroundColor("white");
body.setColor("black");
self.value = "night";
links.setColor("blue");
}
}<header 부분에 <script>수정>
---
<head>
---
<script src="colors.js"></script>
</head>[라이브러리와 프레임워크]
현대 소프트웨어의 기본: 이미 만들어진 소프트웨들을 잘 조립해서 새로운 소프트웨어를 만들어냄, 혼자만이 아닌 다른 사람들과의 소통을 통해서 만들어진다고 볼 수 있음.
둘의 공통점: 다른 사람들이 만들어 놓은 프로그램의 도움을 받는다.
라이브러리: 내가 만들고자 하는 프로그램의 부품들이 잘 정리되어 있음
ex) jquery
프레임 워크: 내가 만들고자 하는 프로그램의 기본적인 형태가 있고 필요한 부분을 수정을 통해 개선해 나감
ex) spring
<jquery 적용하기> : CDN(Content Delivery Network)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>var body = {
setColor: function (color) {
//document.querySelector("body").style.color = color;
$("body").css("color", color);
},
setBackgroundColor: function (color) {
//document.querySelector("body").style.backgroundColor = color;
$("body").css("backgroundColor", color);
},
};
var links = {
setColor: function (color) {
// var a_list = document.querySelectorAll("a");
// var i = 0;
// while (i < a_list.length) {
// a_list[i].style.color = color;
// i += 1;
// }
$("a").css("color", color);
},
};[UI vs API]
- UI: User Interface / 프로그램을 사용하는 사람들을 위한 조작 장치
- API: Application Programing Interface / 프로그램을 만드는 사람들을 위한 조작 장치
https://github.com/lhj0954/WEB2-JavaScript.git
GitHub - lhj0954/WEB2-JavaScript: 생활코딩 JavaScript
생활코딩 JavaScript. Contribute to lhj0954/WEB2-JavaScript development by creating an account on GitHub.
github.com
728x90
반응형