[JavaScript] 자바스크립트 함수와 조건문, 객체(object)

자바스크립트는 실습도 많이하고 복습도 해야하는 만큼 나눠서 작성.

추천목표 : 영타 600자 도전, js 복습

 

JavaScript 함수

: 특정 작업을 수행하기 위해 독립적으로 설계된 코드 집합 

 

명시적 함수 선언

function hello() {}

1) 함수이름은 카멜 표기법을 따른다.

ex. helloWorld  (띄어쓰기 구간을 대문자로 표시)

 

2) ()

parameter : 함수 선언할 때 매개변수(인자) 받을 곳

 

3) {} 

body : 함수가 실행되는 곳으로, scope라고도 한다. 

 

 

함수표현식 (- 좀 더 명확함)

const hello = function() {}

사용하는 이유는?

함수를 덮어쓰는 경우가 종종 발생하기 때문이다.

 

 

---

함수와 함께 쓰이는 조건문

 

JavaScript 조건문

: 특정 조건 만족시 (조건이 참인 경우) 실행하는 명령의 집합 

특정한 조건 속에서 작업을 수행하고 싶을 때 사용

 

if (조건1) { 
//조건1이 참이라면 실행한다 ;
}
else if (조건2) {
 //조건1이 참이 아니고 조건2가 참이라면 실행 ;
} 
else {
 //조건 1과 2 모두 참이 아니라면 실행  ;
}

 

if문 예시는 다음과 같다. 

        var a = prompt("숫자를 입력하세요.");

        if (a > 10) {

            console.log("a>10");

        }

        else if (a>5) {

            console.log("a>5");

        }

        else if(a>0) {

            console.log("a>0");

        }

        else {

            console.log("no!");

        };

 

if문 (중첩 가능)

var a = prompt("숫자를 입력하세요.");

        if (a > 10) {

            console.log("a>10");

            if (a>7) {

                console.log("a>7");

            }

            else {

                console.log("a<7");

            }

        }

        else if (a>5) {

            console.log("a>5");

        }

        else if(a>0) {

            console.log("a>0");

        }

        else {

            console.log("no!");

        };

 

단, 이때 js는 중첩을 많이한 (코드가 안으로 들어갈수록) 복잡한 코드이므로 잘 짠 코드는 아니다

 

 

switch문

          if는 범위로 비교, switch는 정확한 값일때 사용

 

반드시 브레이크를 걸어준다.

            switch(a) {

                case 8:

                    console.log("a 8");

                    break;

            }

 

 

---

JavaScript 반복문

: 똑같은 명령을 일정 횟수만큼 반복해 수행하도록 하는 실행문

 

for문

for (초기문;조건문;증감문) {
 // 조건문 결과가 참인 경우, 반복적으로 실행 (거짓이면 종료) 하는 명령문 ;
}

 

for문 예시

        // for문

        // var i = 0 초기값 / i < 10 조건문 /  i ++ 는 i+1을 줄여서 사용한 것, i에 1을 더한 값 넣기 (i+2는 2를 더한 값)

 

        for (var i = 0; i < 10; i ++) {

            console.log("i :" + i);

        }

 

 

 

while 문

 

while (조건문) {
 // 조건문이 참인 경우 반복적으로 실행하는 명령문 ;
}

* for문과 달리 명령문에서 조건문의 결과를 바꾸지 않으면, 무한 루프에 빠질 수 있음

 

 

for문과 while문 둘다 중첩이 가능하다.

 

---

 

JavaScript  객체 (object 자료형)

 

객체 자료형 / 참조 자료형

- object 클래스 부터~ 함수 등 까지 포함한다.

 

객체란?

실생활에서 우리가 인식할 수 있는 사물. ex 고양이, (str, int 등)

객체 : 고양이 그 자체
속성 : 이름 - 나비 / 나이 -1살
메소드 : mew() 울다 eat() 먹는다

를 함수로하면

    <script>

        var cat= {

            name : '나비',

            age : 1,

            mew : function() {

                return "야옹";

            }

        }

    </script>

 

        console.log( cat );                 //객체 자체 출력

        console.log( cat.name) ;    //속성이기 때문에 이렇게 적어야 한다.

        console.log( cat.mew());    //cat이라는 객체 안의 mew라는 함수를 실행

 

1. 배열 (list)

1) 배열은 type을 따지지 않는다. 어떤 객체가 들어와도 ok. 길이도 상관 없다.

2) 인덱스(index) = 배열의 순서를 가리킨다, 단 시작할때 0부터 시작하는 걸 주의한다.

 

- 변수명.length                       : 배열의 길이를 구함
- 변수명.push                         : 마지막 요소에 추가할 값 (값이 마지막에 추가)
- 변수명.pop                           : 배열에서 가장 마지막 요소를 꺼낸다.
- 변수명.unshift(추가할 값)   : 0번째에 추가한다 (맨 앞에 요소를 추가) 즉, 모든 요소의 인덱스가 밀림
- 변수명.shift()                       : 0번째 값을 꺼낸다. 즉, 요소들이 땡겨진다
- 변수명.indecOf(찾을 값)      : 값을 찾는다.

        // index는 배열의 순서가 0부터 시작한다.

        console.log(arr1[0]);

        console.log( arr1.indexOf('a'));

        // 배열에는 length라는 속성을 가져올 수 있음. 길이를 가져온다

        console.log("length : " + arr1.length);

        arr1.push('d')  //가장 마지막에 요소 추가

        console.log(arr1);

        arr1.pop(); // 가장 마지막 요소 제거

        console.log(arr1);

        arr1.unshift(); //가장 앞의 요소 추가

        console.log(arr1);

        arr1.shift(); //가장 앞의 요소 제거

        console.log(arr1);

 

2. 딕셔너리 

키key -값value 형태로 저장

var me = {
name : 'kyuri',
birth: '1115'
};

 

** 배열은 인덱스로 , 딕셔너리는 키로 가져온다.

** 딕셔너리는 list의 일종

** 딕셔너리는 .(점)으로도 가져올 수 있고 []대괄호로도 가져올 수 있다!

        // 배열 가져오는 법

        console.log(arr1[가져올 값]);

       

        var ar = [1,2];

        // 배열에서 값을 가져올 때는 index를 통해 가져온다

        console.log(ar[0]);

        //딕셔너리를 가져올 때에는 key값을 기준으로 가져오기

        // 단, 배열은 각각이 인덱스가 자동으로 키가 되는 것.

        // 딕셔너리는 쌍으로 구성되어 있어 이를 구별하는 것이 key

        //

        var me = {

            name: '홍길동';

            birth : '0101'

        };

        // 딕셔너리 객체는 []대괄호 와 .으로도 가져올 수 있다.

        console.log(me);

        console.log(me["name"]);

        console.log(me.name);

        me.gender = 'M';

        me["age"] = 10;

        console.log(me);

 

 

---

JavaScript  표준 객체

: javascript가 기본적으로 가지고 있는 객체들

- 프로그래밍 하는데 기본적으로 필요한 도구들 ex. date, math ... 

 

Date 객체

-  javascript에서 매 순간 바뀌는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체

 

초기화 사용법 : 

- new는 class에서 나오는데 필요하면 예습

new date()

이때, 값을 보내지 않으면 현 시점으로 시간을 구함

단, 정확한 년도를 적어줘야 한다. 기준이 1900년대로 시작한다.

 

즉 아래 사진에서 나온 값이 122인 것은 1900년대 2000년대를 구분하기 위해 1을 앞에 넣은 것

일월화수목 day == 0,1,2,3,4  (인덱스는 0부터 계산하므로)

 

 

Math 객체

- 수학에서 자주 사용하는 상수 및 함수를 미리 구현해놓은 java script 표준 내장 객체

- 크롬 엣지 등 브라우저마다 다른 결과를 얻을 가능성도 있다. (주의해서 사용한다.)

 

Math 객체 - 함수

-Math.PI            파이값
-Math.E              로그 
-Math.min()       최솟값
-Math.max()      최댓값
-Math.random() 랜덤값

        console.log( Math.min()); // 전달 받은 값 중 가장 작은 값 반환

        console.log( Math.min(-10, 2, 10));

        console.log( Math.min(0,'a', 5)); //받은 값 중 문자같은 비교할 수 없는 값은 NaN 을 반환

        console.log( Math.max(-10, 2, 10)); // 전달받은 값 중 가장 큰 값 반환

        console.log( Math.random()); //무작위로 반환. 0~1 사이의 소수점 수 반환

        var min=0; var max=10;

        console.log(Math.random() * (max-min) + min); 

        // 어떤 최소값과 최댓값 사이에서 반환식. 모르면 암기

        console.log( Math.round(1.2));  

        console.log( Math.round(-1.7));  

        //소수점 첫째자리에서 반올림. 기본적으로 정수로 반환

        console.log( Math.floor(1.2)); // 정수를 기준으로 내림

        console.log( Math.ceil(1.2)); // 정수를 기준으로 올림

 

 

---

 

JavaScript  DOM

: Document Object Model 문서객체 모델

xml이나 html문서에 접근하기 위한 일종의 인터페이스로 문서 내의 모든 요소를 정의하고,

각각 요소에 접근하는 방법을 제공

 

우리가 쓰는 html 문서 자체가 보통 dom으로 되어 있다. 

 

1. 새로운 html 요소나 속성 추가
2. 존재하는 html 요소나 속성 제거
3. html 문서의 모든 html 요소 변경
4. html 문서의 모든 html 속성 변경
5. html 문서의 모든 css 스타일 변경
6. html 문서에 새로운 html 이벤트 추가
7. html 문서의 모든 html 이벤트에 반응

 

Document 객체

- web page의 html 요소에 접근하여 행동을 하고자 할때 사용하는 객체

 

 

Document 속성

    <script>

        console.log( document.documentElement); //문서의 모든 요소 가져옴

        console.log( document.head); // head 태그 가져오기

        console.log( document.title); // title 가져오기

        console.log( document.URL); // 내가 접속한 url 가져오기

        console.log( document.domain); // 내가 접속한 도메인 가져오기 http즉 프로토콜을 제외하고 도메인만

    </script>

 

이렇게 가져온다.

 

Document  - 요소선택

    <script>

        console.log( document.getElementById("input1")); //id가 input1인 요소를 가져오고 그대로 출력

 

        console.log( document.getElementsByClassName("css1")); 

       //class name이 css1인 애들을 가져오는 것 , 여러 개를 가져오고 형태는 하나라도 무조건 리스트로 담겨져온다

 

        console.log( document.getElementsByClassName("css1")[0]); 

       //하나만 가져오고 싶다면 [ ]사용.이렇게 가져오면 0번째의 것(1번)을 가져오게 된다

 

        console.log( document.getElementsByTagName("img")); 

       //태그를 가져오는데, 마찬가지로 리스트에 담겨져 온다. 하나만 가져오고 싶다면 마찬가지로 인덱스[ ]사용

        console.log( document.querySelector("#input1")); 

        //괄호 안에는 선택자가 들어간다. 즉 id값이 input1인 것을 가져와달라. 이때 여러 개라도 무조건 하나만 가져온다

 

        console.log( document.querySelector(".css1")); // 선택자 class에 해당하는 것 중 가장 위에 있는 하나만 가져옴 

 

        console.log( document.querySelectorAll(".css1")); // 모두 가져오고 싶으면 all을 사용한다. 배열 즉 리스트로 가져옴

 

        console.log( document.querySelectorAll(".css1")[1]); // 배열이므로 인덱스[ ]를 사용하여 하나만 가져오게 할 수 있음

        //htmlcollections 는 변화를 실시간 반영하고(살아있고), nodelist는 처음 그상태 그대로 즉 실시간으로 변동되지 않는다.

        // var input = document.getElementById("input1");

        // console.log (inout.value); //내가 선택한 요소의 값 가져오기

 

 

 

버튼으로 실습하기

<div>

        <input type="text" id="input1" value="입력값">

</div>

 <button type="button" onclick="getData();">버튼</button>

1. 버튼을 누르면 onclick 실행 2. getData() 실행  3. id가 input1인 요소를 찾아서 input 변수에 넣기

4. 선택된 요소의 value를 콘솔에 출력

    <script>

        function getData() {

            var input = document.getElementById("input1");

            console.log(input.value);

        }

    </script>

 

 

 Document – 요소다루기

- document.createElement(html요소)      요소를 만들어낸다. ex) tr, td를 만들어냄
- document.write(텍스트)                         

- [].append();                           추가
- [].remove();                           삭제
- [].appendChild();                하나만 추가
- [].removeChild();                하나만 삭제
- [].innerText = 내용;             텍스트만 적용
- [].innerHTML = 내용;           태그도 적용  ex. <strong>하면 글씨가 굵게 적용
- [].className = 클래스이름;

 

이때  [].append(); 와 [].appendChild();   차이를 명확히 알아야 한다.

 

---

실습 14 간단 계산기

 

힌트1) id 속성이 “value1”인 input 값 가져와 변수에 넣기

변수= document.getElementById(“value1”).value;

힌트2) id 속성이 “value1”인 input에 값 넣기

document.getElementById(“value1").value = 값;

실습 15 방명록

작성자와 내용을 쓰고 "작성" 을 누르면 아래 table 에추가
이때, 작성일은 작성한 시간이 되어야 한다.

 

new Date() 사용하고 형식 변경하기

 

글 임시저장이 제대로 안돼서 반 정도 날라가서 다시 썼다. 얏호.