본문 바로가기

자바스크립트(JavaScript)55

[JavaScript] HTML 태그 불러오는 방법 자바스크립트에서  태그를 불러오는 방법 자바스크립트를 사용하는 이유는 특정 조건이 충족될 때 웹 문서 전체 또는 일부분을 제어하기 위해서이다.동적으로 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야한다.이러한 경우 문서객체모델(DOM)을 사용하면 요소를 제어할 수있다.CSS 에서 class, id, 태그 등의 '선택자(selector)'로 스타일을 구별해서 정의했던 것처럼 자바스크립트에서도 HTML태그를 불러올 때 '선택자(selector)'로 구분하여 불러온다. getElementBy getElementBy는 요소를 불러오는 메서드이다.각각 Id와 Name, TagName, Class 종류에 따라 이름이 달라지며, 소괄호 안에 선택자명을 입력하여 불러올 수 있다.메서드명에서 각각의 선택자.. 2024. 7. 26.
[JavaScript] 변수의 특징/주의점 (var, let, const), 변수의 범위와 호이스팅 var를 이용한 변수의 특징 / 주의점호이스팅(hoisting)이란?자바스크립트에서 변수를 사용할 때 조심해야 하는 개념이 있다. 바로 '호이스팅(hoisting)'이라는 개념이다.호이스팅은 '끌어올리다'라는 의미를 가지고 있는데, 이곳에선 상황에 따라 변수의 선언과 할당을 분리해서 선언부분을 스코프의 가장 위쪽으로 끌어올리는 것을 발한다.실제로 소스 코드가 맨 위로 올라가는 뜻이 아니라, 이런 방식으로 자바스크립트 엔진이 해석한다는 뜻이다. 예를 들어, var를 사용한 변수는 선언하기 전에 먼저 실행하고 이후에 선언하면 오류가 발생하는 것이 아니라 컴퓨터에서 임의로 undefined 값을 입력하여 값이 있는 것처럼 실행된다. 바로 호이스팅 때문이다.이런 경우 어디에서 오류가 발생했는지 찾기 어렵다는 단.. 2024. 7. 26.
[JavaScript] 함수란? 함수란?  함수는 숫자를 담는 상자라는 뜻으로, 데이터를 넣으면 함수에 들어있는 코드를 통해 원하는 결괏값을 반환한다.  예를 들어, 사과, 오렌지, 파인애플이 데이터라고 생각해 보자.과일들을 넣으면 함수라는 공장에서 여러 가지 첨가물이나 공정 과정을 거치고, 결과적으로 주스라는 결과 값을 반환한다.함수는 위의 예시에선 공정 과정, 즉 기능을 뜻한다. 함수의 장점은 함수는 한번 만들면 여러 번 재 사용이 가능하다는 것이다.같은 코드를 사용할 때마다 다시 작성하지 않고 작성해 놓은 함수를 호출만 해주면 같은 기능을 사용할 수 있다. 함수는 크게 '일반 함수 정의문'과 '익명 함수'로 나누어진다1. 일반 함수 1-1. 정의문 함수를 사용해서 코드를 저장한 것을 함수 정의문이라고 한다.변수를 선언할 때 var.. 2024. 7. 26.
[JavaScript] 일정한 시간 간격으로 코드 실행하고 중지시키기 / setInterval(), setTimeout() 일정한 시간 간격으로 코드 실행하기일정한 시간 간격으로 코드를 실행하는 함수로 setInterval()메서드와 setTimeout()메서드가 있다.setInterval()은 일정한 시간 간격으로 코드를 반복 실행하고,setTimeout()는 일정한 시간이 흐른 후에 코드를 한번 실행하고 종료한다.// 기본형 / 시간 간격은 밀리세컨즈(ms)가 기준이다. var 참조 변수 = setinterval(function(){자바스크립트 코드}, 시간간격); var 참조 변수 = setTimeout(function(){자바스크립트 코드}, 시간간격);예시를 들기 위해 변수를 만들어 보았다.// 예시 변수var addNumber = 0;var subNumber = 1000;var addNum.. 2024. 7. 24.
[JavaScript] 브라우저 객체 모델(Browser Object Model) 브라우저 객체 모델 Browser Object Model웹 브라우저 창에 문서가 표시되는 순간 브라우저는 html 소스를 읽으며 화면에 내용을 표시하고 객체를 만들어낸다. 웹 브라우저가 열리면 가장 먼저 window라는 객체가 만들어지고 밑으로 하위 요소에 해당하는 객체들이 생성된다. 하위객체는 웹 문서와 주소 표시줄같이 브라우저의 내용에 해당하는 요소를 가리킨다. 이러한 객체 모델을 브라우저객체모델(BOM, Browser Object Model)이라고 한다.자바스크립트로 객체 모델을 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있게 된다. 브라우저 객체 모델 종류window브라우저 창이 열릴때마다 하나씩 만들어진다. 브라우저 창 안의 요소 중 최상위(부모)객체이다.docum.. 2024. 7. 23.
[JavaScript] 내장 객체(Built-in Object)의 종류 내장 객체  Built-in Object 자바스크립트의 객체 종류 중 하나인 내장 객체(Built-in Object)는 자바스크립트 엔진에 내장되어 있어 필요한 경우 생성해서 사용하는 객체이다. 내장 객체의 종류로는 문자객체(String), 날짜(Date), 배열(Array), 수학(Math)객체가 있다.  내장 객체를 생성할 때에는 new 라는 키워드와 함께 생성함수를 사용한다.// 기본형var 참조변수(인스턴스) = new 생성함수(); 1. 보통 생성함수에 Object를 많이 쓴다.var 참조변수(인스턴스) = new Object();생성함수에 Object를 써서 객체를 생성했을 경우에 이제 그 객체에 기능(함수)와 속성(프로퍼티)를 지정할 수 있다. 예시로 tv라는 객체를 만들어 보겠다.** 참조.. 2024. 7. 15.

티스토리툴바