[JavaScript]JavaScript

HTML+CSS+JavaScript/JavaScript

[JavaScript]JavaScript

stonesy 2024. 3. 17. 18:06

728x90

📖JavaScript

프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원한다.
웹 브라우저가 JavaScript를 HTML과 함께 다운로드하여 실행한다.
웹 브라우저가 HTML 문서를 읽어 들이는 시점에 JavaScript Engine이 실행된다.
대부분의 JavaScript Engine은 ECMAScript 표준을 지원한다.

*JavaScript의 선언

<srcipt src="./main.js" type="text/javascript"></script> ⇒ type="text/javascript"는 text지만 javascript로 해석해줘

❗Window, DOM, BOM, 그리고 JavaScript

Window객체는 JavaScript의 최상위 객체이자 전역 객체이면서 모든 객체가 소속된 글로벌 객체이다. 이때, Window 객체의 구조는 다음과 같다.

DOM(Document Object Model)은 브라우저가 웹 문서를 이해할 수 있도록 구성된 것으로 HTML 요소를 파싱하여 구성된다. HTML과 JavaScript를 연결해주는 요소하고도 할 수 있으며, Javascript를 이용하여 각 요소에 접근할 수 있다. BOM(Browser Object Model)은 Javascript가 브라우저와 소통하기 위해서 만들어진 모델로, navigator, location,

document, history 등이 이에 해당된다.
location: url에 대한 정보를 제공
document: 현재 문서에 대한 정보 제공
navigator: 브라우저의 정보 제공
history: 브라우저의 방문 기록 정보 제공
screen: 브라우저 외부 환경에 대한 정보 제공

https://velog.io/@imok-_/JavaScript-DOM-BOM-%EC%9D%B4%EB%9E%80

[JavaScript] DOM, BOM 이란?

[JavaScript] DOM, BOM, Window에 대한 이해

velog.io

🔎변수

JavaScript는 변수를 선언할 때 타입을 명시하지 않고 var keyword를 사용하여 선언
JavaScript는 동적타입 언어. 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정 → 같은 변수에 여러 타입의 값을 할당할 수 있다.
JavaScript는 EDMAScript 표준에 따라 낙타 표기법(Camel case)를 사용한다.
키워드, 공백 문화 포함, 숫자로 시작 X
특수 문자는 _와 $ 허용

*낙타 표기법(Camel case)

여러 단어가 결합된 경우 각 단어의 첫 글자를 대문자로 쓰고 나머지 글자는 소문자로 쓰는 방식

예: camelCaseExample

🔎자료형

JavaScript에서는 자료형을 원시타입과 객체타입으로 분류하며, 원시 타입에는 숫자, 문자열, boolean, null, undefined와 같이 5가지가 있다.
숫자: JavaScript는 숫자를 정수와 실수로 나누어 구분하지 않는다.
- 숫자의 연산 처리시 실수 형태로 이루어지기 때문에 특정 소수점을 정확하게 표현하지 못한다.
- JavaScript는 언더플로우, 오버플로우, 0으로 나누는 연산에 대해서 예외를 발생시키지 않는다.
- 숫자와 관련된 특별한 상수 존재
  - Infinity: 무한대
  - NaN(Not a Number): 계산식의 결과가 숫자가 아님을 나타내는 상수

문자열
- 문자와 문자열을 따로 구분하지 않는다.
- 작은 따옴표 또는 큰 따옴표 둘다 사용 가능 + 백틱(``)
boolean
- 비어 있는 문자열, null, undefined, 숫자 0은 false로 간주된다.

null은 값이 없거나 비어있음을 뜻하고, undefined는 값이 초기화되지 않았음을 의미한다.

🔎호이스팅

호이스팅이란 var 선언문과 함수 선언문이 해당 scope의 최상단으로 끌어올려지는 현상이다. 즉, 이 경우 선언문이 선언되기 이전에 참조가 가능해진다.

Javascript에서 변수의 생성은 다음과 같은 과정을 거친다.1. 선언 단계: 변수 객체에 변수를 등록한다.2. 초기화 단계: 변수 객체에 등록된 변수를 메모리에 할당하고, undefined로 초기화된다3. 할당 단계: undefined로 초기화된 변수게 실제값을 할당한다.

⇒1,2 단계는 한꺼번에 이루어짐

console.log(num); //undefind; → Hoisting
var num = 123;
console.log(num); //123
{
	var num = 456;
}
console.log(num); //456 
//→ num은 전역 변수이므로 전역에 선언한 변수 num에 두번째 num이 재할당되기 때문에 456를 갖는다.
//해결책: let, const

❗변수 호이스팅과 함수 호이스팅

함수 선언문으로 정의된 함수는 JavaScript 엔진이 스크립트가 로딩되는 시점에 이를 변수객체에 저장한다. 함수 선언, 초기화, 할당이 한번에 이루어진다.

var result = plus(5,7);
console.log(result);

function plus(num1, num2) {
	return num1 + num2;
}

단, 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생한다.

var result = plus(5,7);
console.log(result);

var plus = function(num1, num2) {
	return num1 + num2;
}

※예제

<!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>
    /**
     * 선언적 함수
     * function 함수명(인자들){}
     * 
     * 표현식(익명) 함수 - 변수, 인자, 리턴으로 활용
     * function(){}
     */
     
     
    test1();
    //test2(); //변수 호이스팅이므로 undefined로 초기화 되어 있어 error 발생
    
    function test1(){
       console.log('test1 호출됨');
    }

    var test2 = function(){
        console.log('test2 호출됨');
    }
    console.log(window);
</script>
<body>
</body>
</html>

🔎==연산자와 ===연산자의 차이

===는 타입이 포함된다.

🔎JavaScript 객체

객체는 이름과 값으로 구성된 프로퍼티(Property)들의 집합
전역 객체를 제외한 JavaScript 객체는 프로퍼티를 동적으로 추가하거나 삭제할 수 있다.
JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용할 수 있다.

let empty_object = {}
let member = {
	"user_name": "스톤지",
	age: 20,
	city: "서울",
};

//객체의 속성에 접근
console.log(member.age); //1. dot 표기법
console.log(member["age"]); //2. [] 표기법

//속성명에 연산자가 포함된 경우 [] 표기법만 접근 가능
console.log(member["user-name"]); //스톤지
console.log(member.user-name); //NaN

console.log(member.classNum); //undefined
console.log(member.classNum || 10); //10

console.log(member.classNum || 10); //10
//→member.classNum이 존재하면 그 값을 출력하고, 존재하지 않으면 대신에 10을 출력하는 코드, 이는 변수가 존재하지 않거나 비어 있을 때 기본값을 설정하는 일반적인 JavaScript의 사용 패턴 중 하나

🔎배열

<!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>
        /*
            배열
            - 하나의 변수에 여러개의 데이터를 저장
            - length 속성이 있고 배열의 길이를 나타낸다.
            - index는 0부터 시작 length - 1까지 접근
            - 배열의 사이즈는 고정되어 있지 않다.
            - 다양한 타입의 데이터를 저장할 수 있다.
            - 선언 방법
            1. 변수명 = [값, ...];
            2. 변수명 = new Array();
        */
       var a1 = [0,1];
       var a2 = new Array();

       console.log('a1의 길이:', a1.length);
       console.log('a2의 길이:', a2.length);

       //배열에 데이터를 추가
       //변수[index] = 값 //해당 index에 데이터가 없으면 추가
       //변수.push(값)     //맨 끝에 추가됨.
        a1.push(2);
        a1[5]=5;
        console.log('데이터 추가후 a1: ', a1);
        console.log(a1[3]); //3번째 index는 초기화가 되지 않아 undefined

        //1. 배열 요소 삭제
        //1. pop()
        //  - 배열의 마지막 요소를 삭제후 삭제한 요소를 리턴한다.
        //  - 배열에 삭제할 요소가 없는 경우 undefined
        console.log(a1.pop());
        console.log(a2.pop());

        //2. shift()
        //  - 배열의 첫번째 요소를 삭제후 삭제한 요소를 리턴한다.
        //  - 배열에 삭제할 요소가 없는 경우 undefined
        console.log(a1.shift());
        console.log(a2.shift());

        //3. delete 변수명[index]: index번째 요소를 삭제,
        // 해당 요소가 없어도 error가 발생하지 않는다.
        delete a1[5];   //5번째 요소가 없지만 오류가 발생하지 않는다.

        //4. splice(startIdx, len): 시작 index부터 지정한 개수까지 삭제해서 리턴
        var a3 = [1,2,3,4,5];
        var a4 = a3.splice(1,2);
        console.log('a3: ', a3);
        console.log('a4: ', a4);

        //5. filter(함수)
        var a5 = [1,2,3,4,5,6];
        //짝수만 추출
        var evens = a5.filter(function(data){return data%2===0 })
        console.log('evens: ',evens);

        //6. sort함수
        a5.sort(function(a,b){return b-a;})
        console.log('a5:',a5);

        var a6 = [1, 'hello', 3.14, [1,2,3]];

    </script>
</head>
<body>
    
</body>
</html>

728x90

'HTML+CSS+JavaScript > JavaScript' 카테고리의 다른 글

ES6+ (0)	2024.11.01

현재글[JavaScript]JavaScript

https://github.com/seoyoung927

250x250

Today :
Yesterday :

stonesy