자바스크립트(JavaScript)/자바스크립트33 [JavaScript] 자바스크립트에서 CSS에 접근하는 방법 자바스크립트에서 css에 접근하기자바스크립트로 CSS의 특정 속성을 제어하고 싶다면 먼저 제어하고 싶은 대상을 불러와야한다.이후 제어할 수 있는 속성이나 메서드를 활용하면 CSS 속성을 제어할 수 있다. 1. style 속성대상을 불러온 뒤 CSS에 접근을 할 때는 document 객체에 포함되어있는 style 속성을 이용한다.style을 이용해 CSS에 접근했다면 어떤 style 속성을 바꿀 것인지 명시한다.이 때, style 뒤에 바꾸고 싶은 속성을 카멜 표기법으로 작성한다. (ex. z-index = zIndex)이후 속성 값을 부여하면 해당 선택자에 속성이 적용된다.// 해당 id 선택자에 적용된 css 스타일 속성에 현재 들어있는 값을 알고 싶을 경우 document.선택자.styl.. 2024. 8. 8. [JavaScript] DOM 이벤트란? 속성과 메서드 파악하기 DOM 이벤트(event)란? DOM 이벤트란 사용자가 해당 페이지에서 하는 모든 행위를 뜻한다.클릭이나 더블클릭, 마우스휠로 페이지를 위 아래로 이동하거나 태그위에 마우스를 올리는 등 모든 행위를 ' 이벤트 '라고한다.자바스크립트에서 이벤트를 실행시키려면 이벤트 처리기(event handler)를 연결해야한다.HTML 태그에 직접 이벤트 핸들러를 연결시킬수도 있지만 태그와 스크립트소스가 섞여있어 복잡한 프로그램에는 적합하지 않다.이럴 때 자바스크립트 내부에서 이벤트 핸들러를 연결하면 html태그와 스크립트 소스를 완전히 분리시킬 수 있다.1. 해당 요소에 이벤트를 직접 적용해당 요소에 이벤트를 1개만 직접 적용할 때 사용한다. 다른 태그에는 해당 이벤트가 적용되지 않는다. // 기본형 요소명.. 2024. 8. 7. [JavaScirpt] 객체 생성자 함수(Object Contructor Function), 프로토타입(prototype) 모든 객체는 프로토타입(prototype)으로부터 생성자 속성을 상속받는다. 1. 객체의 생성자바스크립트에서는 다음과 같은 방법으로 객체를 생성한다. 1. 리터럴 표기(literal notation)를 이용한 방법리터럴 표기 법은 프로퍼티의 이름과 값을 콜론(:)으로 연결하고, 쉼표(,)를 사용해 다른 프로퍼티와 구분하는 방식이다.var 객체이름 = { 프로퍼티1이름 : 프로퍼티1의값, 프로퍼티2이름 : 프로퍼티2의값, ...};2. 생성자 함수(constructor function)를 이용한 방법new 연산자를 사용하면 객체를 생성하고 초기화 할 수 있다.이때 사용되는 메소드를 생성자(constructor)라고 하며, 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 한다.자바스크.. 2024. 8. 5. [JavaScript] 함수의 호이스팅, 스코프, 전역함수, 지역함수 함수의 호이스팅 일반 함수 정의문(=이름이 있는 함수)의 경우 호이스팅 기능을 지원한다. 함수의 호이스팅은 함수 정의문보다 함수 호출문이 등장하더라도 해당 함수를 정상적으로 실행하는 것을 말한다.일반 함수가 정의되면 자바스크립트 엔진 메모리 공간 안에 함수의 이름을 이용하여 미리 저장해둔다.저장된 일반 함수는 해당 함수보다 호출문이 먼저 등장하더라도 정상적으로 호이스팅에 의해 실행된다.하지만 익명함수(=이름이 없는 함수)의 경우 호이스팅 기능이 적용되지 않는다.그렇기 때문에 함수 정의가 먼저 이루어진 다음 그 후에 함수 호출문이 등장해야 함수가 실행된다.// 1. 일반 함수 정의문// 함수호출문이 먼저 등장해도 호이스팅에 의해 정상 실행된다. 함수명(); function.. 2024. 7. 30. [Java Script] 문서 객체 모델(DOM)과 DOM TREE, 노드 추가방법 문서 객체 모델Document Object Model (DOM)자바스크립트를 사용하는 이유는 특정 조건이 충족될 때 웹 문서 전체 또는 일부분을 제어하기 위해서이다.동적으로 반응하게 하려면 웹 문서의 모든 요소를 따로 제어할 수 있어야한다.이러한 경우 문서객체모델을 사용하면 요소를 제어할 수있다.텍스트와 이미지가 들어있는 웹문서를 예로 들어보겠다.웹 브라우저는 마크업 정보를 보면서 단락의 개수나 내용을 확인하며 텍스트 내용을 분석하고 저장한다.또한 이미지 파일의 개수와 경로, 대체 텍스트등을 파악하여 이미지별로 정리 후 인식한다.이러한 텍스트나 이미지 요소를 브라우저가 제어하려면 두 요소를 따로 구별하여 인식하여야한다. 이러한 모든 정보 요소를 자바스크립트로 가져와서 프로그래밍할 때 DOM을 이용한다.D.. 2024. 7. 30. [JavaScript] 문자열을 숫자로 반환하는 메서드 Number(), parseInt() 문자열 숫자를 숫자로 만드는이유자바스크립트에서는 "문자열 숫자"가 존재한다.문자열 숫자란 1,2,3,4와 같이 숫자의 모양이지만 숫자로서의 기능은 하지 못하고 문자로서 존재하는 숫자,즉 "문자형 데이터"를 말한다.예를들어 prompt와 같은 메서드를 사용할 경우 사용자가 숫자를 입력해도 문자형 데이터로 값을 반환 받는다.이렇게 받은 문자형 데이터는 숫자임에도 불구하고 문자형이기 때문에 산술연산이 불가능하다.이를 가능하게 만들기 위해 Number()와 parseInt() 메서드를 사용하는 것이다. Number() Number 메서드는 말 그대로 숫자로 반환해주는 메서드이다.Number("123"); // 123Number("1.23") === 1.23 // trueNumber("12.3"); // 12... 2024. 7. 29. 이전 1 2 3 4 5 6 다음
