생활코딩_WEB2_JavaScript

5w31892p·2022년 10월 11일

목록 보기

3/5

JavaScript

HTML을 제어하는 언어
HTML 위에서 동작하는 언어
사용자와 상호작용하는 언어
웹브라우저는 한번 화면에 출력되면 자기 자신을 바꿀 수 없지만, JS를 이용해 바꾸기 가능
JavaScript은 동적인 언어 cf. HTML은 정적인 언어
웹브라우저 제어를 하기 위해서는 CSS와 JavaScript가 필요

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

script태그 안에 document.write는 JS 언어
위와 같은 경우 js 안에 있는 1+1은 웹브라우저에서 2로 나타내지만
body안에 있는 1+1는 1+1 그대로 나타냄

이벤트

경고창 = alert
onclick
- 이벤트가 클릭됐을때 작동
- 어떠한 이벤트가 일어났을 때 js 실행되도록 하는 것
onchange
- 이벤트가 변경됐을때 작동
- input이나 select 등의 데이터가 변경될 때 호출
- Javascript를 통해 변화가 일어났는지 탐지
- SELECT BOX를 이용해 어떤 이벤트를 실행하고자 할 때는 주로 사용
onkeydown
- 키를 눌렀을때 이벤트
- shift, alt, controll, capslock 등의 모든 키에 동작
- 한영변환, 한자 등의 특수키는 인식 못함
onkeyup
- 키를 눌렀다가 땠을 때 이벤트
- onkeydown 에서 인식하는 키들을 인식
onkeypress
실제로 글자가 써질때 이벤트
shift, tap, enter 등의 특수키는 인식 못함

콘솔

크롬 개발자 도구
개발자도구에 alert('문자열'.length)라고 치면 경고창으로 총 몇개의 글자인지 뜸
콘솔을 통해 js 실행하면 현재 보고 있는 웹페이지 대상으로 js 실행됨
콘솔창으로 보는 습관을 들이자

야간모드, 주간모드 버튼 통해서 바꾸는 기능


<input type="button" value="night" onclick="document.querySelector('body').style.background='black'; document.querySelector('body').style.color='white';">

<input type="button" value="day" onclick="document.querySelector('body').style.background='white'; document.querySelector('body').style.color='black';">

문자열(string)과 숫자(number)

문자열, 숫자열 잘 확인
숫자에 따옴표 붙히면 문자열 됨 (ex. '1'+'1'='11')

산술 연산자 : 사칙연산
문자열

.length : 문자열 길이
.toUpperCase() : 대문자로 변경
.indexOf('문자열') : 괄호 안의 문자열이 몇번째에 나타나는 지 알려줌
.trim() : 문자열 공백을 없애줌

변수와 대입 연산자

변수 대입연산자 값(상수) → a = 1
variable(변수) : 대입 연산자를 통해 값 바뀔 수 있음
cf. constant(상수) : 변하지 않고, 항상 일정한 값을 갖는 수
변수명 앞에 변수의 약자인 var을 적는 습관 들이기
사이 사이에 문자열 자주 바꿔야 하는 경우

var name = 'JENNIE'
alert("abcabcabcabc"+name+"abcabcabcabcabcabcabc"+name+"abcabcabcabc.")

자주 바뀔 문자열 변수를 정해 넣어두고, 해당 문자열이 들어가는 곳에 "+변수명+" 적으면 됨

제어할 태그 선택하기

JavaScript에서 CSS 선택자를 이용해서 TAG 선택
- document.querySelector() → 괄호 안은 '적용하고 싶은 태그, 클래스, 아이디'
JavaScript에 css style 속성을 통해 색상 변경
- .style.backgroundColor: red; (배경)
- .style.color: red; (글씨)

프로그램, 프로그래밍, 프로그래머

프로그램 : 순서
프로그래밍 : 순서를 만드는 행위
프로그래머 : 순서를 만드는 사람
프로그래밍 언어 : 시간의 순서에 따라서 실행되어야 할 기능을 프로그래밍 언어 문법에 맞게 글로 적어 두는 방식

JavaScript : 컴퓨터 언어, 프로그래밍 언어 cf. HTML : 컴퓨터 언어 O, 프로그래밍 언어 X
JavaScript는 사용자와 상호작용하기 위해 고안된 컴퓨터 언어이기 때문에 시간의 순서에 따라서 실행되어야 함

비교 연산자와 Boolean 데이터 타입

비교연산자 : true or false 둘 중 하나의 값을 만들어내는 연산자
Boolean : true 와 false의 값

===(동등비교연산자)
& l t ;( < 의미)

조건문

if문 괄호 안에는 불리언 데이터 타입이 옴 (true or false)
불리언의 값에 따라 실행되는 코드가 바뀜

true
- 첫번째 중괄호 실행, 두번째 중괄호 무시
false
- 첫번째 중괄호 무시, 두번째 중괄호 실행

조건문 활용

night, day button 하나로 만들기
- value 가져오기 → document.querySelector('#night_day').value === 'value값'

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

리팩토링(refactoring)

코드가 비효율적일 때 개선하는 작업
틈틈히 리팩토링을 해야 좋은 프로그램을 만들 수 있음

document.querySelector('#night_day') 은 본인을 뜻함
그러므로 모든 document.querySelector('#night_day')을 this로 바꿔적기
document.querySelector('body') 이 부분이 자꾸 겹치기 때문에 변수에 담아주기
변수명 = document.querySelector('body'); 한 후
모든 document.querySelector('body')을 지정한 변수명으로 변경

<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'
        }
    ">
    
코드가 훨씬 간결해짐

배열 (array)

일종의 수납상자
대괄호로 시작해 대괄호로 끝남
값과 값 사이는 콤마로 구분
정보를 담는 그릇이면서 동시에 정보가 순서대로 저장됨

Syntax (문법)

<h2>Syntax(문법)</h2>
<script>
	var coworkers = ['5w31892p', 'woovely'];
</script>

get (가져오기)

<h2>get</h2>
<script>
	document.write(coworkers[0]);
</script>

>>> 5w31892p

count (개수구하기)
- .length

<h2>count</h2>
<script>
    document.write(coworkers.length)
</script>

add (데이터 추가)
- .push() : 배열 끝에 요소 추가
- .unshift() : 배열 앞쪽에 요소 추가
- .splice (몇번째위치, 0, 추가할 요소) : 원하는 위치에 요소 추가

> .push()

<h2>add</h2>
<script>
    coworkers.push('duru');
    coworkers.push('taeho');
</script>

delete (삭제)
- .pop() : 마지막 요소 제거
- .shift() : 첫번째 요소 제거
- .splice(시작위치, 제거건수) : 원하는 위치 제거
- .splice(시작위치, 제거건수, 추가할 요소) : 제거 후 해당 위치에 새로운 요소 추가 가능

반복문 (Loop)

순서대로 실행되는 프로그램의 실행 순서를 제어하는 제어문
언제 종료될 것인지 지정하는 것이 필요

i = 0;
while(종료 지정) {
~~
~~
i = i + 1;
}

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


/// i가 0일 때 i에 1씩 더하면서 3보다 작을 때 끝내라
/// 그러므로 2+1 = 3 i 3번 반복 되면 끝남

배열과 반복문

배열 : 순서대로 연관된 데이터 정리정돈
반복문 : 순서대로 담긴 데이터 하나씩 꺼내 자동화된 처리를 할 수 있는 문법

변수에 값 넣기
반복문 돌리기
반복문을 돌리되 i < 변수.length로 기입해야 추후 손댈 일이 없음
리스트 형태로 값을 넣고 싶다면
반복문 안에 document.write('<태그>'+coworkers[i]+'</태그>')
링크를 넣고 싶다면 반복문 안 document.write안에 넣고 링크 뒤에 '+coworkers[i]+' 넣기
a태그 안에 target="_blank"를 넣으면 새창에서 열림

<body>
    <h1>Loop & Array</h1>

    <script>
        var coworkers = ['egoing', 'leezche', '5w31892p', 'woovely', 'graphittie', 'taeho'];
    </script>

    <h2>Co workers</h2>
    <ul>
        <script>
            var i = 0;
            while (i < coworkers.length) {
                document.write('<li><a href="http://www.naver.com" target="_blank" '+coworkers[i]+'>'+coworkers[i]+'</li>');
                i = i + 1;
            }
        </script>
    </ul>
</body>

배열과 반복문의 활용

개발자도구로 꼭 먼저 해보기
야간모드 링크 밝게, 주간모드 링크 어둡게 표시하기
모든 a태그 가져오기 → document.querySelectorAll('a')

바꿀 태그 모두 가져온 후 반복문 돌리기
바꼈을 때 색상도 각각 다르게 설정

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

함수 예고

수납상자

body부분에 넣었던 야간,주간모드를 head부분 script태그 안에 넣기
넣은 후 함수 시작인 function 이름() {}
괄호 안에 self로 적고 기존 this를 self로 바꿔주기
body 안 input onclick 안에 nightDayHandler(this) 넣기

<head>
    <script>
        function nightDayHandler(self){
            var target = document.querySelector('body');
            if(self.value === 'night'){
                target.style.backgroundColor = 'black';
                target.style.color = 'white'
                self.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';
                self.value = 'night'

                var alist = document.querySelectorAll('a');
                var i = 0;
                while(i < alist.length) {
                    alist[i].style.color = 'blue';
                    i = i + 1;
                }
            }
        }
    </script>
<body>
    <input type="button" value="night" onclick="nightDayHandler(this)">
</body>

함수 (function)

입력과 출력

기본 문법 (Basic)
- 연속적이지 않게 반복할 때 (반복문 사용 X)
- function 이름() {반복시킬 것}
- 해당 함수 내용 넣고 싶은 곳에 함수이름() 이렇게 넣기

<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>

매개변수 (Parameter) & 인자 (Argument) - 입력
- 매개변수 & 인자 → 입력
- 매개변수 : 함수 안으로 매개해주는 변수
- 인자 : 함수로 전달하는 값
- 문자와 숫자를 더하면 숫자를 문자로 간주 → 괄호를 사용해서 2와 3을 먼저 더해야함
- 괄호로 먼저 더하지 않으면 문자열로 간주해서 숫자가 붙어져 이어 나오게 됨

<script>
    function onePlusOne() {
        document.write(1+1+'<br>');
    }
    onePlusOne();
    function sum(left,right) { // 매개변수
        document.write(left+right+'<br>');
    }
    function sumColorRed(left,right) {
            document.write('<div style="color:red">'+(left+right)+'</div>');
      }
    sum(2,3); // 인자
    sum(3,4); // 인자
    
    // left와 right : 매개변수
    // 2와 3, 3과 4 : 인자
    </script>

Return - 출력
- Return → 출력
- 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환

<h2>Return</h2>
<script>
    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>')
</script>

함수의 활용

리팩토링 (self, this)

this는 input태그를 칭함
함수를 만들게 되면 this는 input을 칭하지 않게 됨
매개변수 self로 정한 후, this 자리에 모두 self 넣어줌 (self가 아닌 다른 이름으로 해도 됨)
그리고 input 안 onclick에는 self가 아닌 this를 넣어줘야 함

객체 예고

이름이 있는 정리정돈 상자
순서없이 정보 저장
중괄호로 시작해 중괄호로 끝남
서로 연관된 함수와 변수를 같은 이름으로 그룹핑해 잘 정리정돈 하기 위한 도구
함수가 많아지면 힘들기 때문에 이러한 함수를 그룹핑하기 위해 객체 사용
메소드 → 객체에 속해 있는 함수
객체.메소드()

객체의 쓰기와 읽기

배열은 대괄호, 객체는 중괄호

Create (생성)
- 객체를 만든 후 중괄호 안에 값 넣기(key:value형식)
- document.write ('key : ' +객체명.key+)
add (추가)
- 객체명.key = 'value'
  - document.write ('key : ' +객체명.key+)
- 이름에는 띄어쓰기 안됨
- 객체명['k e y'] = 'value' → 객체명 다음 . X
  - document.write ('key : ' +객체명['k e y']+)

객체와 반복문

Iterate (반복)
- for (ver key in 객체명) {
  document.write(key+);
  }
  → key
- for (ver key in 객체명) {
  document.write(coworkers[key]+);
  }
  → value
- for (var key in coworkers) {
  document.write(key+' : '+coworkers[key]+'
  ');
  } → key : value

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

객체프로퍼티와 메소드

프로퍼티 : 객체에 소속된 변수
메소드: 객체에 소속된 함수

property & Method
- coworkers.showAll = function () {} = function showAll() {} = var showAll = function () {}

<script>
    coworkers.showAll = function () {
        for (var key in this) {
        document.write(key+' : '+this[key]+'<br>');
        }
    }
    coworkers.showAll();
    </script>
    
    
객체 이름이 바뀔 경우
데이터 가져오지 못하는 현상 발생 할 수 있음
그래서 showAll 안에 coworkers라는 객체이름을 모두
this로 변경

객체 활용

객체의 프로퍼티와 프로퍼티룰 구분할 때에는 콤마로 구분
객체명 = {
함수명: function() {document.~-~-},
함수명: function() {document.~-~-},
}

<script>
	var Links = {
    	setColor: function (color) {
        	var alist = document.querySelectorAll('a');
            var i = 0;
            while (i < alist.length) {
                    alist[i].style.color = color;
                    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){
        if(self.value === 'night'){
            Body.setBackgroundColor('black')
            Body.setColor('white') 
            self.value = 'day'

            Links.setColor('powderblue');
        } else {
            Body.setBackgroundColor('white')
            Body.setColor('black')
            self.value = 'night'

            Links.setColor('blue');
            }
        }
</script>

파일로 쪼개서 정리 정돈하기

서로 연관된 코드들을 파일로 묶어서 그룹핑
javascript 시트로 저장
1. script 안 내용만 avascript 시트에 저장
2. <script src="color.js"></script> 모든 페이지에 붙혀넣기
js파일을 변경하면 모든 페이지가 변경됨
가독성 ↑
코드 명확

라이브러리와 프레임워크

라이브러리 (땡겨와서 사용하는 느낌)
- 재사용하기 쉽도록 되어 있는 소프트웨어
- 만들고자 하는 프로그램에 필요한 부품이 되는 소프트웨어를 잘 정리정돈 해놓은 것
- 내가 만들고 있는 프로그램에 사용할 부품을 가져오는 느낌
프레임워크 (안에 들어가 작업하는 느낌)
- 만들고자 하는 것이 무엇이냐에 따라서 필요한 공통적인 것을 프레임워크로 만들어놓음
- 만들어 놓은 프레임워크에 들어가 기능이나 개성에 따라 달라지는 부분만 수정
- 반제품이라고 생각하면 됨
라이브러리 - jQuery
- 임포트 최신버전 주소 (구글CDN)
- jQuery 이용하면 반복문 사용하지 않아도 됨
- jQuery가 반복문을 대신 처리
- 직관적, 코드가 짧아짐

주석처리 : 기존코드
$()~-~- : jQuery


<script>
  var Links = {
      setColor: function (color) {
          // var alist = document.querySelectorAll('a');
          // var i = 0;
          // while (i < alist.length) {
          //     alist[i].style.color = color;
          //     i = i + 1;
          // }
          $('a').css('color', color);
      }
  }
  var Body = {
      setColor: function (color) {
          // document.querySelector('body').style.color = color;
          $('body').css('color', color);
      },
      setBackgroundColor: function (color) {
          // document.querySelector('body').style.backgroundColor = color;
          $('body').css('backgroundColor', color);
      }
  }
</script>

UI vs API

UI
- 사용자가 시스템 제어하기 위해 사용하는 조작장치
- button
API
- 프로그래밍을 할 때 사용하는 조작장치
- alert
- 프로그래밍적으로, 즉 순서대로 실행하는 것을 통해 만들어짐 ( API와 순서는 서로 뗄 수 없는 관계 )

프로젝트 시작할 때

모든 개념 총동원 NO!
- 필수 불가결한 최소한의 도구만으로 문제 해결해보기
- 최소한의 도구란?
  - 순서에 따라 실행 되어야 하는 명령들이 실행되도록 하는 것
- 순서대로 실행된다는 것만으로도 프로그래밍은 혁명적
태그 삭제, 자식 태그 추가하고 싶다면?
- document 객체 살펴보기
  - 필요한 메소드가 포함되어 있을 것
document 객체로도 찾을 수 없다면?
- DOM 객체로 수색 범위 넓히기
  - DOM객체 : document객체의 일부
웹페이지가 아닌 웹브라우저 자체를 제어해야 한다면?
- window 객체로 조사
  - window 객체에 속해 있는 프로퍼티나 메소드 확인
웹페이지 리로드하지 않고 정보 변경하고 싶다면?
- ajax 사용
웹페이지가 리로드되어도 현재 상태 유지하고 싶다면?
- cookie 사용 (사용자를 위한 개인화된 서비스 제공 가능)
인터넷이 끊겨도 동작하는 웹페이지 만들고 싶다면?
- offline web application 찾아보기
화상 통신 웹 / 앱 만들고 싶다면?
- webRTC
사용자 음성 인식하고 음성을 정보로 전달하고 싶다면?
- sppech로 시작하는 API 살펴보기
3차원 그래픽으로 게임과 같은 것을 만들고 싶다면?
- webGL 살펴보기
가상현실에 관심이 많다면?
- webVR

코딩장면만을 담은 버전의 영상

5w31892p

이전 포스트

생활코딩_WEB2_CSS

다음 포스트

생활코딩_WEB2_JavaScript

생활코딩

JavaScript

이벤트

콘솔

문자열(string)과 숫자(number)

변수와 대입 연산자

제어할 태그 선택하기

프로그램, 프로그래밍, 프로그래머

비교 연산자와 Boolean 데이터 타입

조건문

조건문 활용

리팩토링(refactoring)

배열 (array)

반복문 (Loop)

배열과 반복문

배열과 반복문의 활용

함수 예고

함수 (function)

함수의 활용

객체 예고

객체의 쓰기와 읽기

객체와 반복문

객체프로퍼티와 메소드

객체 활용

파일로 쪼개서 정리 정돈하기

라이브러리와 프레임워크

UI vs API

프로젝트 시작할 때

생활코딩_WEB2_CSS

생활코딩_WEB3_Ajax

0개의 댓글