JavaScript

선수 조건 : HTML에 대한 기본적인 지식

웹페이지에서 동적으로 사용자와 상호작용하기 위한 언어

1. Run JavaScript

1) (html이 아닌) JavaScript로 해석하라는 명령

<script> ~ </script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>1+1</title>
    </head>
    <body>
        <script>
            document.write('hello world');
            1+1;
        </script>
    </body>
</html>

위의 html언어의 1+1은 “1+1로”

아래의 JS언어의 1+1은 “2로” 출력한다

2) Event

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>1+1</title>
    </head>
    <body>
        <input type='button' value='hi' onclick='alert('hello')'>
        <input type='text' onchange='alert('changed')'>                                                     
    </body>
</html>

Button

value='hi' : 버튼에 적혀있는 문구 : hi
onclick='alert('hello')' : 버튼 클릭 시 : ‘hello’라는 알림창이 뜸

Text

문구 입력 창
onchange='alert('changed')' : 문구 작성 완료 후, 바깥 쪽 클릭하면 “changed” 라는 문구가 뜸

위의 onclick, onchange 등을 “이벤트(Event)”라고 한다.

3) Console

개발자 도구 > console

파일을 만들지 않고, 즉석에서 JS를 만들 수 있다!

4) 기타 문법

문자의 개수 : length

ex) “문자내용막적어막적어여기저기막적어”.length

개발자 도구 > elements > ESC 클릭시 console 뜸

해당 콘솔에 JS 작성 가능

2. Data Type

숫자(numeric) : 3, 5, 100.6

문자(string) : “3”,”abc”

javascript string으로 관련 properties/methods 확인 가능
ex) “abc”.length …………………….. 3
ex) “abc”.toUpperCase() ………… “ABC”
ex) “Hello world”.indexOf(‘O’) ……… -1

ex) “Hello world”.indexOf(‘o’) ………. 4

ex) “Hello world”.indexOf(‘world’) ………. 5

ex) “ Hello”.trim() …………… “Hello”

ex) “1” + “1” …………………………..”11”

변수 & 대입연산자

변수 : 바뀔 수 있는 값
ex) x = 1;
- x : 변수
- = : 대입 연산자
ex) name = “Lee” ;

( var name = ‘Lee’ ; 로, 앞에 표기해주는 것이 좋음 )

alert(“my name is” +name+”Hi”+name) ;

3. 디자인

<body style='background-color:black; color:white;'>
</body>

뒷 배경 색깔 : black
내용 색깔 : white

“night”라는 버튼을 클릭하면, 위와 같이 변경되길 원한다면?

<!DOCTYPE html>
<html>
    <body>
        <h1><a href='index.html'>WEB</a></h1>
        <h2>JavaScript</h2>
        <p>
            abcfajdslkfjewlkfjqlkejfqewkljfkqdljewkl
        </p>
    </body>
</html>

<!DOCTYPE html>
<html>
    <body>
        <h1><a href='index.html'>WEB</a></h1>
        <h2 style='background-color:coral; color:powderblue'>JavaScript</h2>
        <p>
        <span style='font-weight:bold;'>ABC</span> ajdslkABC fjewlkfjq kABCej qewk ABCl jfkqdlje ABC wkl
        </p>
    </body>
</html>

CSS 문법 : style='color:powderblue'
- property : color
- value : powederblue
[구글링] CSS background color property
div vs span
- div : 줄바꿈 O
- span : 줄바꿈 X

Q) 만약, 텍스트 내의 모든 “ABC”를 꾸며주고 싶다면?

class='js' 로 설정 이후, 한번에 변경하기!
id를 설정한게 있다면, 그게 우선시 됨

( 참고 : id는 unique해야! )
- 1번째 ABC : 굵게 + 초록
- 2번째 ABC : 굵게
- 3번째 ABC : 굵게

<!DOCTYPE html>
<html>
    <head>
        <style>
            .js{
                font-weight:bold;
            }
            #first{
                color:green;
            }
            span{
                color:blue;
            }
        </style>
    </head>
    <body>
        <h1><a href='index.html'>WEB</a></h1>
        <h2 style='background-color:coral; color:powderblue'>JavaScript</h2>
        <p>
        asdfda <span class='js' id='first'>ABC</span> ajdslk <span>DEF</span> fjewlkfjq k<span class='js'>ABC</span>ej qewk Cl jfkqdlje <span class='js'>ABC</span> wkl dafds
        </p>
    </body>
</html>

4. 버튼 클릭 통한 변경

<!DOCTYPE html>
<html>
    <body style='background-color:black;'>
        <h1><a href='index.html'>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.backgroundColor='white';
			document.querySelector('body').style.color='black';
		'>
        
        <p>
        abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg 
        </p>
    </body>
</html>

Q. 하나의 버튼 만으로, 위 두개의 역할을 모두 하게 할 수 없을까?

<!DOCTYPE html>
<html>
    <body style='background-color:black;'>
        <h1><a href='index.html'>WEB</a></h1>
        
		<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';
		}
		'>
        
        <p>
        abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg 
        </p>
    </body>
</html>

5. Refactoring

코드에서 비효율적인 부분을 제거하기!

<!DOCTYPE html>
<html>
    <body style='background-color:black;'>
        <h1><a href='index.html'>WEB</a></h1>
        
		<input id='night_day' 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';
		}
		'>
        
        <p>
        abcdefg abcdefg abcdefg abcdefg abcdefg abcdefg 
        </p>
    </body>
</html>

6. Loop & Array

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
    </head>
    <body>
        <h1>Loop & Array</h1>
        <script>
            var coworkers=['a','b','c','d']
        </script>
        <h2>coworkers</h2>
        <ul>
            <script>
                var i=0;
                while(i<coworkers.length){
                    document.write('<li>+coworkers[i]+</li>');
                    i=i+1;
                }
            </script>
        </ul>
    </body>
</html>

var alist=document.querySelectorAll('a');
var i=0;
while (i < alist.length ) {
	console.log(alist[i]);                       
	alist[i].style.color='powderblue';
	i = i+1;
}

7. Function

<!DOCTYPE html>
<html>
    <head>
        <title>Title Here</title>
        <meta charset='utf-8'>
        <script>
            function LinksSetColor(color){
                var alist=document.querySelectorAll('a');
				var i=0;
				while (i < alist.length ) {
					console.log(alist[i]);                       
					alist[i].style.color='powderblue';
					i = i+1;
				}
            }
            
            function BodySetColor(color){
                document.querySelector('body').style.color=color;
            }
            
            function BodySetBackgroundColor(color){
                document.querySelector('body').style.color=color;
            }
            
            function nightDayHandler(self){
                var target =document.querySelector('body')
                if(self.value=='night'){
					BodySetBackgroundColor('black');                           			 
					BodySetColor('white');                           			  		
                    self.value='day';
                    LinksSetColor('powderblue');
				} else {
        		    BodySetBackgroundColor('white');                           			 
					BodySetColor('black');                           			  		
					self.value='night';
                    LinksSetColor('blue');
				}
            }
        </script>
    </head>
    
    <body>
        <input id='night_day' type='button' value='night' onclick='nightDayHandler(this);'>
        <input id='night_day' type='button' value='night' onclick='nightDayHandler(this);'>
        <input id='night_day' type='button' value='night' onclick='nightDayHandler(this);'>
    </body>
</html>

JS에서는, 보다 편하게 하기 위해 “객체”라는 것을 만들었다.

<!DOCTYPE html>
<html>
    <head>
        <title>Title Here</title>
        <meta charset='utf-8'>
        <script>

            var Links={
                setColor:function(color){
                    var alist=document.querySelectorAll('a');
					var i=0;
					while (i < alist.length ) {
						console.log(alist[i]);                       
						alist[i].style.color='powderblue';
						i = i+1;
					}
                }
            }
            
            var Body={
                SetColor:function(color){
                    document.querySelector('body').style.color=color
                },
                SetBackgroundColor:function(color){
                    document.querySelector('body').style.backgroundColor=color
                }
            }
            

            function nightDayHandler(self){
                var target =document.querySelector('body')
                if(self.value=='night'){
					Body.SetBackgroundColor('black');                           			 
					Body.SetColor('white');                           			  		
                    self.value='day';
                    LinksSetColor('powderblue');
				} else {
        		    Body.SetBackgroundColor('white');                           			 
					Body.SetColor('black');                           			  		
					self.value='night';
                    Links.SetColor('blue');
				}
            }
        </script>
    </head>
    
    <body>
        <input id='night_day' type='button' value='night' onclick='nightDayHandler(this);'>
        <input id='night_day' type='button' value='night' onclick='nightDayHandler(this);'>
        <input id='night_day' type='button' value='night' onclick='nightDayHandler(this);'>
    </body>
</html>

8 . 정리 정돈하기

서로 연관된 코드를 “파일로 묶어서” 그룹핑하여 정리하기

(1) Java Script 파일

colors.js 파일

var Links={
    setColor:function(color){
        var alist=document.querySelectorAll('a');
        var i=0;
        while (i < alist.length ) {
            console.log(alist[i]);                       
            alist[i].style.color='powderblue';
            i = i+1;
        }
    }
}

var Body={
    SetColor:function(color){
        document.querySelector('body').style.color=color
    },
    SetBackgroundColor:function(color){
        document.querySelector('body').style.backgroundColor=color
    }
}


function nightDayHandler(self){
    var target =document.querySelector('body')
    if(self.value=='night'){
        Body.SetBackgroundColor('black');                           			 
        Body.SetColor('white');                           			  		
        self.value='day';
        LinksSetColor('powderblue');
    } else {
        Body.SetBackgroundColor('white');                           			 
        Body.SetColor('black');                           			  		
        self.value='night';
        Links.SetColor('blue');
    }
}

<!DOCTYPE html>
<html>
    <head>
        <title>Title Here</title>
        <meta charset='utf-8'>
		<script src='colors.js'></script>
    </head>
    
    <body>
        <input id='night_day' type='button' value='night' onclick='nightDayHandler(this);'>
        <input id='night_day' type='button' value='night' onclick='nightDayHandler(this);'>
        <input id='night_day' type='button' value='night' onclick='nightDayHandler(this);'>
    </body>
</html>

9 . jQuery

JS의 대표적인 library

(1) without jQuery

var Links={
    setColor:function(color){
        var alist=document.querySelectorAll('a');
        var i=0;
        while (i < alist.length ) {
            console.log(alist[i]);                       
            alist[i].style.color='powderblue';
            i = i+1;
        }
    }
}

var Body={
    SetColor:function(color){
        document.querySelector('body').style.color=color
    },
    SetBackgroundColor:function(color){
        document.querySelector('body').style.backgroundColor=color
    }
}

(2) with jQuery

var Links={
    setColor:function(color){
		$('a').css('color',color);
    }
}

var Body={
    SetColor:function(color){
        $('body').css('color',color);
    },
    SetBackgroundColor:function(color){
        $('body').css('backgroundColor',color);
    }
}

Twitter Facebook LinkedIn

[CS 기초] Javascript

Seunghan Lee