[JavaScript 1] JS 기초
자바스크립트(JavaScript)는 HTML을 제어하며 사용자와 상호작용하는 언어이다.
이벤트(Event)와 상호작용
웹 브라우저에서 일어나는 사건을 ‘이벤트’라 부르는데, 이 이벤트의 종류에 따라 여러 속성을 적용할 수 있다.
onclick: 클릭할 시, onchange: 값이나 상태가 변화할 시, onkeydown: 자판이 눌릴 시 => alert(“”): 해당 문자열을 알림 형식으로 출력
예제: night/day 버튼 생성
<!--3.html-->
<!DOCTYPE HTML>
<html>
<head>
<title>WEB1 - JavaScript</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
</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';
">
<div id="grid">
<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>
<div id="article">
<h2>JavaScript란 무엇인가?</h2>
<p>JavaScript (/ˈdʒɑːvəskrɪpt/), often abbreviated as JS, is a programming language and core technology of the Web, alongside HTML and CSS.
99% of websites use JavaScript on the client side for webpage behavior.
Web browsers have a dedicated JavaScript engine that executes the client code.
These engines are also utilized in some servers and a variety of apps.
The most popular runtime system for non-browser usage is Node.js.
</p>
</div>
</div>
</body>
</html>
<!--style.css-->
a {
color: blue
}
h1 {
font-size: 120px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0px;
padding: 20px;
}
#grid ol {
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
}
body {
margin: 0;
}
#grid {
display: grid;
grid-template-columns: 150px 1fr;
}
#article {
padding-left: 25px;
}
@media (max-width: 800px) {
#grid {
display: block;
}
#grid ol {
border-right: none;
}
h1 {
border-bottom: none;
}
}
프로퍼티(property)
.으로 시작함
.length: 문자열의 길이, .toUpperCase(): 대문자 변환, .indexOf(): 찾고자 하는 값의 맨 처음 위치 반환, 없으면 -1 반환, .trim(): 문자열 공백 제거 후 출력
변수(variable)
변수는 var를 붙임으로써도 선언 가능. var를 붙이고 안붙이고는 차이가 있음
출처: [생활코딩!HTML+CSS+자바스크립트 JS편 Chapter 03~12]