생활코딩 심화 1
JavaScript
: HTML로 구현된 웹페이지는 한번 출력되는 수정이 안됨.
사용자와 상호작용하기 위해 나온 언어가 JavaScript
*JavaScript는 HTML을 제어하는 언어
<HTML과 JS> : Script태그
<script>: html태그 중 하나로, 웹 브라우저에게 다른 언어가 나올 것이라고 알려주는 역할을 한다. 웹 브라우저는 script태그 안쪽의 내용을 JavaScript로 해석한다.
HTML과 JavaScript의 차이
<body> <h1>JavaScript</h1> <script> document.write(1+1); // JavaScript의 출력문 </script> 글자일 경우 " "안에 쓰기 <h1>html</h1> 1+1 </body>
실행결과 :
JavaScript
2
html
1+1
-> JavaScript는 동적인 언어로 입력된 값을 계산한 "결과"로 출력
<HTML과 JS> : 이벤트
<body> <input type="button" value="hi" onclick="alert('hi')"> <input type="text" onchange="alert('changed')"> <input type="text" onkeydown="alert('key down!')"> </body>
해석 :
<input>은 입력 폼을 만드는 태그, type을 버튼으로 하면 버튼이 생기고, text로 하면 글자를 입력할 수 있는 네모 칸이 생성됨. value는 버튼안의 글자를 의미하고, onclick은 버튼 클릭 시 동작하는 이벤트이다. onclick안의 속성은 js만 넣을 수 있다.네모창안에 글씨를 넣고 커서를 바깥으로 뺄 때 onchange가 동작 (✡︎네모 안의 내용이 최종적으로 달라진 상태로 커서를 빼야 onchange속성이 동작함. 글씨를 쓰거나 지우더라도 수정하기 전과 결과가 똑같아진 상태로 커서를 빠져나오면 onchange속성이 동작하지 X)onclick, onchange, onkeydown같은 것들을 event라 함 이런 것들을 이용해 사용자와 상호작용하는 코드를 만들 수 있음[참고]
JavaScript KeyDown Event Attribute ◦onKeyDown : 키를 눌렀을 때 이벤트 발생 -> 키를 입력하면 이벤트 발생 후 문자가 입력됨. ◦onKeyPress : onKeyDown과 같은 이벤트 ◦onKeyUp : 키를 눌렀다 놓았을 때 이벤트 발생 -> 키를 입력하면 문자 입력 후 이벤트가 발생. onKeyDown, onKeyUp은 Keycode값 onKeyPress는 ASCII값 ✥onKeyPress는 ASCII값이기 때문에 Shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다.
<HTML과 JS> : 콘솔
우클릭 -> 검사 -> Console에서 직접 JavaScript를 실행 가능
alert('내용'.length) -> alert는 알림창을 나타나게 하는 명령어 length는 글자 수를 세어 줌.현재 켜져 있는 웹 페이지를 대상으로 명령을 실행하기 때문에 나의 필요에 맞게 코드를 짠다던지 해서 엄청나게 응용가능하다. ex) 페이스북에서 당첨자 골라내기 검사페이지에서 esc누르면 console이랑 같이 띄울 수 있음
Datatype(자료형) - 문자열과 숫자
Data types
◎Primitives
•Boolean
•Null
•Undefined
•Number
•String
•Symbol
◎Object
- Number
alert(1) //
undefined //
alert(1+1) // 매번 alert("값")을 해줄 필요 없이
undefined // 콘솔에서 바로 연산이 가능
1+1
2 // + 는 앞의 값과 뒤의 값을 계산하는 연산자
2-1 -> 이항연산자
1 // + 는 산수를 하는 연산자이기도 함
2*4 // -> 산술연산자
8 // ex) +, -, *, /가 있음
6/3
2- String
"Hello world"
"Hello world"
'Hello world'
"Hello world" // 문자열은 나 ""로 묶어야함
'Hello world'.length
11 // length는 문자열의 길이
'Hello world'.toUpperCase() // toUpperCase()는 모든 글자를
"Hello world" 대문자로 바꿔줌
'Hello world'.indexOf('o')
4 // indexOf("찾는 문자열", 시작위치)
'Hello world'.indexOf('world') 문자열을 찾은 뒤 해당 위치를 알려줌
6
' hello '.trim() // trim : 공백을 없어준다
"hello" ☆ Datatype 주의!!
1 1 // 1은 Number "1" // "1"은 String(문자열) "1" 1+1 2 // 1+1은 숫자기 때문에 결과 값이 2 "1"+"1" // "1" + "1"은 문자열이기 때문에 11 "11"
변수와 대입 연산자
x = 1; 1 y = 1; 1 // x와 y를 변수(variable)라고 한다 x + y; 2 x = 1000; // = 는 대입연산자 1000 : = 오른쪽의 값을 왼쪽에 넣는다는 의미 x + y; 1001 1 ≠ 2; // 1은 변하지 않는 상수(constant)이고, 값을 Uncaught 넣을 수 없기 때문에 오류가 난다 ReferenceError
ex) 만약 문장안의 글자를 바꿀 때 일일이 바꾸면 비효율적임.
-> 변수에 값을 넣고 변경하면 개수가 많아도 일괄로 바꿀 수 O
+ 변수를 쓸 때 앞에 var 쓰기!(variable이란 의미)
웹 브라우저 제어
예제를 구현하기 위해 필요한 지식들
∙CSS의 속성
∙JavaScript의 문법
(제어하고자 하는 태그를 선택하는 방법)
CSS기초
1. Style 속성을 이용해서 CSS 사용하기
-> 3.html 파일을 Duplicate해서 ex3.html로 만들기
<body> ... <h2 style="color:powderblue">JavaScript</h2> ... // 여기에 쓰인 style은 Html태그의 속성, " "안의 내용은 CSS </body>
태그 옆에 쓰인 Style은 Html태그의 속성으로 뒤의 코드들이 CSS라는 것을 의미한다.
" " 안의 내용은 CSS의 속성(property)이고 style이 위치한 태그에 해당 속성들이 적용된다.
- CSS background color property 검색
<h2 style="background-color:coral;color:powderblue">...
// background-color : 배경색 지정- Style 태그를 이용해서 CSS 사용하기
글자를 키우고 싶다고 h태그를 여러 번 쓸 수는 없음
그래서 나온 것이<div>와<span>
<div>: 어떠한 의미도 기능도 X
CSS나 JavaScript에서 정보를 제어하기 위해 쓰는 태그
h1같은 태그처럼 자동 줄 바꿈이 되는 태그
<span> : div와 같은 기능의 태그지만 줄 바꿈이 되지 X
>
<div> block level element
---------------------------
<span> inline level element
<span style="font-weight:bold">JavaScript</span>
// 글자를 진하게 설정- CSS 선택자
<style>
.js{
fonts-weight: bold;
color: red;
}
#first{
color: green;
}
</style>
>```
<span id="first" class="js">JavaScript</span>
실행결과 :JavaScript
글자 색은 **초록색**으로 나온다! -> **선택자 우선순위** 때문[참고] 선택자의 우선순위
Id > Class > Tag •같은 종류의 선택자끼리는 가장 마지막에 오는 것이 적용된다. •class선택자가 id선택자보다 더 포괄적이다. 여러 개를 묶을 때는 class선택자를 사용하는 것이 좋다. •id선택자는 유일하다는 의미이므로 웹 페이지에 한번만 등장
속성을 원하는 곳에 정확하게 적용하려면 선택자를 잘 알아야 한다
- 제어할 태그 선택하기
<body>
...
<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';
">
...
</body>●document.querySelector('태그이름')은 선택자를 지정하는 것
ex)id 선택자면 document.querySelector('#id선택자이름')
●style은 css속성을 넣을 수 있게 하는 명령어
●JavaScript는 배경색을 설정하는 명령어가 backgroundColor
(CSS에서는 background-color)
실행결과:
night버튼->배경색 블랙, 글자색 화이트
day버튼 -> 배경색 화이트, 글자색 블랙
프로그램, 프로그래밍, 프로그래머
프로그램 : 시간의 순서에 따라서 실행되어야 할 기능을 프로그래밍 언어에 맞게 글로 적어두는 것
-> HTML은 웹페이지를 묘사하는 목적의 언어이기 때문에 시간순서에 따라서 무엇을 할 필요X /반면 JavaScript는 사용자와 상호작용하기 위해 고안된 언어이기 때문에 시간순서 매우 중요
조건문
1. 조건문 예고
조건문 : 프로그램이 하나의 흐름으로 가는 것이 아니라 조건에 따라서
다른 순서의 기능들이 실행되도록 하는 것.
-> 하나의버튼으로 전환할 수 있게 만들기 = 토글방식
+ toggle : 2가지 상태를 1개의 버튼으로 전환하는 방식- 비교 연산자와 Boolean 생활코딩
참고] JavaScript와 비교 연산자
● 엄격한 비교 : ===(일치 연산자), !==(불일치 연산자)
-> 피연산자들이 동일한 type과 내용을 갖고 있을 때만 true
● 관대한 비교(형-변환 비교) : ==(동등연산자), !==(부등연산자)
-> 비교하기 전에 피연산자들을 같은 자료형으로 바꾼다.
● 관계 요약 비교 : <=, >=
-> 피연산자들이 비교되기 전에 먼저 원시형으로 변환되고,
그 다음 동일한 형으로 변환
✣ !=와 !==는 달라야 true가 반환됨!
비교연산자는 좌항과 우항을 비교하므로 이항연산자console.log(1 == 1); // true console.log("1" == 1); // true console.log(1 === 1); // true console.log("1" === 1); // false
★ Boolean : true와 false 2가지 값을 가지는 자료형
참고] ==와 ===의 차이
특별한 경우가 아니면 되도록 ===을 쓰도록 권장0 == '' true 0 == '0' true 0 === '' 1 == true false true 0 === false 1 == True false Error 1 === true false == '0' false true NaN === NaN null == undefined false true null === undefined false == null false false false == undefined false
결과 값 예상해보기
<body> ... <h3>1===1</h3> <script> document.write(1===1); // JS의 화면출력 명령어 </script> <h3>1===2</h3> <script> document.write(1===2); </script> <h3>1<2</h3> // html에서 <는 태그기 때문에 <script> less than이라는 의미로 <라고 씀 document.write(1<2); </script> <h3>1>1</h3> // >는 greater than으로 > <script> document.write(1>1); </script> ... </body>
실행결과 :===
1===1
true
1===2
false
1<2
true
1>1
false
- 조건문
결과 값을 예상해보기
<body>
<h1>Conditional Statements</h1>
<h2>Program</h2>
<script>
document.write("1<br>"); // <br>하면 줄 바꿈
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");
</script>
<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-true</h2>
<script>
document.write("1<br>");
if(false){
document.write("2<br>");
} else{
document.write("3<br>");
}
document.write("4<br>");
</script>
</body>실행 결과 :
Conditional Statements
Program
1
2
3
4IF-true
1
2
4IF-true
1
3
4
if의 ()안에는 Boolean 데이터타입이 온다.
괄호안의 값이 true일 경우 : if의 { }안의 코드가 실행됨.
괄호안의 값이 false일 경우 : else의 { }안의 코드가 실행됨.- 조건문의 활용
<body>
...
<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';
}
">
</body>if의 조건문(night_day의 값이 Night)이 true면
if의 { }안의 내용이 실행됨.
<body> 태그의 배경을 검은색으로 설정
<body> 태그의 글자색을 흰색을 설정
id 선택자인 night_day(버튼)의 값을 Day로 설정
if의 조건문(night_day의 값이 Night)이 false면
else의 { }안의 내용이 실행됨.
<body>태그의 배경을 흰색으로 설정
<body>태그의 글자색을 검정색으로 설정
id 선택자인 night_day(버튼)의 값을 Night로 설정- 리팩토링 중복의 제거
Refactoring: 동작결과는 그대로 나오게 하되, 중복된 코드를 줄이는 등의 과정을 거쳐서코드의 가독성을 높이고 유지보수하기 쉽도록 코드를 개선하는 과정
변경 전:
<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';
}
">변경 후:
<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';
} else{
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'Night';
}
">document.querySelector('#night_day')는 자기자신이기 때문에
this로 대체 가능하다. 또한 자기 자신을 가리킨다면 굳이 id선택자로 구분해줄 필요가
없기 때문에 id선택자를 지워도 똑같이 작동한다.doument.querySelctor('body')는 target라는 변수에 넣어두면 한번에
수정할 수 있어서 효율적임.
개발자 지망생 서하입니당