출처 : 생활코딩 JavaScript
Javascript
HTMl 언어 : 프로그래밍 언어 X, 화면에 바로 띄워지기에 시간의 순서가 필요하지 않음.
Javascript 언어 : 프로그래밍 언어임. 시간의 순서에 따라 고안되어야 함. 동적이라는 특징을 갖고 있음.
HTML과 JS의 만남 - script 태그
<script>
document.write(1+1);
</script>위의 코드 값으로 화면에 2가 입력이 된다. 자동으로 계산이 됌.
HTML과 JS의 만남 - Event(사건)
event(사건) : 웹브라우저 내에서 일어나는 일들 ex) onclick, onchange, onkeydown
ex)여러 이벤트 만들기
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down')">onclick, onchange, onkeydown : 이 속성들의 속성은 반드시 js가 나와야 한다. onclick이 위치한 태그를 클릭했을 때 js코드를 js문법에 따라 적혀있는데로 웹브라우저가 동작할 것.
key를 눌렀을 때 event를 발생시키고 싶은 경우
-> Javascript key down event attribute 라고 검색 가능
HTML과 JS의 만남 - Console
오른쪽 커서 - 검사 - 콘솔 이용가능
console.length : 문자의 갯수 알려주는 명령어
alert('문자'.length)
라고 콘솔 내에 적으면 자동 계산된다.
Data types - Strings and numbers
콘솔 내에서 숫자는 자동으로 계산이 된다.
산술 연산자 표기 : - + * /
string 문자열 -> javascript string 이라고 검색 가능.
ex)
'hello world'.length
'hello workd'.toUpperCase()1 : 숫자 "1" : 문자열 임 주의!
1+1=2 "1" + "1" = 11 임.
데이터 타입 정확히 표현할 것!
Variables(변수)와 Assignment Operators(대입연산자)
i=1
i는 변수(상수constant와 반대), =는 대입연산자를 의미한다.
응용
ex) night 버튼과 day버튼 만들기
<body>
<input type="button" value="night" onclick="">onclick 내에 js코드를 넣어야함. body태그의 스타일 속성으로, 프로그래밍적으로, 상호작용에 의해 넣으려고 함.
js의 문법에 따라서 웹브라우저에게 이 body태그를 선택하도록 해야함.
즉 js에서 "css의 선택자"를 이용하여 tag를 선택하고 싶음.
-> javascript select tag by css selector 검색 가능
-> .querySelector()
style을 통해 배경색변화를 주고 싶을 때
-> javascript element style 검색!
->.style
javascript script background color
->.backgroundColor=""2
<input type="button" value="night" onclick="document.querySelector('body').style.backgroudColor='black'" >비교연산자(Comparison Operator)와 블리언(Boolean)
<script>
document.write(1===1);
</script>위의 코드로 "true" 값이 출력 된다. ===는 비교연산자 혹은 2항연산자(좌항, 우항이 결합하여 결과를 만든다) 로 부른다.
Boolean : true 또는 false 로만 이루어진 data type
<h3>1&1t;2</h3>
<script>
document.write(1<2);
</script>1<2
true
라고 화면상 출력이 된다.
> : > (greater than)
조건문
조건문 : 조건에 따라 다른 순서의 기능들이 실행되도록 하는 것
if(true or false 즉 bulleon data type이 나온다.){a} else {b}
블리언 값에 따라 실행되는 값이 달라진다.
ex) day 버튼을 클릭하면 night 야간모드로 바뀌게 하고 싶을 경우
<input id = "night_day" type="button" value="night" onclick="
if(document.querySelector('#night_day').value==='night'){
document.querySelector('body').style.backgroudColor='black'
document.querySelector('body').style.color='white'
document.querySelector('body').value='day'} else {document.querySelector('body').style.backgroudColor='white'
document.querySelector('body').style.color='black'
document.querySelector('body').value='night'}">value 값 찾는 법 -> javascript get value element 검색
리팩토링(Refactoring) -중복의 제거
Refactoring : 코딩 자체를 효율적으로 만들어서 그 코드의 가독성을 높이고 유지보수를 하기 편리하게 만들고 중복된 코드를 낮추고 코드를 다시 개선하는 작업
ex) document.querySelector('#night_day').value 를 this로 교체할 수 있음.
또한 변수를 이용하여 더 간편히 줄일 수 있음.
var target = document.querySelector('body')
var target = document.querySelector('body')
<input type="button" value="night" onclick="
if(this.value==='night'){
target.style.backgroudColor='black'
target.style.color='white'
this.value='day'} else {target.style.backgroudColor='white'
target.style.color='black'
this.value='night'}">배열(array)
배열(array) : 데이터가 많아짐에 따라 많은 데이터를 그냥 둘 수 없기 때문에 그 데이터중에서 서로 연관된 데이터를 잘 정리정돈해서 담아두는 일종의 수납상자
배열의 문법(syntax)
<script>
var coworkers=["egoing", "hydduru"]
</script>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>배열이 몇개인지 알고 싶을 때 -> javascript array count 검색
document.write(coworkers.length);배열 내 데이터 추가하고 싶을 때 -> javascript array count 검색
coworkers.push("hani")반복문(loop)
ex) list 1~4중 2,3을 3번 반복 시키고 싶을 때
<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>
배열과 반복문
<script>
var coworkers=['egoing','leezche','duro','taeho'];
</script>
<ul>
<script>
var i = 0
while(i<4){ document.write('<li>'+coworkers[i]+'</li>')}
i=i+1
</script>
</ul>
ex) 목록 안에 링크를 추가하고 싶을 때
while(i<4){ document.write('<li><a href = "http://a.com/'
+coworkers[i]+'">+coworkers[i]+'</a></li>')}write()내에 총 5개의 데이터가 각각 +로 연결되어 있음.
'+coworkers[i]+' -> 문자로 적어주어야 하기 때문에 ''를 붙힘.
자바스크립트에서 string 취급을 위해서는 큰따옴표"" 혹은 작은따옴표'' 쓴다는 것 기억할 것!
배열과 반복문의 활용
ex) 링크들 야간모드일 때 더 밝게 해주기
모든 태그값을 선택하는 문법 찾기 -> javascript get element by css selector multiple
콘솔 내에
var alist = document.querySelectorAll('a');
console.log(alist.length)
cosnsole.log(alist[0])이라고 적으면 각각 결과가 나온다.
즉 if 문 내에 다음의 코드를 추가한다.
var alist = document.querySelectorAll('a');
i=0
while(i<alist.length){
alist[i].style.color='powderblue';
i = i+1}추가로 알아낸 정보
ex) title 제목에 따라 링크 색 변화를 주고 싶을 때 -> 조건이 다양하므로 else if를 사용할 수 있다.
var alist = document.querySelectorAll('a')
if (document.title === "My_Coding_Diary")
{alist[1].style.color = 'black'}
else if (documenet.title === "Programming")
{alist[2].style.color = 'black'}
else if (documenet.title === "Diary")
{alist[2].style.color = 'black'}-> if 내에 if를 넣을 수 있다!
