html 안에서 javascript를 쓸 수 있게 해주는 태그
HTML 정적 JS 동적
1+1
<script>
document.write(1+1)
</script>
onclick 속성값은 JS로 와야한다
onchange
onkeydown 등
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')">
사이트 내에서 js를 이용 할 수 있다
1+1
1-1
1/1
1*1
'hello world'
"hello world"
"1"+"1"
x=1;
y=2;
x+y;
var name="eunryong"
"My name is"+name+""
true,false 로 이루어진 데이터타입
===,<,> 등 을 이용
<script>
document.write(1===1);
</script>
<script>
document.write(1===2);
</script>
<script>
document.write(1<1);
</script>
<script>
document.write(1<2);
</script>
document.querySelector('selectors');
document.querySelector('.selectors');
document.querySelector('#selectors');
<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';
">
if(){}
else{}
조건문 예시
<script>
document.write("1<br>");
if(){
document.write("2<br>");
} else {
document.write("3<br>");
}
document.write("4<br>");
</script>
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';
}
중복제거
<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';
}">
while(){}
예시
<h1>Loop</h1>
<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>
<h2>Syntax</h2>
<script>
var coworkers = ["eunryong","lee"];
</script>
<h2>get</h2>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
<h2>count</h2>
<script>
document.write(coworkers.length);
</script>
<h2>add</h2>
<script>
coworkers.push('minsu')
coworkers.push('sangho')
</script>
<h1>Loop & Array</h1>
<script>
var coworkers = ['eunryong','lee','minsu','sangho','kim','haha'];
</script>
<h2>Co workers</h2>
<ul>
<script>
var i = 0;
while(i < coworkers.length){
document.write('<li><a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>');
i = i + 1;
}
</script>
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
console.log(alist[i]);
alist[i].style.color = 'powderblue';
i = i + 1;
<ul>
<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 sum(left, right){
document.write(left+right+'<br>');
}
sum(2,3); // 5
sum(3,4); // 7
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>');
var coworkers = {
"programmer":"eunryong",
"designer":"lee"
};
document.write("programmer : "+coworkers.programmer+"<br>");
document.write("designer : "+coworkers.designer+"<br>");
coworkers.bookkeeper = "minsu";
document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
coworkers["data scientist"] = "sangho";
document.write("data scientist : "+coworkers["data scientist"]+"<br>");
<h2>Iterate</h2>
<script>
for(var key in coworkers){
document.write(key+' : '+coworkers[key]+'<br>');
}
</script>
<h2>Property & Method</h2>
<script>
coworkers.showAll = function(){
for(var key in this){
document.write(key+' : '+this[key]+'<br>');
}
}
coworkers.showAll();
</script>
js파일로 script내용을 옮김
<script src="***.js"></script>
코드 이용
라이브러리 = 부품 도서관 > 가져와서
jQuery cdn 코드 추가후 jQuery $ 사용
프레임워크 = 안에 들어가서
UI = user interface
API = application programming interface