seong

JS - 기본 타입, ForEach,함수 작성 본문

JavaScript/JS

JS - 기본 타입, ForEach,함수 작성

hyeonseong 2022. 9. 13. 17:42

SCRIPT 작성

1. 스크립트에서 변수 타입으로 var과 let이 있다. ( 지금은 let 사용 )

2. <script>는 항상 <body>의 가장 끝에 작성해준다. 

 

기본 타입 (정수형, 실수형, 문자형, Boolean)

1. let으로 모두 작성이 가능 하다.

2. 템플릿 리터럴 ${} 은 따옴표가 아닌 `` 을 사용해야한다.

타입 예제 1)

let num = 1;
let num2 = 1.5;
let str = "안녕";
let str2 = '안녕';
let str3 = `내 번호는 ${num}`;
let isOk = true;

js로 파일을 따로 빼주고 실행 해주기.

결과

람다식 For each문, 배열 

기본 배열 선언 문법

let list = [1,2,3,4];

 

push() 기본값에 값을 더 넣어준다.

list.push(5);

 

concat() 기본 배열을 복사해 새로 만든 후 값을 추가한다

list.concat(6);

 

배열 복사 후 값 추가하는 다른 방법 " ...list "(전개 연산)

< 동작 >

1. 데이터들을 모두 버린다.

2. 버리면 데이터는 Type이 없다.

3. 버려진 데이터를 담아준다. 

4. 앞 뒤로 필요한 데이터 추가 

let list3 = [0,...list2,7];

 

For Each문 

list.forEach((i) =>{
            console.log(i);
        })

예제를 통해 확인

버튼만들고 함수 작동

예제 1) 강아지를 쓰고 콘솔로 출력

실행은 마우스 우클릭 - Open with Live Server

실행결과

예제 2) id값 주고 버튼 ,함수를 만들어 동작 주기

1. id 값을 cat으로주고

2. id는 "#id값"으로 찾는다.

<body>
    <h1>강아지</h1>
    <button onclick="btn1()">버튼1</button>
    <h2 id="cat">고양이</h2>
    <button onclick="btn2()">버튼2</button>

    <script>
        function btn1(){
            let h1Dom = document.querySelector("h1");
            h1Dom.innerHTML = "호랑이" // h1을 클릭시 호랑이로 변경
        };
        function btn2(){
            let catDom = document.querySelector("#cat"); // id값은 #으로 찾는다 
            catDom.innerHTML = "원숭이";// catDom을 클릭시 원숭이로 변경
        };
    </script>
</body>

결과 

 

 

'JavaScript > JS' 카테고리의 다른 글

JS 기본 문법 - 객체 생성 (JQuery, JS)  (0) 2022.09.14
JS - JQuery(사용법) 요소 삭제,추가, Value값 가져오기  (0) 2022.09.14
Node.js 로 간단한 문법 JS 실행 해보기  (0) 2022.09.14
JS - JSON 과 Object ,parse(),stringify()  (0) 2022.09.14
JS - Open with Liver Server 안될 때 설정  (0) 2022.09.13
'JavaScript/JS' Related Articles more