[웹기초] 생활코딩 JavaScript 30 ~ JavaScript 35
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var black = { //객체 생성
"mother": "Walburga"
};
document.write("mother: " + black.mother + "<br>");
black.father = "Orion"; //객체에 정보 추가
black["second son"] = "Regulus"; //객체에 정보 추가(띄어쓰기)
document.write("father: " + black.father + "<br>");
document.write("the second son: " + black["second son"] + "<br>");
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var black = {
"mother": "Walburga",
"father": "Orion",
"the first son": "Sirius",
"the second son": "Regulus"
};
for (var key in black){ //key값: mother, father, second son 등등
document.write(key + ':' + black[key] + "<br>");
}
</script>
</body>
</html>
- 객체명[key] : property
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var black = {
"mother": "Walburga",
"father": "Orion",
"the first son": "Sirius",
"the second son": "Regulus"
};
black.showAll = function(){ //메소드 추가
for (var key in this){
document.write(key + ':' + this[key] + "<br>");
}
}
black.showAll();
</script>
</body>
</html>
- 객체에는 함수, 즉 메소드도 포함시킬 수 있다.
- 메소드도 객체의 일부이기 때문에 출력된다. 출력을 원하지 않는다면 for문 안에서 조건문으로 제한을 걸어야 한다.
서로 연관된 코드들을 여러 개의 파일로 쪼개기
black.html 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="color.js"></script> <!--파일을 분리-->
</head>
<body>
<h1>Black</h1>
<input id="night_day" type="button" value="night" onclick="nightday(this)">
<ol>
<script>
var black = ['Bellatrix', 'Andromeda', 'Narcissa', 'Sirius', 'Regulus'];
var i = 0;
while (i < black.length){
document.write('<li><a href="' + black[i] + '.html">' + black[i] + '</a></li>');
i += 1;
}
</script>
</ol>
</body>
</html>color.js 파일
var Link = {
setColor: function(color){
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color = color;
i += 1;
}
}
}
var Body = {
setColor: function(color){
document.querySelector('body').style.color = color;
},
setBackgroundColor: function(color){
document.querySelector('body').style.backgroundColor = color;
}
}
function nightday(self){
var target = document.querySelector('body');
if (self.value === 'night'){
Body.setBackgroundColor('black');
Body.setColor('white');
self.value = 'day';
Link.setColor('powderblue');
}
else {
Body.setBackgroundColor('white');
Body.setColor('black');
self.value = 'night';
Link.setColor('blue');
}
}이렇게 파일이 2개가 되면, 웹페이지에 로드할 때 웹 서버에 접속을 2번 하게 된다. 접속은 적을수록 좋으므로, 이는 웹 서버 입장에서 나쁜 일이다. 그럼에도 불구하고 캐시(cache) 때문에 이 방법이 더 효율적이다.
한 번 웹페이지에 다운로드된 파일은 웹브라우저가 보통 컴퓨터에 저장해놓는다. 그리고 다음에 접속할 때, 저장된 파일을 읽어서 네트워크를 통하지 않는다. 그러면 서버는 비용을 절감할 수 있고, 사용자는 네트워크 트래픽을 절감하고 속도를 높일 수도 있다.
library
- 프로그램에 필요한 부품이 되는, 정리정돈이 잘 된 소프트웨어
- jQuery: 유명한 라이브러리
- CDN: Content Delivery Network
Download jQuery | jQuery
link Downloading jQuery Compressed and uncompressed copies of jQuery files are available. The uncompressed file is best used during development or debugging; the compressed file saves bandwidth and improves performance in production. You can also download
jquery.com
black.html 파일
<head>
<meta charset="utf-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="color.js"></script>
</head>color.js 파일
var Link = {
setColor: function(color){
// var alist = document.querySelectorAll('a');
// var i = 0;
// while (i < alist.length){
// alist[i].style.color = color;
// i += 1;
// }
// }
$('a').css("color", color) //$('a'): 웹페이지의 모든 a태그를 jQuery로 제어하겠다.
}
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);
}
}
framework
- 만들고자 하는 것 중 공통적인 부분을 프레임워크가 만들고, 개성적인 것은 우리가 만드는 것
- 반제품