어제부터 javascript 공부를 시작했다.
egoing 님의 유튜브 무료 강의를 듣고 있는데
전에 html, css 강의와는 달리 포괄적인 개념에 대해 이해시키고
간단한 예제를 실행해보는 거라서
아마 htm, css 공부하던 것처럼 코드가 형태로 남을 것 같진 않다.
강의를 보고 내가 따로 써봐야 제대로 알게 될 것 같다.
어제는 딱히 남길 내용은 없었고
오늘은 비교연산자, boolean, 배열, 반복문 까지 했다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<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';
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;
}
}
">
<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>JavaScript</h2>
<p>
JavaScript (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
</p>
<input type="button" value="night" onclick="
if(this.value === 'night') {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
this.value = 'day';
}
else {document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
this.value = 'night';
}
">
</body>
</html>
위의 움짤처럼 버튼을 클릭하면 배경과 텍스트 색이 바뀌고
다시 클릭하면 바뀌는 스크립트를 넣었다.
음.. 그나마 간단하게 풀어서 얘기하자면
버튼에는
버튼 값이 night일 경우에 버튼을 클릭하면
target의 css 스타일 중
background-color가 black으로
color가 white로
버튼 값이 day일 경우에 버튼을 클릭하면
target의 css 스타일 중
background-color가 white로
color가 black으로
변하게 짠 스크립트인데
거기에 참, 거짓으로 나누는 boolean을 접목시켜서
if(this.value === 'night') { }
else { }
하는 스크립트를 넣었다.
아무래도 아직까진 내가 직접 뭘 생각하고 검색하고 짜본 단계가 아니라서
함부로 말하기 뭐하지만
확실히 배열, 반복문 같은 예제를 봤을 때,
제대로 코드를 짜두면 나중이 편하다는 걸 해보지 않아도 알 수 있었다...
근데 아마도 몇 번은 개고생 노가다를 해봐야 그제서야
저런 한 수 더 나아가서 하는 코딩의 필요성을 몸소 느끼고
열심히 할 것 같긴 하다ㅋㅋㅋㅋㅋㅋ
'Daily Study > Web Dev' 카테고리의 다른 글
| 033 css 연습 웬디 솔로 웹페이지 예제 만들기 (0) | 2021.03.30 |
|---|---|
| 032 javascript (2) 함수, 객체 (0) | 2021.03.25 |
| 030 html css 연습 (0) | 2021.03.23 |
| 029 웹페이지 예제 실습 (3) script 적용 및 호스팅 (0) | 2021.03.18 |
| 028 웹사이트 예제 실습 (2) css 적용 (0) | 2021.03.18 |
Daily Study/Web Dev
