JavaScript

HTML과 JavaScript

SCRIPT

html 안에서 javascript를 쓸 수 있게 해주는 태그

HTML과 JS차이

HTML 정적 JS 동적

1+1
<script>
  document.write(1+1)
</script>

EVENT

onclick 속성값은 JS로 와야한다
onchange
onkeydown 등

        <input type="button" value="hi" onclick="alert('hi')">
        <input type="text" onchange="alert('changed')">
        <input type="text" onkeydown="alert('key down!')">

CONSOLE

사이트 내에서 js를 이용 할 수 있다

JavaScript data type

number

1+1
1-1
1/1
1*1

string

'hello world'
"hello world"
"1"+"1"

변수와 대입 연산자

x=1;
y=2;
x+y;

var name="eunryong"
"My name is"+name+""

boolean

true,false 로 이루어진 데이터타입

비교 연산자

===,<,> 등 을 이용

<script>
     document.write(1===1);
</script>
<script>
     document.write(1===2);
</script>
<script>
      document.write(1<1);
</script>
<script>
      document.write(1<2);
</script>

JavaScript 사용법

제어할 태그 선택

document.querySelector('selectors');
document.querySelector('.selectors');
document.querySelector('#selectors');

주 야간 모드 만들기

<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';
  ">

조건문

if(){}
else{}
조건문 예시

<script>
	document.write("1<br>");
	if(){
	document.write("2<br>");
	} else {
	document.write("3<br>");
	}
	document.write("4<br>");
</script>

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';
    }">

배열과 반복문

반복문

while(){}
예시

<h1>Loop</h1>
<ul>
<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>

배열

<h2>Syntax</h2>
<script>
    var coworkers = ["eunryong","lee"];
</script>
<h2>get</h2>
<script>
    document.write(coworkers[0]);
	document.write(coworkers[1]);
</script>
<h2>count</h2>
<script>
    document.write(coworkers.length);
</script>
<h2>add</h2>
<script>
    coworkers.push('minsu')
    coworkers.push('sangho')
</script>

배열과 반복문

<h1>Loop & Array</h1>
        <script>
            var coworkers = ['eunryong','lee','minsu','sangho','kim','haha'];
        </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>

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

		<ul>
            <script>
                function two(){
                    document.write('<li>2-1</li>');
                    document.write('<li>2-2</li>');
                }
                document.write('<li>1</li>');
                two();
                document.write('<li>3</li>');
                two();
            </script>
        </ul>

Parameter & Argument

			function sum(left, right){
                document.write(left+right+'<br>');
            }
            sum(2,3); // 5
            sum(3,4); // 7

Return

            function sum2(left, right){
            return left+right;
            }
            document.write(sum2(2,3)+'<br>');
            document.write('<div style="color:red">'+sum2(2,3)+'</div>');
            document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');

객체

객체 생성

		var coworkers = {
            "programmer":"eunryong",
            "designer":"lee"
           };
           document.write("programmer : "+coworkers.programmer+"<br>");
           document.write("designer : "+coworkers.designer+"<br>");
           coworkers.bookkeeper = "minsu";
           document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");
           coworkers["data scientist"] = "sangho";
           document.write("data scientist : "+coworkers["data scientist"]+"<br>");
		

객체 반복

		<h2>Iterate</h2>
       		<script>
        	   for(var key in coworkers){
               document.write(key+' : '+coworkers[key]+'<br>');
           }
     		</script>

property & method

        <h2>Property & Method</h2>
       <script>
           coworkers.showAll = function(){
            for(var key in this){
               document.write(key+' : '+this[key]+'<br>');
            }
           }
           coworkers.showAll();
       </script>

파일로 나누기

js파일로 script내용을 옮김

<script src="***.js"></script>

코드 이용

library & framework

라이브러리 = 부품 도서관 > 가져와서
jQuery cdn 코드 추가후 jQuery $ 사용
프레임워크 = 안에 들어가서

UI & API

UI = user interface
API = application programming interface