📄 Javascript
기본적으로 HTML 위에서 동작하는 언어
사용자의 조작에 반응해서,상호작용하기를 원함
웹 브라우저는 한번 만들어지면 스스로 바꿀 수 없다. Java는 그걸 가능하게 한다.
<body> 태그 안에, <script> 태그 안에서 움직인다
여기다가 1+1을 쓰면 2
그냥 <body>에서 1+1을 쓰면 1+1 이 나온다.
```java
document.write('hello world');onclick 의 속성값은 Java가 와야 함
<input type = "button" value = "night" onclick ="
document.queryselector('body').style.backgroundColor='black'
">
웹 페이지의 Console을 통해서 Java 동작 확인 가능
'helloworld'.length 11
' hello '.trim() 'hello'Program 순서를 만드는 행위 ming
순서를 만드는 사람 er
📋 조건문
비교연산자 ===
True , False Boolean
데이터타입
- Number
- String
- Boolean
True 면 A False 면 B
if( True / False ){ A } else { B }
<input id = "night_day" type = "button" value = "night" onclick ="
if( ){ }else{ }
">먼저, 현재 상태가 night인지, day인지 알아야 해서, id 설정한 다음에 콘솔에다가 value 써서 본다.
document.queryselector('#night_day').value 클릭하면 바뀌는 버튼 코드
<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';
}
">여기서,
document.querySelector('#night_day') 처럼 자기 자신을 가리킬 때, this로 변경 가능또,
var target = document.querySelector('body') 해두고 다 target 으로 변경 가능📦 배열
상자 만들기
<script>
var coworkers = ["egoing","leezche"]; 상자 이름 0번째 1번째
상자쓰기
document.write(coworkers[0]); egoing
document.write(coworkers[1]); leezche
document.write(coworkers.length); 2
coworkers.push('duru'); 뒤에 항목 추가⏲ 반복문
while( True / False ){ A }
False가 될 때까지 A 반복
var i = 0;
while(i<coworkers.length){
document.write('<li>'+coworkers[i]+</li>');
i = i+1;
}똑같이 적용해보면,
var alist = document.querySelectAll('a');
var i = 0;
while(i<alist.length){
alist[i].style.color = 'powderblue';
i = i+1;
}📻 함수
함수예고
이래서 함수가 필요하다
항목 추가 되어도 적용되는, 밤낮 모드 바뀌는 버튼 코드
<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 ;
}
}
">
1. 이 코드를 <script> 걸고 <head>안에 붙여 넣는다
2. 밑에 처럼 function 안에 집어 넣고 this를 self로 바꾼다.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 ;
}
}
}
3. <body>부분에는 다 지우고 함수이름(this)만 쓰면 사용 가능<input id = "night_day" type = "button" value = "night" onclick="
nightDayHandler(this);
"> 함수
함수 정의할 때,
function함수이름( ){함수내용}쓸 때,
함수이름( );
매개변수 & 인자
( Parameter & Argument )
입력값과 관련된 것들
function sum(left,right){
document.write(left+right+'<br>');
}
sum(2,3); left , right -> 매개 변수
2 , 3 -> 인자
인자를 받아서 함수 안으로 매개 해줘서 매개 변수
Return
출력값과 관련된 것들
function sum2(left,right){
return left+right;
}
document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+</div>');
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');함수 자체는 기능만 구현하게 해주는게
Return그래서 함수 하나하나 다 정의 안해도 다양한 모습으로 활용가능하게 해준다.
📂 객체
객체
서로 연관된 함수, 변수들을 그룹으로 묶은 것
BodySetBackgroundColor() 이라는 함수를,Body라는 객체를 이용해서
Body.setBackgroundColor() 로 변경가능 객체 메소드
document.querySelector('body')에서,
document는 querySelector('body')를 담는 객체
querySelector('body')는 document에 속한 함수(메소드) var coworkers = { } 배열은 대괄호 [ ] 객체는 중괄호 { }
객체 만들기
var coworkers = {
"programmer" : "egoing",
"designer" : "leezche"
};객체에 액세스하기
>coworkers.programmer -> egoing
document.write("programmer : "+coworkers.programmer+"<br>");
document.write("designer : "+coworkers.designer+"<br>");객체에 추가하기
coworkers.bookkeeper = "duru";
coworkers["data scientist"] = "taeho"; [ ]쓴거는 단순히 이름에 공백이 들어가면 안되기 때문에 쓴다.
배열에서 썼던 대괄호 사용
for 실행될 때마다 coworkers라는 객체 속의 key 값이 하나 하나 나온다.
for(var key in coworkers){
document.write(key+' : '+coworkers[key]+'<br>');
}coworkers programmer egoing
그룹(객체)key(이름)coworkers[key](내용)
프로퍼티 & 메소드
showAll이라는 함수를 객체에 추가
이 함수안에서는, coworkers라는 객체는 this로 바꿔 써도 된다.
(어떤 함수가 속해있는 객체를 가리킬 때 this를 쓴다)
<script>
>
coworkers.showAll = function(){
for(var key in coworkers){
document.write(key+' : '+coworkers[key]+'<br>');
}
}
>
coworkers.showAll();
>
</script>
객체에 소속된 함수 메소드
객체에 소속된 변수 프로퍼티
setColor, setbackgroundColor 두 함수를, Body라는 객체에 넣기
var Body = {
setColor : function(color){
document.querySelector('body').style.color = color;
},
setbackgroundColor:function(color){
document.querySelector('body').style.backgroundColor = color;
}
}🧾 파일로 만들기
객체보다 더 큰 정리정돈 도구?
모든 페이지에 공통적으로 들어가는 코드를 파일로 만들기
1. color.js 라는 파일을 만듬 2. <head> 안의 <script> 내용만 저 파일로 복사해서 붙여넣는다.(<script>태그는 복붙x) 3. 내용 다 지우고 <script>를 <script src = "color.js">로 바꾸면 끝
📊 다른 사람이 만든 소프트웨어 활용
라이브러리 & 프레임워크
library vs framework
library는 마음대로 당겨와서 쓰는 느낌.
framework는 공통적인 기본 뼈대가 잡혀 있는 것 안에 들어가서 덧붙여 작업하는 느낌(반제품)
jquery
javascript의 library.
직접 코딩했던 것보다 생산성 훨씬 높아짐.
<script src="http://jquery~"> 이렇게 그냥 붙여넣으면 끝
```
그러고 jquery 사용법만 좀 익히면 훨씬 편하고 생산적이다. 