JS
사용자와 상호작용하는 언어!
html을 제어하는 언어!
웹페이지를 훨씬 더 동적으로 만들어주는 언어!
프로그래밍 언어!
html 사용설명서
:onclick이라는 속성의 값으로는 javascript가 와야한다!
:style이라는 속성의 값으로는 css가 와야한다!
ㅡ
html 과 javascript가 만나는 방법
웹브라우저한테 html의 코드로 “지금부터 자바스크립트가 시작됩니다!!”라고 알려줘야함
<script>
document.write('hello world');
</script>html 과 javascript가 만나는 방법2
event
:자바스크립트가 사용자와 상호작용하는데 핵심적인 역할을 함
onclick
이벤트가 일어났을 때 어떠한 js가 실행되도록 하는 것이 on으로 시작하는 속성임!!
onclick이라는 속성의 값으로는 javascript가 와야한다!!
hi 버튼 클릭시 경고창 뜨게하기
<input type="button" value="hi" onclick="alert(hi)">검색 “javascript alert”
검색 “javascript key down event attribute”
html 과 javascript가 만나는 방법3
콘솔 (console)
-파일을 만들지 않고도 자바스크립트 코드를 즉석에서 실행할 수 있음
-웹페이지 -> 마우스 오른쪽 -> 검사 -Console
-간단한 데이터처리 가능
-shift+enter :실행되지 않고 줄바꿈 가능
JS 데이터 타입
검색 “javascript data type”
자바스크립트라는 컴퓨터 언어에는 6개의 데이터 타입이 있음
:boolean, null, undefined, number, biglnt, string, symbol
Number 숫자
:그냥 숫자를 적으면 된다
:이항연산자 & 산술연산자
String 문자
:‘ ’ 또는 “ " 로 이루어져 있다
검색”javascript string” (문자열을 처리할 때 사용할 수 있는 명령들)
변수와 대입 연산자
변수 (x,y,,,,)
: 대입연사자를 통해 값이 바뀔 수 있다
: 변수를 사용할 때는 앞에 var이라는 키워드 써주기
var name = ‘leezche’대입연산자
(=)
:오른쪽 항의 값을 왼쪽의 변수에 대입한다
:좌항과 우항의 값을 결합해서 우항의 값을 만들어낸다
조건문
조건에 따라 다른 순서의 기능들이 실행되게 하는 것
01) 비교 연산자 (comparison operator)
=== 동등 비교 연산자
: 연산자의 왼쪽 값과 오른쪽값이 동등한지 비교
: 좌항과 우항의 관계에 따라서 true / false 둘 중 하나의 값을 만들어 내는 연산자
02) 불리언(boolean)
: 비교 연산자를 통해 만들어진 새로운 데이터 타입
: true 또는 false (단 2개)
if…else…조건문
<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';
}
">< = < (_less than)리팩토링 (refactoring)
동작하는 것은 그대로 두고 코드 자체를 효율적으로 만들어서,
그 코드의 가독성을 높이고, 유지보수를 하기 편리하게 만들고, 중복된 코드를 줄이는 방향으로 코드를 개선하는 작업!
틈틈이 리팩토링을 해야 좋은 프로그램을 만들 수 있다!!!!
해야되는 것 2가지
1너무 긴 코드는 짧게 해주기; this 키워드 사용
document.querySelector('#night_day') 는 계속 나오는 선택자인데,
onclick과 같은 event 가 속해 있는 input태그 자기자신이니까 this로 사용가능!!
2중복되는 것은 변수의 활용으로 짧게 해주거나 없애기 ; var target 변수 사용
document.querySelector('body’)가 계속 중복해서 나오는 코드인데,
input 태그 안에 변수를 지정해줌으로써 간단하게 표현해 줄 수 있다.
배열 (array)
데이터 중에 서로 연관된 데이터를 잘 정리정돈해서 담아두는 일종의 수납상자!!
대괄호 사용 ["a", "b"]
<script>
var coworkers = ["ABC","DEF"];
</script>
<script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
<script>
document.write(coworkers.length);
</script>반복문 (loop)
반복문의 기본 문법
while( ){ 반복할 코드 입력 }
while문의 뒤에 따라오는 괄호 안에도 if문과 동일하게 불리언 데이터 타입(true 또는 false) 이 온다.
-while 문의 괄호 안이 true인 동안은 중괄호 안에 있는 코드들이 반복적으로 실행!_괄호 안이 false가 될때까지
-false가 되면 그때써야 while 문 바깥쪽에 있는 코드 실행!
키워드 while
<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 i = 0;
while(i < coworkers.length){
document.write('<li>'+coworkers[i]+'</li>');
i = i + 1;
}
</script> <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';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'powderblue';
i = i+ 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i = i+ 1;
}
}
">