본문 바로가기

Front-End64

[JavaScript] Chapter 15. This this 함수 호출 방법에 따라 값이 결정 => 바인딩 전역 객체 (global Object) 모든 객체의 최상위 객체 자바스크립트에서는 window 객체 전역 객체에 바인딩 되는 경우 this는 전역 객체(window)에 바인딩 전역 함수 내부 함수 콜백 함수 등등.. // 내부 함수 function sFoo() { console.log("sFoo ::: " + this); // sFoo ::: [object Window] } function mFoo() { console.log("sFoo ::: " + this); // mFoo ::: [object Window] sFoo(); } this 바인딩 종류 기본 바인딩 암시적 바인딩 명시적 바인딩 new 바인딩 화살표 함수 기본 바인딩 기본 규칙 전역(g.. 2022. 12. 16.
[JavaScript] Chapter 14. Ajax - XMLHttpRequest, Fetch, JSON XMLHttpRequest Ajax의 핵심 서버와 데이터를 주고 받을 때, 사용 W3C 표준으로 정의 (주요 웹 브라우저에 내장) *IE5, IE6 => ActiveXObject 이용 XMLHttpRequest 사용 방법 IE7 이상, 크롬, 파이어폭스, 사파리, 오페라 var 변수명 = new XMLHttpRequest(); IE5, IE6 var 변수명 = new ActiveXObject("Microsoft.XMLHTTP"); var httpRequest; if (window.XMLHttpRequest) { // 모질라, 사파리, IE7 + ... httpRequest = new XMLHttpRequest(); } else if (window.ActiveXObject) { // IE6 이하 httpR.. 2022. 12. 15.
[JavaScript] Chapter 13. Ajax HTTP 통신 Hyper Text Transfer Protocol HTML, 데이터(동영상, 음성, 파일) 등을 주고 받기 위한 규약 *Https Https를 ssl로 암호화한 것 웹 동작원리 사용자에 의한 이벤트 발생 서버의 웹 서버로 요청 데이터베이스에서 데이터 조회 요청 결과 응답생성 웹 페이지 로드 (새로고침이 됨) Ajax Asynchronous JavaScript and XML = 비동기 자바스크립트와 XML을 의미. jQuery 라이브러리 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말한다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. 강력한 특징은 페이지 전체를 리프레쉬 하지 않고 일부만 로드.. 2022. 12. 15.
[JavaScript] Chapter 12. IIFE IIFE (Immediately Invoked Function Expression) 즉시 실행되는 함수 표현식 약자 표현 내부 변수는 외부로부터 접근 불가 IIFE 변수 할당 시 자체 저장 X 즉시 실행된 함수 결과만 저장 O 즉시 실행하고 없애버리기 때문에 함수명이 굳이 필요하지 않다 IIFE 사용 이유 불필요한 변수 및 함수 생성 X Scope 충돌 X 한 번만 호출하는 코드의 경우 사용 function init() { // 초기 설정 로직 } (function () { // 초기 설정 로직 })() IIFE 표현식 함수 리터럴을 () 감싼 형태 // 함수 리터럴 function sum(num1, num2) { return num1 + num2; } // IIFE (function () { // 로직.. 2022. 12. 14.
[JavaScript] Chapter 11. 호이스팅 호이스팅 (Hoisting) 변수의 정의가 그 범위에 따라 선언(declaration) / 초기화(initialization) / 할당 분리되는 것을 의미한다. 쉽게 말하면, 변수가 함수 내에서 정의되었을 경우, 선언이 함수의 최상위로, 함수 바깥에서 정의되었을 경우는 전역 컨텍스트의 최상위로 변경된다. 선언한 코드를 내부적으로 최상단으로 끌어올림 var와 함수 선언이 대상 => 선언된 var는 최상단으로 올라간다는 의미 => 선언된 let, const는 최상단으로 올라갈 수 없음 => 선언된 함수는 최상단으로 올라간다는 의미 1. 일반적인 코딩 순서 [선언] var myAge; [초기화 or 할당] myAge = 30; [코드 사용] document.write(myAge); // 선언 function .. 2022. 12. 14.
[JavaScript] Chapter 10. 스코프 스코프 (Scope) 유효 범위 동일한 식별자 충돌 방지 변수나 함수 선언 위치에 따라 스코프 지님 전역 스코프 (global Scope) 함수 레벨 스코프 (function-level Scope) 블록 레벨 스코프 (block-level Scope) var let const 글로벌 스코프 O O O 함수 레벨 스코프 O O O 블록 레벨 스코프 X O O 재선언 O X X 재할당 O O X 함수 레벨 스코프 (function-level scope) 함수 안에 선언한 변수 => 지역 변수 함수 외부에서 해당 변수 호출 시 오류 var strVar = "전역 스코프"; let strLet = "전역 스코프"; const strConst = "전역 스코프"; function fnScopeTest() { va.. 2022. 12. 13.
[JavaScript] Chapter 09. DOM DOM (Document Object Model) 문서 객체 모델 HTML, XML 문서의 인터페이스 문서의 구조화 된 표현 제공 ex) DOM 문서구조 구글 네이버 노드 (Node) HTML 문서 트리 구성하는 단위 값 노드 분류 설명 nodeName nodeValue 1 엘리먼트 노드 Element 태그 하나 태그 이름 Null 2 속성 노드 Attribute 태그 속성 태그 속성 속성값 3 텍스트 노드 Text 태그 안 내용 #text 내용 8 주석 노드 Comment 주석 #comment 내용 9 문서 노드 Document 문서 전체 #document 내용 DOM 문서구조 구글 네이버 속성 설명 firstChild 첫번째 자식 노드 구하기 lastChild 마지막 자식 노드 구하기 parentNo.. 2022. 12. 12.
[JavaScript] Chapter 08. 객체 객체 리터럴 데이터와 함수의 집합 프로퍼티와 메소드 var person = {}; var objName = { name1 : value1, name2 : value2, name3 : value3, name4 : function() { alert("test"); } }; 프로퍼티 (property) 객체 내부 속성 => key : value key 키, 속성명 문자열 따옴표 사용 또는 미사용 value 값, 속성 값 문자열, 숫자, 배열, 객체, 함수 등등 ex) var info = { age : 20, name : "홍길동", weight : "50kg", interests : ["music", "dancing"], desc : function() { alert("나의 정보"); } }; console... 2022. 12. 10.
[JavaScript] Chapter 07. 화살표 함수 화살표 함수 arrow function 함수의 표현식보다 간결하게 사용 가능 화살표 함수 사용 방법 let func = (arg1, arg2, ···) => expression arg1, arg2···은 매개변수 expression은 반환 결과 식 // 함수 선언 function sum(num1, num2) { return num1 + num2; } // 화살표 함수 let sum = (num1, num2) => num1 + num2; // 함수 호출 sum(10, 20); let myAge = 20; // 일반 함수 function checkMyAge(myAge) { document.write((myAge > 30) ? "30살 이상" : "30살 미만"); } // 화살표 함수 let checkMyA.. 2022. 12. 10.
[JavaScript] Chapter 06. 배열과 함수 Array 함수 (method) Array 객체 내 존재하는 함수 추가, 삭제, 분리, 합침, 정렬 등 존재 함수 (method) 설명 push 배열 끝에 추가 pop 배열 끝 삭제 unshift 배열 처음 추가 shift 배열 처음 삭제 indexOf 배열에서 탐색한 문자열을 처음 만난 요소 위치 반환 lastIndexOf 배열에서 탐색한 문자열을 처음 만난 요소 위치 반환 (역순) sort 배열 정렬 reverse 배열 거꾸로 뒤집기 slice 시작과 끝 범위 요소를 잘라 새로운 배열 생성 splice 일정 범위 요소 삭제, 새로운 요소 추가 concat 합치는 기능 join 배열 합쳐 문자열로 반환, 구분자 이용 가능 순회 함수 (method) 배열의 값을 읽기 위한 함수 배열 순회하면서 복사, 수.. 2022. 12. 10.

티스토리툴바