js → user와의 상호작용 + html의 웹
Script 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
// 안의 내용이 js임을 html에게 알려주기
</script>
</body>
</html>Event
: html과 사용자의 상호작용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" value="hi" onclick="alert('bye')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down')">
<script>
</script>
</body>
</html> <input type="button" value="hi" onclick="alert('bye')">: event시 특정 js가 실행되도록
- event란>?
Console
: js를 chrome에서 바로 실행하게
→ 검사 → 개발자도구
- 실행의 유보 : 'shift' + 'enter'
데이터타입
String
유용한 js string method들~!
CSS
...
<head>
<style>
.js{
color:red;
}
#first{
color:green;
}
</style>
</head>- id: 식별 → 구분용, 중복이름 x
- class : grouping → 광범위
—> class 위에 id얹는게 효과적 → 우선순위는 id 가 더 높겠지 ? ?? ?
실습1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1 - Javascript</title>
</head>
<body>
<h1><a href="index.html"> WEB </a></h1>
<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';
">
<ol>
<li><a href="1.html"> 1. HTML </a></li>
<li><a href="1.html"> 2. CSS </a></li>
<li><a href="1.html"> 3. Javascript </a></li>
</ol>
<h2>JavaScript</h2>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/),[6] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.[7] JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.
</p>
</body>
</html>태그의 value값 알아내기
: id값이 night_day인 태그의 value값 알아내기
document.querySelector('#night_day').value<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB1 - Javascript</title>
</head>
<body>
<h1><a href="index.html"> WEB </a></h1>
<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';
}
">
<ol>
<li><a href="1.html"> 1. HTML </a></li>
<li><a href="1.html"> 2. CSS </a></li>
<li><a href="1.html"> 3. Javascript </a></li>
</ol>
<h2>JavaScript</h2>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/),[6] often abbreviated as JS, is a programming language that conforms to the ECMAScript specification.[7] JavaScript is high-level, often just-in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic typing, prototype-based object-orientation, and first-class functions.
</p>
</body>
</html>Refactoring
: 코드의 가독성높이고 중복 내용 없애는 등 코드의 효율성을 높이는 개선
-
this 의 사용
: 자기 자신을 가리킴으로
document.querySelector('#night_day').value -> this.value -
변수의 사용
: 중복 내용의 제거 가능
<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'; } ">
반복문
var links = document.querySelectorAll('a');
var i = 0;
while(i<links.length){
links[i].style.color = color;
i = i+1;
}함수
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
setColor('powderblue');
}
else{
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
setColor('blue');
}
}
</script>//호출시
nightDayHandler(this)객체
- object literal : {}
var coworkers = {
//key : value
"programmer" : "egoing",
"designer" : "leezche"
};
document.write("programmer : " + coworkers.programmer + "<br>");
document.write("designer : " + coworkers.designer + "<br>");
//추가하기
coworkers.bookkeeper = "duru";
document.write("bookkeeper : " + coworkers.bookkeeper + "<br>");
coworkers["data sceintist"] = "taeho";
document.write("data sceintist : " + coworkers["data sceintist"] + "<br>");- 객체 데이터 접근하기
for(var key in coworkers) {
document.write(key + ' : ' + coworkers[key] + '<br>');
}Property & Method
<script>
coworkers.showAll = function(){
for(var key in this) {
document.write(key + ' : ' + this[key] + '<br>');
}
</script>jQuery
따로 다운받지 않고 google CDN 이용
→ 헤더에 해당 스크립트 추가
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>문법
$('a').css('color', color);
//모든 a 태그 제어
//css : 선택 요소의 css 값 가져오거나 스타일 제어하는 함수
// .css( propertyName, value )'
Hongik CE