자바스크립트
이 수업은 총 37개의 동영상, 4시간 24분의 재생시간으로 이루어진 수업입니다.
1. 수업소개
web1 html을 먼저보고 이 수업을 보아야한다.
html의 등장만으로 혁명적이지만, 사용자와 상호작용하는 웹페이지를 만들고 싶다는 욕망.
html은 정적이다.
게임은 사용자의 조작에 반응해서 프로그램이 움직인다.
사람들은 웹페이지가 게임처럼 동적으로 사용자와 상호작용할 수 있게 되기를 원함.
그래서 태어난 기술이 javascript.
이제 웹은 html을 이용해서 웹페이지를 우선 만든 후에,
그렇게 만들어진 웹페이지를 javascript를 이용해서 사용자와 상호작용할 수 있도록 기능을 추가함으로써
html의 정보와 javascript의 기능을 모두 갖춘 유일무이한 시스템으로 성장했다.
예를들어서 여러분이 알고 있는 수많은 웹사이트들이 프로그램처럼 사용자와 상호작용하면서도
검색엔진을 통해서 검색된다는 것은 웹만이 가진 독창적인 특성이라고 할 수 있다.
그 어떤 정보 기술도 그렇지 않다.
예시) html만으로 만들어진 웹페이지에 주간/야간 모드 기능 추가, 각종 문법 학습.
2. 수업의 목적
우리는 문법을 쭉 배워나가는 수업이 아니라 어떤 하나의 기능을 구현하는 과정에서
그걸 하기 위해서 필요한 문법들을 챙겨드리는 수업이다.
실습이 중심이 되서 문법을 익히는 것이 부가적으로 따라오는 수업.
night day 버튼 주간/ 야간모드
사용자와의 상호작용 - 사용자가 버튼을 클릭했을 때 그것에 반응해서 웹페이지를 바꿔줌.
웹브라우저는 한번 화면에 출력되면 그 다음에는 자기 자신을 바꿀 수 있는 능력이 없음.
그것을 해주는 것이 자바스크립트.
웹페이지 우클릭 > 검사 > elements(태그) > 이 웹페이지를 구성하는 html 태그들이 보임.
> day, night 버튼 클릭시 태그가 바뀜.
검사에서 더보기를 통해 오른쪽으로 이동가능.
night 버튼은 input을 쓰고 type을 button으로 한다. value에 이름을 부여한다.
onclick이라는 속성의 값으로는 javascript가 와야한다.
onclick이라는 속성의 값으로 javascript를 넣어주면 사용자가 onclick 속성이 위치하고 있는
버튼을 클릭했을때 이 javascript 코드를 그 때 실행시킬 것이다.
night버튼을 선택했을 때 문서에서 body 태그를 선택하는 코드. 이 body태그에 style 속성 값으로 background color를 black으로 한다고하는 코드;
> 백그라운드는 검정, 텍스트는 흰색으로하라는 코드.
style 속성의 속성 값으로는 반드시 css가 온다.
1. 자바스크립트는 사용자와 상호작용을 하는 언어이다.
2. 웹브라우저는 한 번 화면에 출력되면 자기 자신을 바꿀 수 없다.
하지만 자바스크립트를 이용해서 여기 있는 버튼을 클릭하면 여기 있는 자바스크립트 코드에 따라서
바디태그에 스타일이라는 속성이 추가되면서 이 바디태그의 디자인을 바꿔준다.
'자바스크립트가 html을 제어하는 언어다'
이러한 특성이 웹페이지를 동적이고 다이나믹하게 만들어 준다.
3. HTML과 JavaScript의 만남 1 : script 태그
기본적으로 자바스크립트는 html 위에서 동작하는 언어이다.
<script>document.write();</script>
'이것이 자바스크립트'라는 걸 웹브라우저에게 알려주기 위해서는 스크립트 태그를 쓴다.
웹브라우저는 스크립트 태그 안쪽에 있는 코드를 자바스크립트로 해석한다.
웹페이지에 글씨를 출력할 때는 document.write();를 쓴다.
body 태그에 스크립트 태그를 이용해 글을 쓴다.
h1태그에 글을 쓴것과의 차이점 : 스크립트 태그의 글은 계산기처럼 동작할 수 도 있는 다재다능한 코드이다.
4. HTML과 JS의 만남 : 이벤트
이벤트 - 자바스크립트와 사용자가 상호작용하는 데 핵심적인 역할을 함.
on으로 시작하는 속성들 수업.
웹페이지 주/야간 변경의 일부를 배움.
버튼만들기
<input type="button" value="이름" onclick="alert('경고창')">
onclick -
1. onclick이라는 속성의 속성값으로는 반드시 자바스크립트가 와야한다.
2. onclick 속성의 속성 값은 웹브라우저가 기억하고 있다가 이 onclick 속성이 위치하고 있는 태그(버튼)을 사용자가 클릭했을때 기억하고 있던 js 코드를 js 문법에 따라 해석해 적혀있는 대로 웹브라우저가 동작한다.
이렇게 웹브라우저 위에서 일어나는 일들을 이벤트라고 한다.
어떤 이벤트가 일어났을 때 어떠한 js가 실행되도록 하는 것이 바로 onclick이다.
웹브라우저에서 일어날 수 있는 이벤트 ex) 무언가를 클릭 하기
타입을 텍스로하면 입력창이 나온다. 입력창에 입력하면 내용이 변하게되는데, '내용이 변했을 때'라는 이벤트를 체크하는 이벤트도 있다.
그다음 on을 입력하면 자동 완성이 뜨기때문에 기억할 필요없다.
<input type ="text" onchange="alert('changed')">
>입력창에 아무거나 입력하고 마우스를 바깥쪽에 클릭하면 경고창이 뜬다. (온체인지 이벤트 실행)
>입력한것을 다시 지우고 빠져나오면 웹브라우저가 온체인지 이벤트를 실행시키지 않는다.
10~20개 정도의 이벤트를 정의하고있다. 그 이벤트를 이용해서 사용자와 상호작용하는 웹페이지를 만들 수 있다.
검색 javascript keydown event attribute(속성)
예시) <input type="text" onkeydown="alert('key down')">
입력창에서 키를 누르면 경고창 띄움
5. HTML과 JS의 만남 : 콘솔
콘솔 재미있고 실용적인 수업이다.
그냥 어떤 코드를 실행해야 되는 아주 가벼운 상황들이 있다.
페이지 우클릭 > 검사 > console
콘솔에서 파일을 만들지 않고도 자바스크립트를 실행시킬 수 있다.
글자수 세기
웹페이지의 글자를 복붙 한 후 따옴표로 묶어준다 > 따옴표 사이에 있는 부분이 문자가 된다.
js에는 문자를 숫자로 알려주는 이 문자열의 문자의 개수를 알려주는 명령이 .length이다.
alert로 감싼다. > 경고창에 글자수가 뜬다.
예시) alert('문자'.length)
*실행 시켜봤는데 복붙이 안되고 직접 입력해야 됨.
이 콘솔에서 실행시키는 js는 그 웹페이지 안에 삽입된 js인 것처럼 동작한다.
> 그 웹페이지를 대상으로 js가 실행된다.
수많은 댓글 중에서 추첨해야할 때
페이지 우클릭 > 검사 > element > esc키를 누르면 html와 함께 콘솔창이 뜬다.
랜덤추첨 코드 복사 붙이기> 당첨자 수 조정> 엔터 > 실행
한번 실행했던 코드는 위쪽 화살표키를 누르면 다시 화면에 나타난다. > 숫자 조정하여 추첨 가능
우리가 웹페이지,js를 이용한다는 것은 웹페이지, 웹사이트를 만드는 것처럼 거대한 목표일 수도 있지만
이미 만들어져 있는 웹사이트를 나의 필요에 따라서 간단히 맞는 코드를 작성해서 문제를 해결할 수 있다.
그래서, 우리가 코딩을 해서 얻을 수 있는 효용은 개발자가 될수 있다, 될수 없다만 있는 것이 아니라
너무 큰 목표를 설정하는 것보다는 나의 현실의 문제를 가볍게,가볍게 해결하는 방법을 찾아보면 좋을것이다.
6. 데이터타입-문자열과 숫자
데이터타입(자료형)
검색 javascript data type
결과 6개의 타입과 객체라는 것이 있다.
아무 페이지의 검사> 콘솔창에서 1+1 실행하면 2가 나온다.
산술연산자 : +더하기 -빼기 * 곱하기 / 나누기
문자열 : " " ' '
.length : 문자 개수
.toUpperCase() : 소문자였던 문자열이 대문자가 된다.
"hello world".indexOf("o") = 4 : 4번째에서 알파벳 소문자o가 나온다.
"hello world".indexOf("world") = 6 :6번째에서 world라는 문자열이 시작된다.
" hello ".trim() = 'hello' : 공백을 없애준다.
1+1 = 2
"1" + "1" = "11"
js 코드에서 문자열을 확인할 수 있다.
데이터 타입이 무엇인가 배우는 수업.
7. 변수와 대입 연산자
변수 variable: 바뀔 수 있는 값
1. 수많은 값을 대체할 수 있다.
2. 되도록 앞에 var이라는 키워드를 붙인다.
= 대입 연산자 , 좌항과 우항을 결합해서 우항의 값을 만들어 낸다.
상수 constant: 바뀌지않는 수
shift + enter : 실행을 유보하고 싶을 때
8. 웹브라우저 제어
웹페이지에 주 /야간 버튼을 만들고 싶다.
> 바디태그에 스타일 속성을 쓴다.(스타일의 속성 값은 css 언어가 오도록 약속되어있다.)
예시) <body style="background-color: black; color:white;"> 배경을 검정, 글자를 흰색으로한다.
단점 : 정적으로 바뀐채로 멈춘다. >자바스크립트를 이용한다.
다음시간
1. css의 중요한 문법들을 배운다.
2. js를 이용해서 제어하고자 하는 태그를 선택하는 방법을 살펴본다.
9. css기초 : style 속성 (css 수업을 배웠다면 12강으로 건너뛸것)
비주얼스튜디오코드 duplicate : 복제
특정 태그에 디자인을 넣고싶을 때 style이라는 속성을 쓰고 그안에 css 문법을 쓴다.
10. css 기초 : (style 태그)
어떠한 기능도 의미도 없는 태그, css js를 사용할 때 감싸주는 태그 :
<div> 줄바꿈
<span> 줄바꿈x
특정 태그의 디자인을 부여할 때 :
<style> 태그 사용
.js { } / <span class="js"> 내용 </span>
11. css 기초 : 선택자
#first { } / <span id ="first"> 내용 </span>
span { } 모든 span 태그
.class = 그루핑
#id = 한가지 대상을 식별
선택자 우선 순위 : id > clss > span
포괄적인 선택자를 꾸며주고 예외적인것을 id를 이용해서 디자인을 바꿀 수 있다.
12. 제어알 태그 선택하기
검색 : javascript select tag by css selector
document.querySelector('body').style.backgroundColor='black';
이 문서.질의하다(웹브라우저에게)css셀렉터('바디태그').스타일.백그라운드컬러=블랙
검색 : javascript element style
검색 : javascript style backgrond- color
페이지 우클릭 > 검사 > elements > 버튼을 클릭 했을 때 바디 태그가 변함을 확인.
예시)
<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';
">
??? 야간에서 리스트 폰트색상은 화이트로 안바뀜.
13. 프로그램, 프로그래밍, 프로그래머
html과 js는 컴퓨터 언어이다.
js는 컴퓨터 언어이면서 프로그래밍 언어이다.
프로그램 = 순서에 따라 기능 수행
14. 조건문 예고 (문법수업을 배웠다면 최종적으로 토글 기능 구현하는 곳으로 건너 뛸것)
조건에 따라 다른 순서의 기능들이 실행되도록 하는 것.
주/야간 버튼 토글 - if 조건문 실행, 비교연산자.
하나의 버튼으로 day, night 변경
15. 비교 연산자와 불리언
=== : 비교 연산자 true, false 중 하나의 값을 결과로 나타냄.
boolean : true, false
html에서는 <가 꺽쇠라는 문법이기 때문에 < 을 사용한다 1<2
html
<h1>Comparison operators & Boolean</h1>
<h2>===</h2>
<h3>1===1</h3>
<script>
document.write(1===1);
</script>
<h3>1===2</h3>
<script>
document.write(1===2);
</script>
<h3>1<2</h3>
<script>
document.write(1<2);
</script>
<h3>1<1</h3>
<script>
document.write(1<1);
</script>
16. 조건문
if 문의 괄호에는 불리안 데이터 타입이 들어간다.
true는 첫번째 코드가 실행되고 else 코드가 무시된다.
false 첫번째 코드가 무시되고 else 코드가 실행된다.
html
<h1>conditional statements</h1>
<h2>program</h2>
<script>
document.write("1<br>");
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");
</script>
<h2>if-true</h2>
<script>
document.write("1<br>");
if(true){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
</script>
<h2>if-flase</h2>
<script>
document.write("1<br>");
if(false){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
</script>
17. 조건문의 활용
토글 주야간 버튼 만들기
우클릭> 검사> 콘솔창
document.querySelector('#night_day')
위 방향키를 누르면 다시 위 문장이 입력됨.
document.querySelector('#night_day').value
='night'
html
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'
}
">
18. 리팩토링 중복의 제거
코딩을 하고나면 비효율적인 코드가 생기기 마련이다.
동작하는 것은 그대로 두고 코드 자체를 효율적으로 만들어서
코드의 가독성을 높이고 유지보수를 편리하게하고 중복 코드를 낮추는
방향으로 코드를 다시 개선하는 작업을 리팩토링이라고 한다.
틈틈이 리팩토링을 해야 좋은 프로그램을 만들 수 있다.
토글 주야간버튼을 아래에 복사했을경우
위의 버튼의 이름만 바뀌고
아래 버튼의 이름은 안바뀐다.
이름을 다르게 구분해주어야한다. 하지만 무수히 많이 바꿀 순 없다.
onclick과 같은 이 event 안에서 실행되는 이 코드들은
구간 안에서는 이 코드가 속해있는 태그 index태그, 그 태그를 가리키도록 약속되어있는
특수한 키워드가 있다. this
이 코드는 사실상 자신을 가리키고 있다. this로 바꾸어준다.
document.querySelector('#night_day') 를 this로 바꾼다.
id는 지운다.
코딩을 잘하려면 중복을 끝까지 다 없애버려라.
var target = document.querySelector('body');
target 변수로 바꾼다.
html
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if(document.querySelector('#night_day').value==='night'){
target.style.backgroundColor='black';
target.style.color='white';
document.querySelector('#night_day').value='day'
} else {
target.style.backgroundColor='white';
target.style.color='black';
document.querySelector('#night_day').value='night'
}
">
<input 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'
}
">
??? 아래버튼을 눌르면 이름과 스타일은 동작하지만 위 버튼의 이름은 바뀌지않는다.
동시에 바뀌게 하는법
19. 반복문 예고 ( 배웠다면 건너 뛰기)
야간 버튼에서 리스트 색상이 어두워서 잘 안보인다.
어두울 경우엔 밝게, 밝을 땐 어둡게 표현하기
모든 링크를 style 속성을 바꿔주는 코딩을 하면되지만 무수히 많으면 어렵다.
반복문을 사용한다.
배열과 반복문을 배울 것임.
20. 배열
물건들을 정리하는 수납상자
배열 - 데이터가 많아짐에 따라 연관된 데이터끼리 정리한 것.
array
배열은 [] 대괄호에 입력한다.
변수에 배열을 저장한다.
배열의 인덱스는 0부터 시작한다.
검색 javascript array count =array.length
검색 javascript array add data = push
html
<script>
var coworkers = ["egoing", "leezche"];
</script>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
<script>
coworkers.push('duru');
coworkers.push('taeho');
</script>
21. 반복문
반복문 - Loop
반복문은 순서대로 흘러가는 실행 순서를 제어하는 제어문이다.
while(){ }
() 괄호 안에는 if문처럼 true 또는 false가 들어갈 수 있다.
false가 될때까지 {}의 문장이 반복된다. ( 모든 문장이 수행되고 true이면 다시 수행된다 false일때까지)
반복문이 언제 종료되는지 지정이 필요하다.
변수를 지정하고 i값을 0으로 한다.
while문이 끝날 때마다 i에 1을 더한다.
while의 () 괄호에 i<3을 지정한다. true일 땐 수행되고 false일땐 종료된다.
html
<ul>
<script>
document.write('<li>1</li>');
var i = 0;
while(i < 3){
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1;
}
document.write('<li>4</li>');
</script>
22. 배열과 반복문
배열의 각 항목들을 element 원소라고 한다.
배열만큼 리스트가 작성된다.
배열에 내용을 추가해도 리스트가 자동으로 추가된다.
개발자들은 데이터가 바뀌면 바뀐 데이터에 따라 유연하게 바뀌는걸 원한다.
<ul>
<script>
var coworkers = ['egoing','leezhe','duru','taeho','graphi','ttie'];
var i =0;
while(i<coworkers.length){
document.write('<li>'+coworkers[i]+'</li>');
i=i+1;
}
</script>
</ul>
23. 배열과 반복문의 활용
검색을 잘 활용하여야 한다.
우클릭 > 검사 > elements> esc > 콘솔
document.querySelector('a') = 링크태그를 가져온다. > a태그에 해당하는 태그중 첫번째것 하나만 가져온다.>우리가 하는것과 맞지않음.
검색 javascript get element by css selector multiple = document.querySelectorAll(".example")
var alist = document.querySelectorAll('a')
shift키를 누르고 enter를 치면 줄바꿈이 됨.
console.log(alist[0]) 를 사용하면 괄호안의 내용이 출력된다.
야간모드
var alist = document.querySelectorAll('a')
var i = 0;
while(i<alist.length){
console.log(alist[i]);
alist[i].style.color='powderblue';
i= i+1;
}
html
<input id="night_day" type="button" value="night" onclick="
var target = document.querySelector('body');
if(document.querySelector('#night_day').value==='night'){
target.style.backgroundColor='black';
target.style.color='white';
document.querySelector('#night_day').value='day'
var alist = document.querySelectorAll('a')
var i = 0;
while(i<alist.length){
console.log(alist[i]);
alist[i].style.color='powderblue';
i= i+1;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
document.querySelector('#night_day').value='night'
var alist = document.querySelectorAll('a')
var i = 0;
while(i<alist.length){
console.log(alist[i]);
alist[i].style.color='blue';
i= i+1;
}
}
">
24. 함수 예고
function() { }
같은 코드를 쓰는 코드에 함수 이름을 부여하여 호출하여 사용한다.
수정과 재사용이 용이하다.
이름을 붙여 직관적인 의미를 알 수 있다.
25. 함수
함수 = function = method
함수는 입력(parameter,argument)과 출력(return) 두가지로 이루어져있다.
??? 함수 정의 {}에는 왜 세미콜론을 안쓸까 > 정의 내용 코드에는 세미콜론 쓴다.
??? ul태그를 script 태그 바깥에 쓰는 이유
리스트의 문장을 반복할 때 - 반복문을 쓴다.
내용이 연속적이면 반복문이 가능하지만 불연속적이면 함수를 쓴다.
웹브라우저에게 함수를 알리는 키워드 function
function 함수이름() { 반복, 재사용할 코드 }
함수이름(); = 함수 호출, 작성된 코드 실행
26. 함수 : 매개변수와 인자
함수의 괄호 안에 다른값을 입력하면
그 입력한 값에 맞춰 결과가 나온다.
(left,right) 처럼 변수를 정의한다. = 매개변수= parameter
매개변수의 값= 인자 = argument
*에러 확인 - 스펠링에러
우클릭 > 검사 > 콘솔에서 @@@ is not defined 확인 가능.
27. 함수(리턴)
expression = 표현식
ex) 1+1 (2에 대한 표현식)= 2, 1===1(true에 대한 표현식) true
빨간색을 입힌 sum
document.write('<div style="color:red">'+(left+right)+'</div>');
* 자바스크립트는 문자와 숫자를 더하면 숫자를 문자로 간주하기 때문에 괄호를 사용하여 먼저 더해주어야한다.
* div 태그는 줄바꿈을 해준다.
sum이라는 함수에 디자인적인 요소를 정의하는것보다
return값을 넣어 값만으로 자유롭게 활용할 수 있다.
function sum2(left, right){
return left+right;
}
28. 함수의 활용
주야간 버튼 코드 효율적으로 리팩토링하기. - 함수 이용
1) 인풋의 온클릭 내용을 nightDayHandler(){} 함수에 정의 한다.
2) 버튼 위치에 인풋의 온클릭 내용을 지우고 함수를 호출한다.
3) 주야간 모드가 여러번 클릭해야 바뀌고 버튼의 글자가 바뀌지 않는다. 코드오류
4) onclick이라는 이벤트안에서 this는 이벤트가 소속된 태그를 가리키도록 약속되어있다.
우리가 독립된 함수를 만들게 되면 this는 더이상 input 버튼이 아니고 전역객체를 가리키게된다.
웹브라우저에서는 윈도우가 된다. (현재 이해 못하는 내용)
5) 함수를 정의 할때 매개변수에 (self)를 정의한다. 정의된 코드의 this를 self로 변경한다.
input에서 함수를 호출할 때 괄호안에 this를 입력하면 함수에 정의된 코드에 매개변수로 들어간다.
???인풋에는 왜 script 태그를 안쓸까
29. 객체 예고
중요하지만 어렵다.
프로그래밍의 큰 산 : 함수, 객체
함수가 심화된것
함수도 많아지면 복잡해진다.
서로 연관된 함수와 변수를 그루핑 하는것 : 객체
*set 설정하다- 자주쓰는 표현 function setColor() { }
같은 이름의 함수를 정의할 경우 이전에 썼던것이 삭제되는 효과를 얻게된다.
실제로 내가 같은이름을 썼는지 알기 어렵다.
이름을 충돌하지 않게 하기위해 LinksSetColor, BodySetColor 등 이름을 부여한다.
자바스크립트에서는 객체를 사용하여 Body.setColor 같은 식으로도 할수 있다.
*document(객체).querySelector(함수)
객체에 속해있는 함수는 메소드라고 부른다.
30. 객체 쓰기와 읽기
배열은 순서대로 정보를 저장하는 특징이 있다.
객체는 순서없이 저장할 수 있다.
배열은 [] , 객체는 {}
var coworkers = {
"programmer":"egoing",
"desiigner":"leezche"
};
document.write("programmer : "+coworkers.progrmmer+"<br>");
document.write("designer : "+coworkers.designer+"<br>");
coworkers.bookkeeper = "duru";
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
coworkers["data scientist"] = "taeho";
객체를 만들 때에는 정보에 이름을 붙여준다.
객체의 정보를 불러오는법.
만들어진 객체에 정보를 추가하는법.
띄어쓰기가 있는 이름을 짓고 싶을 때 - .을 쓰지않고 []를 쓴다.
31. 객체와 반복문
검색 : javascript object iterate 객체의 모든 내용 출력
key 값(명명한 것)들을 가져오는 반복문
coworkers에 있는 데이터의 수만큼 중괄호에있는 코드들이 실행되는데
실행될 때마다 key값을 변수값으로 세팅해준다.
for(var key in coworkers) {
document.write(key+"<br>");
}
for(var key in coworkers) {
document.write(key+":"+coworkers[key]+"<br>");
객체의 데이터를 순회 하는법
객체[] 괄호안에 키값을 넣었더니 데이터를 저장할 수 있었다. >coworkers["data scientist"] = "taeho";
[key]를 넣으면 내용이 출력된다.
32. 객체프로퍼티와 메소드
객체에는 문자, 배열, 숫자, 함수 등 다 담을 수 있다.
객체에 함수 담기
coworkers.showAll = function() {
}
= function showAll() { }와 같은 표현
예시)
coworkers.showAll = function() {
for(var key in coworkers) {
document.write(key+":"+coworkers[key]+"<br>");
}
}
coworkers.showAll();
> 좋은 방법은 아니다. 정의한 객체의 이름이 바뀌면 데이터를 못가져 올 수 있다.
이 함수가 소속된 객체를 가리키는 약속된 기호 this를 쓴다.
coworkers.showAll = function() {
for(var key in this) {
document.write(key+":"+this[key]+"<br>");
}
}
>이렇게 출력하면 showAll 내용이 출력이되는데 if문으로 showAll을 제외한다는 코딩을 해야하지만 여기선 다루지않음.
객체에 소속된 변수(프로퍼티)의 값으로 함수를 지정할 수 있고
객체에 소속된 함수를 만들 수 있다.
객체에 소속된 함수를 메소드라고한다.
33. 객체의 활용
Body.setColor("white"); > 이러한 코드 생산하기.
객체를 만든다.
var Body = {
setColor:function(color) {
document.querySelector('body').style.color = color;
},
setBackgroundColor:function(color) {
document.querySelector('body').style.backgroundColor = color;
}
}
객체의 프로퍼티와 프로퍼티를 구분할 때 콤마를 찍는다.
html
<script>
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');
Links.setColor('blue');
self.value='night';
}
}
</script>
html
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
34. 파일로 쪼개서 정리 정돈
연관된 코드들을 파일로 묶어서 그루핑한다.
웹페이지가 아무리 많아도 감당할 수 있게 된다.
인풋 코드를 모든 페이지에 배포한다.
모든 페이지에 주야간 버튼이 생긴다.
자바스크립트는 안 썼기 때문에 동작을 안함.
js코드를 다 복붙하면 동작한다.
하지만 1억개를 배포해야한다면?
또한 powderblue를 yellow로 바꾸고싶다면 전부 바꿔야할것이다.
colors.js 파일을 만든다.
3.html에서 스크립트 코드에서 script태그를 제외한 공통적인 코드를 카피하여 붙여넣기한다.
3.html에 <script src="colors.js"></script>를 작성한다.
잘 작동된다.
페이지 우클릭> 검사> 네트워크+새로고침을 보면 이 페이지를 화면에 표시하기 위해서 로딩된 파일들이 보인다.
3.html / style.css / colors.js 를 확인 할 수 있다.
웹브라우저가 colors.js를 다운로드해서 해석한다.
이것을 모든 페이지에 적용하고 js파일에서 white로 바꾸면 모든 페이지에 적용되는 것을 볼 수 있다.
이렇게 파일을 쪼갰을 때의 장점은 이제 새로운 파일을 만들면 이 모든 코드를 카피할 필요가 없이
colors.js라는 파일을 포함시키기만 하면 된다. = 재사용,유지보수 편리,
코드의 가독성이 좋아지고 파일 이름을 통해 명확하게 같은 파일을 사용했음을 알아볼 수있다.
, 코드의 정리정돈
웹페이지에 로드할 때 웹서버에 접속을 2번해야한다 (html,js파일 다운)
웹서버 입장에서 접속은 적을 수록 좋다. 하지만 이렇게 하는것이 훨씬 더 효율적이다.
캐시(저장)가 한번 웹페이지,웹브라우저에 다운로드된 파일은 웹브라우저가 보통 컴퓨터에 저장해 놓는다.
다음에 저장된 파일을 읽어서 네트워크를 통하지 않게 한다.
서버 입장에서는 비용을 훨씬 더 절감할 수있다.
사용자 입장에서도 네트워크 트래픽을 절감하고 훨씬 더 빠르게 웹페이지를 화면에 표시할 수 있다.
35. 라이브러리와 프레임워크
우리가 소프트웨어를 만들 때 혼자 만드는 것보다 다른사람이 이미 잘 만들어놓은 것을 부품으로
내가 만들고자 하는것을 빠르게 조립해 만들어 가는 것이 오늘날 소프트웨어를 만드는 기본이다.
지금까지는 생산자가 되는 방법을 알아보았다.
이제부터는 달느사람이 만든 소프트웨어를 부품으로해서 그 소프트웨어를 소비해서
내가만드는 소프트웨어의 생산자가 되는 방법을 살펴본다.
생산자로서 소비자.
library vs framework
다른 사람의 도움을 받아 소프트웨어를 만든다는 점에서 비슷하다.
라이브러리- 부품이되는 소프트웨어를 잘 정리해놓은, 재사용하기 쉽도록 되어있는 소프트웨어.
프레임워크- 만들고자 하는것이 무엇이냐에 따라 (게임.웹.채팅 등) 언제나 필요한 공통적인 것이있고,
기획의도에 따라 달라지는 부분이 있을 때 공통적인 부분은 프레임워크라는 것이 만들어 놓고.
기능과 개성에 따라 살짝 살짝 수정하는걸 통해서 처음부터 끝까지 만들지 않도록 해주는 반제품과 같음.
자바스크립트 라이브러리중 가장 유명한 것 jQuery 라이브러리.
상당히 오래되고 안정적임. 생산성이 훨씬 높아진다.
검색 : jQuery > 다운로드 > 다운로드된 파일을 프로젝트 폴더 디렉토리로 이동해도됨. 서비스하려면 돈듬.(복잡)
편리한 방법은 cdn (content delivery network) 을 통해 자기들의 서버에 파일을 보관해놓고
우리는 script src를 통해서 가져갈 수 있도록 방식이 있다. 사용료도 자기들이 내준다.
google cdn
>jQuery
3.x 스니펫:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
> 3.html의 colors.js 위에 붙여넣기.
구글에서 제공한 j Qeury 라이브러리의 주소가 적혀있다.
직접 사용설명서를 보도록한다.
처리해야할 태그들이 있을 때 보통 반복문을 통해서 처리를 한다.
> jquery를 이용하면 반복문을 쓰지 않아도 된다.
colors.js 파일의 반복문을 수정한다.
* control /를 하면 주석처리됨.
이 웹페이지의 모든 a태그를 jquery로 제어하겠다는 의미.
검색 : jquery css
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;
// }
$('a').css('color',color);
}
}
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);
}
}
jquery는 코드를 더욱 쉽고 직관적으로 해준다.
jquery는 새로운 언어가 아닌 자바스크립트를 이용해서 우리 대신 css라는 함수를 jquery가 만들어 준것이다.
그 함수가 내부적으로 작업을 대신 처리해주고 있는것이다.
자바스크립트는 오늘날 가장 빠른 속도로 성장하고 있는 언어중 하나이다.
수많은 라이브러리들이 쏟아지고 있다.
문법을 잘 아는 것도 중요하지만 어떤 라이브러리가 서로 생겼는가 ,
있는가를 많이알 수록 많은일을 할 수있는 가능성을 갖게 된다.
모든 페이지에 jquery 스크립트를 붙여넣기한다.
이제 페이지마다 잘 동작한다.
파일로 로직을 쪼갰을 때 자기가 프로그램을 짤 때도 도움이 되지만 다른사람이 짠,
정리한 것을 내 프로젝트로 가져오는데도 중요한 것이라는걸 알 수있다.
그리고 jquery 라이브러리에 대해서 알아보았다.
36. UI vs API
UI(user interface) : 사용자가 시스템을 제어하기 위해서 사용하는 조작장치
API(application programming interface) :
경고창은 우리가 만들기도 안만들기도 했다.
경고창이 표시되는 시간이나 텍스트는 우리의 의도가 반영된 우리가 만든 것이다.
경고창의 기능이나 모양 등은 설명되어있지 않다.
웹브라우저를 만드는 사람들이 경고창의 기능을 미리 만들어 두었다가
우리가 alert라는 함수를 실행하면 경고창을 띄워주겠다고 자바스크립트의 사용 설명서를 통해서 약속된것이다.
함수 alert는 경고창을 실행하는 조작장치인것이다.
이렇게 애플리케이션을 만들기위해서 프로그래밍을 할 때 사용하는 조작 장치들
api라고 부른다. alert가 바로 api이다.
자바스크립트에만 국한된 것이아닌 모든 프로그래밍 언어에 공통적으로 적용되는 얘기이다.
모든 애플리케이션들은 API를 프로그래밍적으로, 즉 순서대로 실행하는 것을 통해서 만들어진다.
API와 순서는 단어와 문법처럼, 또 부품과 그 부품의 결합 방법처럼 서로 뗄수 없는관계이다.
프로그래머가 되기전까지 여러분은 평생 UI만 사용했을 것이다.
이제 우리는 API도 사용하는 프로그래머가 된것이다.
여러분은 자바스크립트라는 접착제로 이 API들을 결합해서 (응용해서)
세상의 누구도 만들어 본적이없는 응용 프로그램을 만들수있게 된것이다.
37. 수업을 마치며
이제 여러분에게 필요한것은 공부보다 실습이다.
실습보다는 자신의 프로젝트를 시작하라.
지금 이 순간이 여러분이 프로젝트를 시작할 때이다.
시간이 갈수록 머릿속이 복잡해질것이다.
프로젝트를 시작하기전에
모든 개념을 총동원하려고 하지 말아라.
필수불가결한 최소한의 도구들로 문제를 해결하려고 시도해보아라.
최소한의 도구는 순서에따라 실행되어야하는 명령들이 실행되도록 하는것.
객체도,함수,반복문도 필요없다.
순서대로 실행된다는것만으로도 프로그래밍은 충분히 혁명적이다.
최소한의 지식으로 현실의문제를 해결하려고 노력해보아라.
그러다보면 그것만으로 도저히 해결할 수없는 순간이 오는데 그때 주의깊게
반복문,조건문,함수,객체를 신중히 도입하며 개념들에 익숙해지면 유창해진다.
그러다가 다시 한계가오면 실습을 멈추고 공부를 할 때이다.
검색어 추천
웹페이지에있는 어떤 태그를 삭제하고 싶거나 어떤 태그에 자식태그를 추가하고싶다면
document 객체를 좀더 자세히 살펴보아라
여러분이 필요한 메서드가 그 안에 포함되어 있을 것이다.
만약에 document객체에서도 찾을 수 없다면 DOM(Document Object Model)으로 수색범위를 넓혀보아라.
document객체는 DOM 객체의 일부이다.
또 웹페이지가 아니라 웹브라우저 자체를 제어해야한다면 window 객체를 조사해보아라.
이를테면 현재 열려있는 웹페이지 주소가 뭔지 알아내야 될수도있고
새창을 열어야 될 수도 있고 또 웹브라우저의 화면크기를 자바스크립트를 통해 알아야한다면
윈도우 객체에 속해있는 프로퍼티나 메소드가 여러분을 도울 수 있을것이다.
또 웹페이지를 리로드하지 않고 정보를 변경하고 싶다면 ajax가 필요할것이다.
현대적인 웹앱을 만드는 데 필수적인 테크닉이다.
또 웹페이지가 리로드 되어도 현재 상태를 유지하고 싶다면
cookie를 배워라. 쿠키를 통해 사용자를 위한 개인화된 서비스를 제공할 수있다.
인터넷이 끊겨도 동작하는 웹페이지를 만들고 싶다면
offline web application을 찾아보라.
화상통신 웹앱을 만들고 싶다면 webRTC라는 것이 있다.
사용자의 음성을 인식하고 음성으로 정보를 전달하고 싶다면
speech로 시작하는 api를 살펴보라.
3차원 그래픽으로 게임과 같은 것을 만들고싶다면
webGL을 살펴보라.
가상현실에 관심시 많으면 webVR이라는 것도 있다.
롱테이크버전
음악을 들으며 배속으로 보면 덜 지루하다.
https://youtu.be/bmdPy3pP-ts?si=edKhlztW_qZ90Aub
프로그래밍/생활코딩
생활코딩 WEB2-JAVASCRIPT 필기
반응형
반응형