본문 바로가기
728x90

JS/JavaScript

JS/JavaScript 2023. 9. 11. [JaraScript] 변수와 함수의 호이스팅 호이스팅이란? 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정으로 함수, 변수 등을 선언 이전에 호출시켜도 호출이 되는 것. 변수(함수) 선언 단계 let과 const 변수의 선언 단계 var 변수의 선언 단계 let과 const 키워드 / var 키워드 console.log(letKeyword); // let, const키워드는 메모리가 할당되기 전 참조하려고(TDZ에 위치) 하기 때문에 Error // letKeyword is not defined let letKeyword = 'let is safe'; console.log(varKeyword); // var 키워드는 선언 단계와 초기화 단계가 묶어져서 진행되므로 선언..
JS/JavaScript 2022. 5. 9. [JavaScript] 이벤트 이벤트 - 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미 - 웹 페이지에 사용된 자바스크립트는 발생한 이벤트에 반응하여 특정 동작을 수행 - 자바스크립트는 비동기식 이벤트 중심 프로그래밍 모델이라고 함 이벤트 타입(Event Type) https://developer.mozilla.org/ko/docs/Web/Events - 발생한 이벤트의 종류 - 이벤트명이라고도 부름 - 가장 많이 사용되는 키보드, 마우스, HTML DOM, Window 객체등을 처리하는 이벤트가 많이 제공 onclick, onkeypress, onLoad, ... 이벤트 타입 문자열을 클릭하세요 이벤트 타겟(Event Target) - 이벤트가 일어날 객체 ------ ------ -------- 이벤트타겟 이벤트..
JS/JavaScript 2022. 5. 9. [JavaScript] 폼객체 예제 (회원가입) 회원가입 // 주민등록번호 변경 값 확인용 아이디 : 비밀번호 : 비밀번호 확인 : 이름 : 휴대폰 번호 : 이메일 : 취미 : 드라이브 영화감상 쇼핑 게임 운동 주민등록번호 : - 우편번호 : 주소 : 상세주소 : 참고항목 :
JS/JavaScript 2022. 5. 4. [JavaScript] 폼객체 폼 객체(window 객체의 하위 객체) // apple 작성 폼의 접근 const frm = document.myform; // name을 통해 접근 const frm = document.getElementById('regform'); // id를 통해 접근 const frm = document.forms[0]; // regform const frm1 = document.forms[1]; // etcform 아이디 value 접근 const id = document.myform.userid.value; // apple const id = frm.userid.value; // apple const id = frm.elements[0].value; // apple const id = frm.elements..
JS/JavaScript 2022. 5. 3. [JavaScript] 노드 노드 - HTML DOM은 노드라고 불리는 계층적 단위에 정보를 저장 - HTML 문서의 정보는 "노드트리"라고 불리는 계층적 구조에 저장 - 노드트리는 노드들의 집합이며 노드간의 관계 - 노드트리는 최상위 레벨인 루트 노드로부터 시작하고, 가장 낮은 텍스트 노드까지 존재 - HTML DOM을 이용하여 노드트리에 포함된 모든 노드에 접근 노드 종류 문서 노드 : 문서 전체를 나타내는 노드 요소 노드 : HTML 요소를 나타내는 노드, 속성 노드를 가질 수 있는 유일한 노드 속성 노드 : HTML 요소의 속성을 나타내는 노드 텍스트 노드 : HTML 문서의 모든 텍스트 주석 노드 : HTML 문서의 모든 주석 노드간의 관계 parentNode : 부모 노드 children : 자식 노드 childNodes..
JS/JavaScript 2022. 5. 3. [JavaScript] 문서 객체 모델(Document Object Model) 문서 객체 모델(Document Object Model) - HTML문서나 XML문서등을 접근하기 위한 일종의 인터페이스 - 문서내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공 document 객체 - 웹페이지 자체를 의미하는 객체 - 웹페이지에 존재하는 HTML 요소에 접근하고자 할 때 반드시 document 객체로부터 시작 문서 객체 모델 - 1 Java HTML CSS JavaScript JSP Spring Python MySQL Oracle Git
JS/JavaScript 2022. 5. 3. [JavaScript] 자바스크립트의 내장 객체 (loacation, history, navigator 객체) location 객체 - 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용 - window 객체의 location 프로퍼티와 document 객체의 location 프로퍼티에 같이 연결 - HTML 문서를 이동할 때 사용 href : 전체 URL을 리턴 console.log(location.href); // 전체 URL location.href = "
JS/JavaScript 2022. 5. 3. [JavaScript] 자바스크립트의 내장 객체 (Math, String, Date객체) 자바스크립트의 내장 객체 Math 객체 - 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓음 min() - 최소값을 반환 - 매개변수가 전달되지 않으면 Infinity를 반환 - 비교할 수 없는 값이 포함되어 있으면 NaN을 반환 max() - 최소값을 반환 - 매개변수가 전달되지 않으면 -Infinity를 반환 - 비교할 수 없는 값이 포함되어 있으면 NaN을 반환 round() - 소수점 첫번째 자리에서 반올림하여 반환 floor() - 소수점 첫번째 자리에서 내림 ceil() - 소수점 첫번째 자리에서 올림 randon() - 0보다 크거나 같고 1보다 작은 무작위 소수를 반환 Math 객체 String 객체 - 문자열을 쉽게 만들고 다룰 수 있도록 함 const str = "자바스크립트";..
JS/JavaScript 2022. 5. 3. [JavaScript] 프로토타입 프로토타입(prototype) - 자바스크립트의 모든 객체는 프로토타입이라는 객체를 포함 - 모든 객체는 프로토타입으로부터 프로퍼티와 메소드를 상속 - 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받음 const Rucy = new Dog(); // Dog.prototype
JS/JavaScript 2022. 5. 3. [JavaScript] 자바스크립트의 객체 객체를 만드는 방법 1. 리터럴 표기법 ( 객체를 하나 만들 때 사용하는 것이 좋음 ) const 객체명 = {}; // 빈 객체 생성 const 객체명 = { 프로퍼티명1 : 값1, 프로퍼티명2 : 값2, ... 프로퍼티메소드명1: function() { ... } } ✅ 프로퍼티(property) - 객체내의 변수 또는 함수 - 객체내의 변수는 프로퍼티라고 부르며, 함수는 프로퍼티 메소드라고 부름 프로퍼티 2. 생성자를 이용한 객체 생성 ( 객체를 여러개 만들 때 유용. 코드 재활용 가능 ) - new 연산자를 사용하여 객체를 생성하고 초기화 할 수 있음 - 생성자는 메소드이며, 이 메소드는 새롭게 생성되는 객체를 초기화하는 역할을 함 function 생성자명(매개변수1, 매개변수2 ..) { thi..
JS/JavaScript 2022. 4. 29. [JavaScript] 변수의 범위 변수의 범위 1. 지역 변수 - 함수 내에서 선언된 변수 - 지역 변수는 변수가 선언된 함수(블록) 내에서 유효하고 함수가 종료되면 메모리에서 사라짐 function func1(x, y) { // x, y 지역변수 let sum = 0; // sum 지역변수 ... console.log(x, y, sum); // 값 출력 } console.log(x, y, sum); // undefined 2. 전역 변수 - 함수의 외부에서 선언된 변수 - 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹페이지가 닫혀야만 메모리에서 사라짐 let global = 0; function func1(x, y) { console.log(global) // 값 출력 ... } console.log(global) //..
JS/JavaScript 2022. 4. 28. [JavaScript] 함수 만들기 함수 만들기 1. 이름만 존재하는 함수 function 함수명() { 함수가 호출되었을 때 실행할 문장; ... } 함수명(); 2. 매개변수가 있는 함수 function 함수명(매개변수1, 매개변수2, ..) { 함수가 호출되었을 때 실행할 문장; ... } 함수명(값1, 값2, ..); 함수1 3. 디폴트 매개변수 - 매개변수를 정하지 않으면 대신 기본값을 변수에 저장 function 함수명(매개변수1=값1, 매개변수2=값2, ..) { 함수가 호출되었을 때 실행할 문장; ... } 함수명(값1, 값2 ..); 함수명(); // function 함수명(매개변수1=값1, 매개변수2=값2, ..)에 설정한 기본값이 설정됨 4. 나머지 매개변수 - 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지..

티스토리툴바