javascript 기본 형식
<script>
<script>
<html코드 속성="
javascript a
javascript b">
</script><script> : javascript 선언
<script>안의 html 코드의 속성값으로 javascript 삽입
단순한 html 언어와의 차이점 : javascript는 동적인 구동이 가능함
- ex)1+1이 html에서 구동될 경우 단순히 1+1을 출력하지만 javascrip의 경우 1+1을 계산해서 출력
이벤트
사용자가 웹상에서 실행한 특정 행동
javascript는 이 이벤트에 의해 특정 작동을 하도록 함
ex)
<input type="button" value="hi" onclick="alert('hi')"><input type="text" onchange="alert('changed')"> : 텍스트 상자 안에 내용을 입력한 뒤 enter를 누르면 changed라는 내용의 알림창이 뜸
여기서 onclick,onchnag를 이벤트라고 일컫는다
<!DOCTYPE html>
<html>
<head>
<title>왁타버스</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><a href="index.html">왁타버스<img src="왁타버스.jpg" width="40px" height="37px"></a></h1>
<div class="main">
<div id="sidEBar">
<ol>
<li><a href="1.html">우왁굳</a></li>
<li><a href="2.html">이세계아이돌</a></li>
<li><a href="3.html">고정멤버</a></li>
</ol>
<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>
<div id="article">
<h2>왁타버스?</h2>
<img src="왁타버스.jpg" width="200"><br/>
우왁굳(Woowakgood) + 메타버스(Metaverse)의 합성어이다. 우왁굳이 기획한 세계관과 유튜브 채널이다.
</div>
</div>
</body>
</html>a {
color:black;
text-decoration: none;
}
h1{
font-size: 30pt;
text-align: center;
border-bottom: 2px solid rgb(0, 141, 98);
margin: 0px;
}
.main{
display: grid;
grid-template-columns: 200px 1fr ;
}
#sidEBar{
border-right: 2px solid rgb(0, 141, 98);
padding: 15px;
}
#grid ol{
margin: 0px;
padding-left: 20px;
}
#article{
padding: 10px;
margin-left: 30px;
}
@media(max-width:800px){
.main{
display: block;
}
#sidEBar{
border-right: none;
padding: 15px;
}
}이거 두개 합쳐서 적용시키면
하이퍼링크 텍스트만 색이 이상해진다... 왜 그런거지?
-> 아마 css에서 a의 글자색을 설정한 것과 js에서 글자색을 설정한 것이 충돌한 것 같은데 아직 해결책을 찾을 수 없다(있긴 한데 이해할 수가 없음...)좀 더 공부해보자
콘솔
웹페이지 개발자 도구의 console탭을 통해 웹페이지의 코드를 건드리지 않고 미리 코드를 실행해 볼 수 있다
Element탭에서 'esc'를 눌러서 켤 수 있음
.length : 문자열의 문자 갯수를 알려주는 코드, 문자열은 '.'앞에 위치
데이터타입
데이터 타입은
'혹은"로 둘러싸여 있으며 같은 따옴표끼리 사용해야한다문자
문자로 이루어진 열들
숫자
숫자로 이루어진 열들
이항연산자
우측의 요소를 좌측에 연산하도록 하는 연산자
산술연산자
+,-,*,/,\ : 더하기, 빼기, 곱하기, 나누기
변수와 대입연산자
x+y=1
x,y : 변수, 임의의 값을 저장하는 위치
=ㅁ(ㄷㅅㅊ, ㅊㄴㄴ) : 대입연산자, 좌항과 우항의 값을 결합해 우항의 값을 출력(좌항에 우항을 대입)
1 : 상수, 변하지 않는 값
비교연산자와 boolean
=== : 비교연산자 우항과 좌항의 값이 같으면 ture, 다르면 false를 출럭
boolean : 값을 참과 거짓(1과 0)만을 갖는 변수
조건문
변수의 값이 참,거짓임에 따라 시행여부가 결정되는 함수
if(boolean){
<code1>
}else{
<code2>
}만일 boolean값이 참이면 <code1>를 시행하고 거짓이면 <code2>를 시행 (else 함수가 없다면 참거짓에 따라<code1>를 시행하거나 시행하지 않고 끝난다)
