반응형
Q>
jQuery를 직접 자신의 HTML 파일에 추가해보고, 이를 이용해서 모든 h1 태그의 글자 크기를 바꾸는 코드를
작성해 봅시다.
A>
<!doctype html>
<html>
<head>
<title>WEB1 - Welcome</title>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="style.js"></script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="nightDatyHandler(this);">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<h2>WEB</h2>
<p>The World Wide Web (abbreviated WWW or the Web) is an information space where documents and other web resources are
identified by Uniform Resource Locators (URLs), interlinked by hypertext links, and can be accessed via the
Internet.[1] English scientist Tim Berners-Lee invented the World Wide Web in 1989. He wrote the first web browser
computer program in 1990 while employed at CERN in Switzerland.[2][3] The Web browser was released outside of CERN
in 1991, first to other research institutions starting in January 1991 and to the general public on the Internet in
August 1991.
</p>
</body>
</html>
var Links = {
setColor: function (color) {
$("a").css("color", color);
},
};
var Body = {
setColor: function (color) {
$("body").css("color", color);
},
setBackgroundColor: function (color) {
$("body").css("backgroundColor", color);
},
};
var Size = {
setSize: function (size) {
$("h1").css("font-size", size);
},
};
function nightDatyHandler(self) {
var target = document.querySelector("body");
if (self.value === "night") {
Body.setBackgroundColor("black");
Body.setColor("white");
Size.setSize("50px");
self.value = "day";
Links.setColor("powderblue");
} else {
Body.setBackgroundColor("white");
Body.setColor("black");
Size.setSize("50px");
self.value = "night";
Links.setColor("blue");
}
}
https://www.boostcourse.org/cs124
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org
반응형
'Python_WEB > JavaScript' 카테고리의 다른 글
| [부스트코스]Javascript 활용 퀴즈 4 (0) | 2021.01.21 |
|---|---|
| [부스트코스]Javascript 활용 퀴즈 3 (0) | 2021.01.21 |
| [부스트코스]Javascript 활용 퀴즈 1 (0) | 2021.01.20 |
| [부스트코스]Javascript 객체 퀴즈 6 (0) | 2021.01.20 |
| [부스트코스]Javascript 객체 퀴즈 5 (0) | 2021.01.20 |
