TIL/JavaScript (14) 썸네일형 리스트형 [JavaScript] DOM(Document Object Model) DOM(Document Object Model) - HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것 - 모든 노드 객체에 접근할 수 있는 요소와 메소드를 제공한다. - HTML에 있는 태그를 구조화(트리) 했을 때 각각의 태그가 노드이다. - 요소 노드(Elements Node) : 태그 그 자체를 의미한다. - 텍스트 노드(Text Node) : 태그에 기록 되어 있는 문자를 의미한다 * 텍스트 노드를 가지는 태그(h?, p)와 가지지 않는 태그(img 등)가 있음 DOM 탐색하기 documentElement, head, body function test1(){ console.log("-- HTML --"); console.log(document.documentElement); .. [JavaScript] 숫자, 문자, 날짜 다루기 숫자 문자 날짜 다루기 숫자 관련 메소드 isNaN(value) : 인수를 숫자로 변환한 다음 NaN(Not a Number : 에러를 나타내는 값)인지 테스트한다. isFinite(value) : 인수를 숫자로 변환하고 변환한 숫자가 NaN/Infinity/-Infinity가 아닌 일반 숫자인 경우 true를 반환 function test1(){ console.log('isNaN(NaN) : ' + isNaN(NaN)); console.log("isNaN('abc') : " + isNaN('abc')); console.log("isNaN('1') : " + isNaN('1')); console.log("isNaN(2.8) : " + isNaN(2.8)); console.log("isFinite('1').. [JavaScript] 객체 객체 - 다른 자료형은 오직 하나의 데이터만 담을 수 있는 원시형(primitive type)이지만 객체는 다양한 데이터를 담을 수 있다. 객체 선언 및 호출 - 객체는 프로퍼티(키-값 쌍)를 저장하며 키 값을 사용하여 속성을 식별한다. - 키는 문자열이며 속성에는 모든 자료형이 올 수 있다. - 객체 생성자 또는 중괄호 {} 를 사용하여 객체를 생성한다. function test1() { //객체 생성자 호출 let obj = new Object(); //객체 리터럴 선언 let obj2 = {}; let product = { //키-값 쌍으로 구성된 프로퍼티 pName : 'Dry Mango', origin : 'Phillipines', price : 10000, ingredient : ['mango.. [JavaScript] 함수-2, 배열 함수의 반환형 - return문이 없거나 return 지시자만 있는 함수는 undefined를 반환 1~100 사이의 랜덤값을 반환하는 함수 콜백 함수 배열이란? - 자바스크립트에서는 "모든 자료형"을 보관하는 변수의 모음을 배열로 처리한다. - 자바에서의 컬렉션과 유사하다. 문자열과 더해지면서 toString() 호출하여 "," 기준으로 합쳐진 문자열이 반환됨 console.log('arr : ' + arr); 인덱스로 접근 console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); console.log(arr[3]); 배열 안의 배열 인덱스 접근 console.log(arr[3][0]); console.log(arr[3][1]); console.l.. [JavaScript] 형변환, 연산자, 함수 문자형변환 alert 메소드의 매개변수는 문자형이므로 alert(value)에서 value가 다른 타입이면 문자형으로 자동 변환 된다. 또한 String(value) 함수 호출로 변환할 수도 있다. 숫자형변환 수학과 관련 된 함수와 표현식에서 자동으로 변환 된다. 또한 Number(value) 함수 호출로 변환할 수도 있다. 논리형변환 논리 연산 수행 시 발생한다. 또한 Boolean(value) 함수 호출로 변환할 수도 있다. 문자열과 숫자의 '+' 연산 문자열 + 숫자 = 문자열 숫자 + 숫자 + 문자열 = 숫자가 먼저 계산 되고 뒤의 문자열과 합쳐진다 기본적인 연산자의 사용과 우선 순위 등은 Java와 크게 다르지 않으나 차이가 있는 부분에 대해서만 확인해보자. 비교 연산자를 통한 문자열 비교 - .. [JavaScript] JavaScript개요, 변수와 자료형, 데이터 입출력 JavaScript란? HTML이 웹 문서의 뼈대 역할, CSS가 그 뼈대를 꾸며주는 역할이라면 자바스크립트는 생동감을 불어넣기 위해 만들어진 프로그래밍 언어이다. 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부르고, 스크립트는 웹 페이지의 HTML안에 작성 가능하며 웹페이지 로드 시 자동으로 실행 된다. 브라우저에는 '자바스크립트 가상 머신'이라 불리는 엔진이 내장되어 있다. JavaScript의 실행방식 엔진이 스크립트를 읽고(파싱) 읽어들인 스크립트를 기계어로 전환(컴파일)하면 기계어로 전환 된 코드가 실행된다. 전체를 해석해놓은 컴파일 언어와는 차이가 있다. JavaScript로 수행할 수 있는 기능 페이지에 새로운 HTML 추가 기존 HTML과 스타일 수정 마우스 클릭 및 이동, .. 이전 1 2 다음
