1. 수업 소개
HTML 정보를 표현하고 주고받을 수 있음
사용자와 상호작용하는 웹페이지를 만들기 위해
동적인 JavaScript 만들어짐
Html 을 이용해 웹페이지를 만들고 + 그 위에 JavaScript 를 사용자와 상호기능을 추가.
Html의 정보 + JavaScript의 기능 을 갖추게됨.
Html - 멈춰있는 이미지
JavaScript - 이미지를 움직이게 하는 마법
2. 수업 목적
JavaScript -> 사용자와 상호작용하는 언어
Web brower -> 는 한번 사용되면 본인을 바꾸지 않는다.
CSS - 디자인에 최적화된 언어
-> JavaScript 가 Html을 제어하는 것 / 다이나믹하게 Web page에 부여하는 것
3. Html과 JS의 만남 : Script 태그
Html 정적 -> 1+1
JavaScript -> 계산을 함. -> 2
<!DOCTYPE html>
<html>
<head>
<meta charse="utf-8"
<title></tiltle>
</head>
<body>
<h1>JavaScript</h1>
<script>
document.write(1+1);
</script>
<h1>html</h1>
1+1
</body>
</html>document.wirte : 어떤 글씨 출력할 때
ㅌ
4. HTML과 JS의 만남 : 이벤트
JS가 사용자와 상호작용하는데 핵심적임
<!--DOCTYPE html-->
<html>
<head>
<meta charse="utf-8">
<title></tiltle>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchang="alert('changed')">
<input type="text" onkeydown="aler('key down!')">
</body>
</html>
</html>
Onclick 속성으로는 JS가 와야함.
웹브라우저에서 일어나는 것이 = 이벤트
ex) Onclick, onchange, onkeydown
on으로 시작하는 속성들 = 이벤트, event
5. HTML과 JS의 만남 : 콘솔
f12 or 검사 눌러서 콘솔에서 JS 바로 실행할 수 있음.
콘솔에서
alert(' ~~~~~~~~~'.lenth) 엔터하면 몇 글자인지 나옴
즉석에서 실행 / 실용. 이미 만들어진 웹사이트에 빨리, 효율적으로 현실 문제를 후딱 해결할 수 있음.
웹페이지를 대상으로 실행되게 된다.
*팁 : 검사 (or f12) 누르고 Elements 떴을 때 Esc 눌러주면 아래에 콘솔이 뜸
콘솔에 위쪽 화살표 누르면 반복됨.
6. 데이터 타입 (문자열과 숫자)
데이터 타입 = 자료형
JS data type goole 해보면 많이 나옴
Boolena, Null, Undefined, Number, String(문자열), Symbol
(객체)
<숫자>
1+1 더하기 2
2-1 빼기 1
2*4 곱하기 8
6/2 나누기 3
<문자>
"따옴표로 시작해서 따옴표로 끝내기"
작은따옴표, 큰따옴표 상관 없 , 세트만 맞춰주기
"Hello world".length
11 (글자수-빈칸도 포함)
JAvaScript string -> Google it
MDN web docs 등등 자료 많음.
'hello world'.toUpperCase()
"HELLO WORLD"
'hello world'.indexOf('O')
-1 (O가 없음)
'hello world'.indexOf('o')
4 (0부터 세서 5번째 자리에 o가 있음)
'Hello world'.indexOf('world')
6
' hello '
" hello "
' hello '.trim()
"hello"
1 : 숫자
"1" : 문자열
1+1
2
"1"+"1"
11 (주의 **)
7. 변수와 대입연산자
x = 1;
1
y = 1;
1
x+y;
2
x=1000
1000
x+y;
1001
1=2;
VM25805:1 Uncaught SyntaxError: Invalid left-hand side in assignmentvariable 변수 변할 수 있는 값. ex) x, y
변할 수 없는 값 = 상수 (Constant) ( 1=2; ERROR)
= 대입연산자 라고함.
대입연산자의 특징 : 좌항과 우항을 결합해서 우항의 값을 만들어냄
* 변수를 쓰는 이유 ? 왜 쓰는가...
이유 많음.
겁 ~~~ 나 많은 글 수에서 "Hello"를 "Hi"로 바꾸고 싶을 경우 등등등.. ex) 1억개라면..-
-> 이럴 때 변수
name : 'hello';
alert("akdjfiajdlcnxlkfjads hello +"name" + lf asdfljsadf ladksjflweih hello qkgldsk uq+"name" + efgsdbnkguithreajds hello giqhe+"name" + ojkdfs uerhgfsd")
- > name : 안에 있는 "글자"로 모두 바뀌게 됨.
변수 사용 시에는 var 키워드 쓰기 없어도 괜찮은데 쓰는게 더 좋은 습관. (장, 단점 알기 전까지는 그냥 써)
8. 웹브라우저 제어
웹브라우저 제어하는 방법, 기술
HTML은 한번 수정하면 그대로~ 정적임. 그대로 스타일 유지. ->JS로 보완
9. CSS기초 (style속성)
<!DOCTYPE html>
<html>
<body>
<h1><a href="">WEB</a></h1>
<h2 style="color:powderblue; background-color:red;">JavaScript</h2>
<p>
ajkdfjdaaaaaaaaaadddddddddddddddkkkkkkkkkkkkkkkkkkke,dicccccccccccccccccccccccccccccclddddddddddddddddddddddddddddddddddds;ajkdfjdaaaaaaaaaadddddddddddddddkkkkkkkkkkkkkkkkkkkedddddddd
ddddddddddddddddkdj
</p>
</body>
</script>
</body>
</html>
html의 h2 태그에 style 을 넣음.
<h2 style="background-color:red; color:powderblue;">JavaScript</h2>
10. CSS기초(style 태그) - 선택자
h1 은 제목
div 란 어떠한 의미도 기능도 없음. 다만 css를 통해, or JS를 통해 정보 제어하고 싶을 때 감싸주는 무색무취의 태그
block tag -> 줄바꿈이 있음.
span 은 div랑 똑같음 근데 inline 인 점이 다름.
*style -> css 다~ 구분자.
<!DOCTYPE html>
<head>
<style>
.js{
font-weight:bold;
color:rebeccapurple;
}
</style>
</head>
<html>
<body>
<h1><a href="">WEB</a></h1>
<h2 style="color:powderblue; background-color:red;">JavaScript</h2>
<p>
<span class="js">JAvaScript</span> ajkdfjda<span class="js">JAvaScript</span>
aaaaaaaaadddddddddddddddkkkkkkkkkkkkkkkkkkke,diccccccccccccccccccccccccccccc
clddddddddddddddddddddddddddddddddddds;ajkdfjdaaaaaaaaaaddddddddddddddd
kkkkkkkkkkkkkkkkkkkedddddddddddddddddddd<span class="js">JAvaScript</span>ddddkdj
</p>
</body>
</script>
</body>
</html>
11. CSS기초 (선택자)
선택자를 잘 사용해야 효율적으로 쓸 수 있음.
Class = 무언가를 그룹화
ID = 무언가를 식별화 , 타겟팅
ex) 반. 1학년 1반, 2반
반 = class
학번 = id (중복없음. )
id = "first" 썼으면 그 html에서 first 를 더이상 쓰면 안됨 -> 규약 위반.
<!DOCTYPE html>
<head>
<style>
.js{
font-weight:bold;
color:rebeccapurple;
}
#first{
color:green;
}
span{
color:blue;
}
</style>
</head>
<html>
<body>
<h1><a href="">WEB</a></h1>
<h2 style="color:powderblue; background-color:red;">JavaScript</h2>
<p>
<span id ="first"class="js">JAvaScript</span>
ajkdfjda<span class="js">JAvaScript</span>
aa<span>LOLOLO</span>aaaaaaadddddddddddddddkkkkkkkkkkkkkkkkkkke,
diccccccccccccccccccccccccccccc
clddddddddddddddddddd<span>LOLOLO</span>dddddddddddddddds;a
jkdfjdaaaaaaaaaaddddddddddddddd
kkkkkkkkkkkkkkkkkkkedddddddddddddddddddd
<span class="js">JAvaScript</span>ddddkdj
</p>
</body>
</script>
</body>
</html>
calss = .
id = #
그냥
span ., # 둘다 없으면 모든 span을 말함.
그런데 <span id = "first" class="js"> 이런 경우, ID 선택자가 가장 우선 적용됨.
그다음 Class 선택자 가 적용됨.
Id > Class> nothing
12. 제어할 태그 선택하기
<body style="background-color:black;">
바디에 직접 넣거나
JS 사용해서
<h1><a href ="">WEB</a></h1>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor='black';
document.querySelector('body').style.color='white';
"> 요렇게 해도됨.
<!DOCTYPE html>
<head>
<style>
a{
text-decoration:none;
}
</style>
</head>
<html>
<body>
<h1><a href ="">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.backgroudColor='white';
document.querySelector('body').style.color='blue';
">
<div>Lulululalala</divf>
</body>
</script>
</body>
</html>
