-
JavaScript 1일차 (생활코딩 WEB2)프로그래밍 언어/JavaScript 2021. 9. 1. 22:14
HTML은 정적
동적으로 사용자와 상호작용 하기 위해 태어난 것이 자바스크립트
HTML을 통해 웹페이지를 만들고
웹페이지를 JS를 이용해 사용자와 상호작용 할 수 있도록 만듦
1. 수업의 목적
야간모드/주간모드를 버튼을 통해 바꾸는 기능
검사-> Elements(태그)를 보면
버튼을 누를 때마다 <body>가 바뀌는 것을 알 수 있음
버튼은 input 에 속성으로 button을 주고 value는 버튼의 이름
ex) input type="button" value="night"
onclick의 속성으로는 JS가 와야 함
onclick="
document.querySelector('body') : document 문서에서 body 태그를 선택하는 코드
.style.backgroundColor='black';" : 스타일 속성 값으로 백그라운드를 블랙으로 설정
->night 버튼을 누르면 body 태그의 속성이 바뀜
style의 속성으로는 CSS가 와야 함
2. HTML과 JS의 만남1 (script 태그)
JS는 HTML 위에서 동작하는 언어
완전히 다른 문법을 어떻게 껴넣을 것인가
New File - ex1.html - html 기본 코드 입력
HTML의 코드로 JS가 시작됨을 알려줘야 함
<script>
document.write('hello world');
</script>
화면에 hello world가 출력됨
3. HTML과 JS의 만남 2 (이벤트)
JS가 사용자와 상호작용 하는 데에 핵심적인 요소
버튼 만들기
<input type="button" value="hi"
hi 버튼을 클릭했을 때 경고창이 뜨게 만들기
(javascript alert 검색)
onclick="alert('hi')">
onclick의 속성은 JS
버튼을 클릭했을 때 기억하고 있던 코드를 JS 문법에 따라 해석해서 웹브라우저가 동작함(이벤트)
onclick, onchange, onkeydown 등을 event라고 부름
4. HTML과 JS의 만남 3 (콘솔)
검사-> Console 파일을 만들지 않고도 JS 즉석에서 사용 가능
문자의 개수를 알려주는 명령 '~'.length
검사 창에서 esc 누르면 elements 밑에 콘솔이 뜸
5. 데이터타입-문자열과 숫자
'javascript data type' 검색
이 시간에는 number, string에 대해 알아볼 것
검사 -> 콘솔
계산기처럼 1+1 해도 2가 뜸
+ : 왼쪽 값과 오른쪽 값을 더해서 하나의 값을 만든다 = 이항 연산자, 산술 연산자
-, *, / 도 마찬가지
문자열은 "Hello world" 따옴표를 사용하면 됨
'javascript string' 검색
여러 가지 methods도 존재함
1+1 은 2가 나오지만 (숫자)
"1"+"1"은 "11"이 나옴 (문자)
6. 변수와 대입 연산자
검사-> 콘솔
= : 대입 연산자
변수를 사용할 때는 가급적 var을 앞에 붙이기
7. 웹브라우저 제어
CSS의 중요한 문법들과 JS를 이용해서 제어하고자 하는 태그를 선택하는 방법이 중요함
8. CSS 기초
(생각 안 나서.. 복습하는 느낌으로..)style 속성(property) 안에는 CSS 가 온다
div : 무색, 무취 태그 / block level element
span : 무색, 무취 태그 / inline element
아이고 안 봐도 되는 내용이었네9. 제어할 태그 선택하기
'javascript select tag by css selector' 검색
'javascript element style' 검색
'javascript style background color' 검색
<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';
">10. 프로그램, 프로그래밍, 프로그래머
HTML과 JS는 컴퓨터 언어지만, JS는 컴퓨터 언어이면서 컴퓨터 프로그래밍 언어
HTML은 웹페이지를 묘사하는 목적이기 때문에 시간 순서 X
JS는 사용자와 상호작용하기 위한 목적이기 때문에 시간 순서에 따라
웹브라우저의 기능이 실행되어야 하기 때문에 프로그램이라는 형태를 띰
지금까지 여러 개의 명령어를 시간 순서에 따라 실행하는 방법을 알아봄
11. 조건문 예고
조건에 따라서 다른 순서의 기능들이 실행되는 것
토글 버튼 만들기 (if~else)
문법을 쓸 줄 안다면 패스하기, 하지만 나는 입문자..^0^12. 비교 연산자와 Boolean 데이터 타입
new file - ex4 - html 기본 코드
=== : 비교 연산자, 이항 연산자
비교 연산자는 좌항과 우항의 관계에 따라서 true 혹은 false가 나옴
true와 false를 묶어서 Boolean이라고 부름
13. 조건문
new file - ex5.html - html 기본 코드
<h2>IF-true</h2>
<script>
document.write("1<br>");
if(true){
document.write("2<br>");
} else{
document.write("3<br>");
}
document.write("4<br>");
</script>
<h2>IF-false</h2>
<script>
document.write("1<br>");
if(false){
document.write("2<br>");
} else{
document.write("3<br>");
}
document.write("4<br>");
</script>
위 코드의 결과 14. 조건문의 활용
'javascript element get value' 검색
<input id="night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value === 'night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#night_day').value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#night_day').value = 'night';
}
">만약 value가 night라면, 검은색 배경에 흰색 글씨, value를 day로 바꿔라
만약 value가 night가 아니라면, 흰색 배경에 검은색 글씨, value를 night로 바꿔라
15. 리팩토링(refactoring)
코딩을 하다 보면 비효율적인 부분이 생기기 마련
-> 효율적으로 바꾸는 과정을 리팩토링
<input this 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';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
}
">위와 같은 기능을 하는 코드지만, 중복된 코드를 줄임
16. 배열
반복문에서 배열이 왜 필요한지 이해할 수 있음
배열은 [여기에 여러 개의 값을 적을 수 있음]
'javascript array count' 검색
'javascript array' 검색
concat, pop, push 등 데이터를 넣고 뺄 수 있는 기능이 많이 나옴
17. 반복문
반복문의 기본 문법 while(true/false){}
<script>
document.write('<li>1</li>');
var i = 0;
while(i < 3){
document.write('<li>2</li>');
document.write('<li>3</li>');
i = i + 1;
}
document.write('<li>4</li>');
</script>18. 배열과 반복문
<body>
<h1>Loop & Array</h1>
<script>
var coworkers = ['egoing','leezche','duru','taeho','graphittie'];
</script>
<h2>Co workers</h2>
<ul>
<script>
var i = 0;
while(i < coworkers.length){
document.write('<li><a href="http://a.com/'+coworkers[i]+'">'+coworkers[i]+'</a></li>');
i = i + 1;
}
</script>
</ul>
</body>'프로그래밍 언어 > JavaScript' 카테고리의 다른 글
Ajax (생활코딩 WEB2 - JavaScript) (0) 2021.09.07 JavaScript 까먹은 거 다시 기록 (생활코딩 WEB2) (0) 2021.09.06 Javascript 2일차 (생활코딩 WEB2) (0) 2021.09.03