5/15 - JavaScript 문법

변수

let
- 변수를 선언하고 값을 할당할 수 있음
const
- 상수를 선언, 값 재 할당 불가능

자료형

Number
- 숫자
문자열
- 작은 따옴표나 큰 따옴표로 나타냄
배열
객체
undefined
- 자료형이 지정되지 않았을 때의 상태
- 변수를 선언만 한 후 값을 할당하지 않은 변수
null
- 값이 유효하지 않은 경우

템플릿 리터럴

문자열과 변수 식을 섞어서 하나의 문자열을 만드는 표현 형식

논리형

Boolean 유형
참 / 거짓

자료 형 변환

자바 스크립트는 느슨한 자료형 체크
**typeof 변수**를 통해 자료형 체크 가능
자료형 변환 함수
- Number()
- parseInt()
- parseFloat()
- String()
- Boolean()

비교

<script>

// === 값 and 타입 일치햐야 true
// === 의 반대는 !==
    let a = '3';
    console.log(a === 3);
    console.log(a !== 3);

</script>

<script>

// === 값 and 타입 일치햐야 true
// === 의 반대는 !==
    let a = '3';
    console.log(a === 3);
    console.log(a !== 3);

    
// if문 조건식 (true / false)
// 리터럴 값 들어가는 경우
// 일반 자료형 들어가는 경우 값이 있으면 true, d
if(a) {
    console.log('true')
} else {
    console.log('false')
}

</script>

함수

<script>

/*
함수의 구조
function 함수명([매개변수 명, ...]) {
    실행문...
    [return 값;]
}
*/

// 함수 선언방법
// 일반적인
function aaa() {
    console.log('aaa')
}

// 함수 실행
// 함수명();
aaa();

// 익명 함수
let bbb = function() {
    console.log('bbb');
}

bbb();

// 익명 함수이자 화살표 함수
let ccc = () => {
    console.log('ccc');
}

ccc();

// 즉시 실행 함수
(function ddd() {
    console.log('ddd');
})();

</script>

VAR

권장하지 않는 이유
- 함수 스코프
- 함수 레벨
- 빠뜨리면 전역으로 실행
- 재 선언이 가능하여 위험
- 함수 내 전역 변수 사용은 지양
let, const는 블록 레벨의 변수
- let의 경우 재할당은 가능하지만 재 선언 불가
- const의 경우 재선언, 재할당 불가
- 블록 안에서만 사용 가능
- 호이스팅이 없음
var의 경우 실수로 예약어 var을 빠뜨리면 전역 변수가 되버림
let, const의 경우 블록 레벨이라 빠뜨려도 지역 변수로 취급
var의 경우 호이스팅이라는 특성 때문에 사용 전 선언하면 undefined가 찍히는 오류가 있음

함수

익명 함수

function(a, b) {
	return a + b;
}

// 실행
<script>
	let sum = function(a, b){
		return a + b;
	}
	
	document.write(`{sum(10, 20)}`);
</script>

즉시 실행 함수

(functino(){
	명령
}());

or

(fuction(매개변수) {
	명령
}(인수));

화살표 함수

매개변수 없음

const hi = () => { return "안녕하세요?" }

매개변수 1개

let hi = user => { document.write (`${user}님, 안녕하세요?`) };

매개변수 2개 이상

let sum = (a, b) => a + b;

콜백 함수

비동기적으로 동작하는 콜백 함수
정의
- 매개변수로 함수를 전댈

<script>
    // callback
    function calcuator(func, x, y) {
        var r = func(10, 20);
        return r;
    }

    var relust = calcuator(function (a, b) {
        return a + b;
    }, 10, 20);

    var result2 = calcuator((a,b) => a+b, 10, 20)

    console.log(relust);
    console.log(result2);
</script>

시간 지연
- setTimeOut

<script>
    setTimeout(function(){
        console.log('callback!!')
    },1000)
    console.log('밖에서 출력')

    function test(){
        var text = "안녕";
        return function(){
            return text;
        };
    }

    var t = test();
    console.log(t());

</script>

클로저

독립적인 공간을 갖는 함수
내부 함수 개념을 사용하여 별도의 스코프

<script>
    function test2(name){
        var text = "안녕" + name;
        return function(){
            return text
        }
    }
    var t1 = test2('김길동')
    var t2 = test2('홍길동')
    console.log(t1())
    console.log(t2())
</script>

이벤트

행위로 동작하는 모든 요소
키보드, 마우스, 문서 로딩, 폼…
연결 방식
- 인라인
- 속성 연결
- 리스너

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="버튼" onclick="alert('안녕')">
</body>
</html>

자바 스크립트 적용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="버튼" onclick="alert('안녕')">
    <input type="button" id="btn2" value="버튼2" onclick="alert('안녕')">
    <script>
        let btn2  = document.querySelector("#btn2");
        console.log(btn2)
        btn2.onclick = function() {
            alert('안녕2');
        }
    </script>
</body>
</html>

리스너 연결 방식

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
           let btn3 = document.querySelector("#btn3")
           btn3.addEventListener('clicked',function(){
                alert('안녕3')
           })
        }
    </script>
</head>

<body>
    <input type="button" id="btn3" value="버튼3 리스너 연결 방식" onclick="alert('안녕')">
    
</body>

</html>

팝업
- 차단되어 뜨지 않음

<p>문서를 열면 팝업 창이 표시</p>
<script>
    window.open('event.html','pop','width=500,height=400,left=100,top=200')
</script>

버튼으로 이동

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
       document.querySelector("#btn").onclick = function(){
        location.href = 'popup.html';
       }
    }
    </script>
</head>

<body>
    <input type="button" value="버튼" id="btn">
    
</body>
</html>

뒤로 가기
- history 사용
- 이력이 남아 있음

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function() {
       document.querySelector("#btn").addEventListener('click',function(){
            history.back();
       })
    }
</script>
<body>
    <input type="button" id="btn" value="뒤로가기">
</body>
</html>

메모

window.onload를 사용하면 위에서 선언하고 사용할 수 있다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function () {
            let btn2 = document.querySelector("#btn2");
            console.log(btn2)
            btn2.onclick = function () {
                alert('안녕2');
            }
        }
    </script>
</head>

<body>
    <input type="button" value="버튼" onclick="alert('안녕')">
    <input type="button" id="btn2" value="버튼2" onclick="alert('안녕')">
</body>

</html>

객체
- 원래 없어야 하나 후에 출력 되어 company 프로퍼티와 back함수가 보인다.

<script>
    let car = {
        model : '아반떼',
        color : '흰색',
        price : 2000,
        run : function(){
            console.log('차가 달린다.')
        }
    }
    
        console.log(typeof car); // 타입
        console.log(car) // 객체 정보
        console.log(car.price) // car 변수 안 프로퍼티

        // 객체에 속성 추가
        car.company = '현대'
        console.log(car)

        // 객체에 함수 추가
        car.back = function(){
            console.log('차가 후진합니다.');
        }
        car.back();

        let name = 'model';
        console.log(car[name]); // 속성명을 변수로 처리 가능
        console.log(car.name); // 없는 속성은 undefined

        // 생성자 함수
        function Member(){
            this.login = function(){
                console.log('로그인')
            }
        }
        let m = new Member();
        console.log(typeof m) // 타입이 함수가 아닌 object로 나옴
        m.login();

        //ES6 class
        class Member2 {
            constructor(name){
                this.name = name;
            }

            login() {
                console.log(this.name+'으로 로그인')
            }
        }
        let m2 = new Member2('홍길동')
        m2.login();

</script>

전개 연산

<script>
    // 전개 연산
    let arr = [1,2,3];
    let arr2 = arr;
    console.log(arr == arr2) // 같은 주소
    let arr3 = [...arr]; // 복사 느낌
    console.log(arr==arr3) // 다른 주소
    console.log(arr)
    console.log(arr2)
    console.log(arr3)
    
    let arr4 = [...arr3, 4, 5]
    console.log(arr4)

    let arr5 = [...arr3, 4,5,...arr,...arr2,...arr3]
    console.log(arr5)

    let obj1 = {a:1, b:2}
    let obj2 = {c:3, d:4}
    let obj3 = {...obj1, ...obj2}
    console.log(obj3);

    let obj4 = {b:5}
    // 덮어 씌우기 
    let obj5 = {...obj1, ...obj4}
    console.log(obj5)

    // 한 개의 숫자만 바꾸기
    let obj6 = {...obj1, b :10}
    console.log(obj6)
</script>

객체 확장 표현식

<script>
    // 객체 확장 표현식
    let obj4 = {b:5}
    let propertyName = 'name'
    obj4[propertyName] = '홍길동'
    console.log(obj4)
    let member = {
        no : 1,
        propertyName : '홍길동'
    }
    console.log(member)
</script>

구조 분해 할당

배열 구조 분해 할당

<script>
    // 구조 분해 할당
    let ar = [1,2]
    let a = ar[0]
    let b = ar[1]
    let [a1, b2] = ar
    // 한 번에 할당
    console.log(a1,b2)
</script>

객체 구조 분해 할당

<script>
    // 순서 상관 없이
    let ob ={a : 1, b : 2}
    let {b, a} = ob
    console.log(a) // a가 뒤에있으나 1이 들어감
    console.log(b)
</script>

스크립트 불러오기

function func1(){
    console.log('func1');
}

function func2(){
    console.log('func2');
}
// 디폴트
export default function() {
    console.log('default')
}
export {func1, func2};

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <script type="module">
    // xxx는 디폴트
    import xxx, {func1, func2} from '/js/util.js';
    func2();
    xxx();
  </script>
</body>
</html>

중요한 내용
- 화살표 함수
- 템플릿 문자열
- 백틱
- 클래스
함수 연결 방식
- 속성 연결 방식
  - btn2.onclick = function(){ alert(’안녕’) }
- 리스너 연결 방식
  - btn2.addEventListener(’click’,function(){ alert(’안녕’) } );
- 인라인 방식
  - <div onclick="alert('클릭했습니다1.')">클릭</div>
페이지 이동
- 해당 주소로 이동
  - location.gref = ‘b.html(주소)’
- 이전 페이지로 이동
  - history.back()
과목별 총점, 평균 계산해보기
- 외부에 설정하면 정적으로 초기 빈 값을 가져오므로, 함수 내에서 모든 것을 해주어야 함

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    ul {
        list-style: none;
        row-gap: 12px;
        display: flex;
        flex-direction: column;
        column-gap: 8px;
        width: max-content;
    }

    li input[type="submit"]#calc {
        margin-left: auto;
        display: block;
    }
</style>

<body>
    <ul>
        <li>
            <label for="korean">국어</label>
            <input type="text" id="korean">
        </li>
        <li>
            <label for="math">영어</label>
            <input type="text" id="english">

        <li>
            <label for="math">수학</label>
            <input type="text" id="math">
        </li>
        <li>
            <input type="submit" value="계산" id="calc" style="width: auto;">
        </li>
        <li>
            <label for="max">총점</label>
            <input type="text" id="max">
        </li>

        <li>
            <label for="avg">평균</label>
            <input type="text" id="avg">
        </li>
    </ul>
    <script>

        document.querySelector("#calc").onclick = () => {
            let ko = document.querySelector("#korean").value
            let eg = document.querySelector("#english").value
            let mt = document.querySelector("#math").value
            let mx = document.querySelector("#max")
            let av = document.querySelector("#avg")
            let sum = Number(ko) + Number(eg) + Number(mt)
            let avg = sum / 3
            max.value = sum
            av.value = avg
        }
    </script>

</body>

</html>

식 간단하게 줄이기

document.querySelectorAll("input[type='text']").forEach((e, i) => {
    console.log(e,i);
})

728x90

'FrontEnd' 카테고리의 다른 글

5/16 - DOM 요소 접근, JQuery (0)	2025.05.17
5/14 - flex, 반응형 웹 속성, CSS 그리드 레이아웃, 자바 스크립트 (0)	2025.05.17
5/13 - CSS, BOX, 이미지와 그라데이션, 반응형 웹 (0)	2025.05.17
5/12 - CSS (0)	2025.05.17
5/9 - HTML 태그, CSS 기본 (4)	2025.05.11

지원씨의 안드로이드 공부방

5/15 - JavaScript 문법

변수

자료형

템플릿 리터럴

논리형

자료 형 변환

비교

함수

VAR

함수

콜백 함수

클로저

이벤트

메모

'FrontEnd' 카테고리의 다른 글

티스토리툴바

5/15 - JavaScript 문법

변수

자료형

템플릿 리터럴

논리형

자료 형 변환

비교

함수

VAR

함수

콜백 함수

클로저

이벤트

메모

'FrontEnd' 카테고리의 다른 글

관련글

티스토리툴바