#1. 수강 과목 : Javascript와 web 이론
#2. 수강 콘텐츠 : 생활코딩 WEB2 Javascript 강의 정리
자바스크립트 : 사용자와 상호작용 할 수 있는 웹페이지를 만들 수 있다.
-
자바스크립트는 동적이다 : 1+1을 계산해준다.(결과를 출력해준다.)
-
웹브라우저에서 일어나는 일들을 event(on~)라고 자바스크립트가 꼭 들어가야하는 명령어들이 있다.
<input type="button" value ="hi" onclick="alert('hi')">
<input type="text" onchange="alert('change')">
<input type="text" onkeydown="alert('keydown')">-
콘솔(크롬 검사창 이용하기)
-
자료형(데이터 타입 중 문자열과 숫자), 변수
콘솔 창 이용한 숫자열, 문자열 익숙해지기 -
웹브라우저 제어(화면 전환 예시)
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black'
document.querySelector('body').style.color = 'white'
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white'
document.querySelector('body').style.color = 'black'
">- 조건문으로 응용하기(night면 화면을 night,버튼은 day로, 그 반대는 그 반대로.)
<input id = "night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value === 'night') {
document.querySelector('body').style.backgroundColor = 'black';
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 id = "night_day2" type="button" value="night" onclick="
if(this.value === 'night') {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
this.value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
this.value ='night';
}
">위 코드를 여러 개 복사해서 써도 night/day 가 바뀌는 버튼이 생김.
- 변수 쓰기 : var target = ~
<input id = "night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value ='night';
}
">같은 동작, 코드 줄이기.
- 배열과 반복문
- li 태그 예시
<script>
var coworkers = ['egoing', 'leezche', 'duru', 'taeho'];
</script>
<ul>
<script>
var i =0;
while(i < coworkers.length){
document.write('<li>'+coworkers[i]+'</li>');
i = i+1;
}
</script>
</ul>- 웹 예제로 응용(색상이 바뀌면 글자 칼라가 바뀌게 하기, Night powederblue, day blue)
<h1 id = "a">WEB</h1>
<input id = "night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var alist = document.querySelectorAll('#a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value ='night';
var alist = document.querySelectorAll('#a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
">
<ol id = "a">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>- 함수
- two 라는 함수 반복하는 함수 기본 문법
<script>
function two(){
document.write('<li>2-1</li>');
document.write('<li>2-2</li>');
}
document.write('<li>1</li>');
two();
document.write('<li>3</li>');
two();
</script>
</ul>- 매개변수와 인자
입력 값에 따라 다른 결과 출력.
function onePlusOne(){
document.write(1+1+'<br>');
}
onePlusOne();
function sum(left, right){
document.write(left + right + '<br>');
}
sum(2, 3);매개 변수 : left, right
인자 : 2, 3
- 리턴
function sum(left, right){
return left + right
}
document.write(sum(2,3))리턴을 통해 출력해놓고 그 뒤에 출력값에 대해서는 다양한 것을 함수 밖에서 할 수 있다.
- 위의 결과를 리펙토리(함수로)
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var alist = document.querySelectorAll('#a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value ='night';
var alist = document.querySelectorAll('#a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}input onclick에 준 긴 조건들을 function처리 하고
<input id = "night_day" type="button" value="night" onclick="
nightDayHandler(this);
">함수 호출. 결과는 같음.
- 객체 : 함수들의 정리, 수납(폴더), 이름이 있는 정리 정돈 상자
- 먼저 기존 코드를 모두 함수화
function BodySetColor(color){
document.querySelector('body').style.color = color;
}
function BodySetBackgroundColor(color){
document.querySelector('body').style.backgroundColor = color;
}
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night') {
BodySetBackgroundColor('black')
BodySetColor('white')
self.value = 'day';
LinksSetColor('powderblue');
} else {
BodySetBackgroundColor('white')
BodySetColor('black')
self.value ='night';
LinksSetColor('blue');
}
}이후 객체화(.소문자 -> 중간 과정, 아직 안 움직임)
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night') {
Body.setBackgroundColor('black')
Body.setColor('white')
self.value = 'day';
Links.setColor('powderblue');
} else {
Body.setBackgroundColor('white')
Body.setColor('black')
self.value ='night';
Links.setColor('blue');"즉 위의 document. 은 객체, .query~는 매소드(객체의 함수)"
- 객체 불러내기와 추가하기(2가지 방법)
var cowokers = {
"programmer":"egoing",
"designer" : "leezche"
};
document.write("programmer : "+cowokers.promgrammer+"<br>");
document.write("designer : "+cowokers.designer+"<br>");
cowokers.bookkeeper = "duru";
document.write("bookkeeper : "+cowokers.bookkeeper+"<br>");
cowokers["data scientist"] = "taeho";
document.write("data scientist : "+cowokers["data scientist"]+"<br>");- 객체와 반복문
키 출력
<script>
for(var key in cowokers){
document.write(key+'<br>');
}
</script>키 & 값 출력
<script>
for(var key in cowokers){
document.write(key+ ':' + cowokers[key]+'<br>');
}
</script>- 프로퍼티와 메소드
객체에는 함수도 담을 수 있다.
<script>
cowokers.showAll = function(){
for(var key in this){
document.write(key+ ':' + this[key]+'<br>');
}
}
cowokers.showAll();
</script>객체에 소속된(coworkers) 함수(showAll)을 메소드라고 한다.
그리고 객체 이름은 여기서 this로 통용되어 바뀔 수 있다.(약간 어려운 내용임)
var Links = {
setColor:function(color){
var alist = document.querySelectorAll('#a');
var i = 0;
while(i < alist.length){
alist[i].style.color = color;
i = i + 1;
}
}
}
var Body = {
setColor:function(color){
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color){
document.querySelector('body').style.backgroundColor = color;
}
}
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night') {
Body.setBackgroundColor('black')
Body.setColor('white')
self.value = 'day';
Links.setColor('powderblue');
} else {
Body.setBackgroundColor('white')
Body.setColor('black')
self.value ='night';
Links.setColor('blue');
}
}전체 객체화 완성
객체는 좀 어렵다. 이 부분은 다시 만들어보면서 익혀야겠다.
- 연관된 코드들을 파일로 묶어서 그룹화
<script src="color.js"></script>color.js에 여태 한 것들 다 옮기고 link하듯 불러오면 끝. ; CSS 파일 쪼개놓은 것과 약간 비슷
커피 내리고 향 맡는거 좋아해요. 이것 저것 공부합니다.