웹코딩/javascript 10

document 로드 상태 확인

readyState  속성을 사용하여 제어 할 수 있다. readyState속성은 document  객체의 속성이며loading, interactive, complete 3가지 상태를 가지고 있다. loading : document 로딩 중interactive : 문서의 로딩은 끝이 나고 해석 중 이지만 images, stylesheets, frames과 같은 하위 자원들은 로딩되고 있는 상태이다.complete : 로딩 완료    사용 예시:switch (document.readyState) { case "loading": // The document is still loading. break; case "interactive": // The document has finished ..

async , await 정의 및 사용방법

await는 JavaScript에서 비동기 작업을 동기적으로 처리할 수 있게 해주는 키워드입니다. fetch 함수와 함께 사용하면 네트워크 요청을 보내고 응답을 받을 때까지 코드 실행을 잠시 멈추게 할 수 있습니다. await의 의미와 사용 방법의미:await는 async 함수 내에서만 사용할 수 있습니다.await는 Promise가 해결될 때까지 함수 실행을 일시 중지하고, 해결된 값을 반환합니다.await는 비동기 작업을 동기 코드처럼 작성할 수 있게 해줍니다.사용 방법:async 함수 내에서 await를 사용하여 비동기 작업을 처리합니다.fetch 함수는 네트워크 요청을 보내고, Promise 객체를 반환합니다. 이 Promise가 해결될 때까지 await는 기다립니다.async function g..

JSON.stringify() 사용법

JSON.stringify() JSON.stringify() 메서드는 자바스크립트 객체를 JSON 문자열로 변환하는 데 사용됩니다. 이 메서드는 서버에 데이터를 보내거나 로컬 스토리지에 객체를 저장할 때 유용합니다. JSON.stringify()는 세 개의 매개변수를 받을 수 있으며, 그중 하나만 필수입니다.구문javascript코드 복사JSON.stringify(value, replacer, space);매개변수 설명1. value (필수):JSON 문자열로 변환할 자바스크립트 값입니다.이는 객체, 배열, 문자열, 숫자, 불리언 또는 null일 수 있습니다.예를 들어:const obj = { name: "John", age: 30 }; const jsonString = JSON.stringify(obj..

split/substr/substring

javascript 내장 된 함수 중 문자열을 나누는 메서드에 대해서 알아보고 예시를 통해서 활용해보자. split(“”) split함수는 split(“”)와 같이 사용 배열로 반환한다. var a = "1,2,3" ; var array = a.split(","); //출력 array[0] : 1 substr() substr함수는 substr(시작인덱스,길이)와 같이 사용 var a = "1234567890" ; var abc = a.substr(2, 5); //출력 abc : 34567 substring() substring함수는 substring(시작인덱스,종료인덱스)와 같이 사용 시작인덱스는 추출포함(O), 종료인덱스는 추출포함(X) 음수 입력시 ‘0’으로 인식 매개변수 작은 숫자가 시작인덱스, 큰..

document ready VS window onload

브라우저가 랜더링 되는 과정 1. HTTP 통신을 통해서 파일 로딩 2. HTML 파일을 파싱 3. 랜더트리구축 4. 랜더트리배치 5. 화면에 그리기 위 순서대로 브라우저는 랜더링 과정을 거쳐서 클라이언트는 브라우저화면을 통해 웹정보를 확인 할 수 있다. jquery의 $(document).ready() 의 경우 DOM이 로드된 시점 즉 3번에 해당하면 배치와 그리기가 완료 되지 않은 상태에서 실행문을 실행된다. 반면 window.onload의 경우 랜더링이 완료된 시점에서 실행구문이 실행된다. DOM 요소를 조작하는 코드를 head 영역에서 실행할 경우 아래와 같이 해당 DOM 요소 배치 되지 않았기때문에 노출할 수 없다. javascript는 인터프리터 언어이기 때문에 html 코드의 상단에서 부터 ..

var, let, const 차이점 / 호이스팅이란? / null, undefinded

var, let, const 차이점 var​: 재선언(O), 재할당(O) var(variable)는 변수 선언 후 재선언이 가능하고 재할당도 가능하다. let​: 재선언(X), 재할당(O) let는 변수 선언 후 재선언이 불가능하고 재할당만 가능하다. let으로 선언한 변수는 자신을 선언한 블록과 모든 하위 블록을 스스로의 스코프로 가집니다. 이런 점에서는 let이 var와 유사합니다. 그러나 둘의 중요한 차이는, var의 경우 스코프가 '자신을 선언한 블록'이 아니라, 자신의 선언을 포함하는 함수라는 점입니다. const​(constant ): 재선언(X), 재할당(X) const는 변수 선언 후 재선언 및 재할당 불가능하다. 호이스팅 호이스팅(Hoisting)이란, var 선언문이나 function ..

자바스크립트 기초 문법

키워드 자바스크립트가 처음 만들어질 때 정해진 특별한 의미가 있는 단어를 ‘키워드’라고 합니다. 키워드 참고: https://www.w3schools.in/javascript-tutorial/keywords/ 식별자 자바스크립트에서 이름을 붙일때 사용하는 단어입니다. 식별자의 예로는 변수명과 함수 명이 있습니다. 식별자 규칙: ● 키워드를 사용하면 안됩니다. ● 숫자로 시작하면 안됩니다. ● 특수 문자는 _와 $만 허용합니다. ● 공백 문자를 포함할 수 없습니다. 식별자의 의미를 더 명확하게하는규칙: 예) 사용가능 : alpha, alpha10, _alpha, $alpha, Alpha, ALPHA 사용 불가능 : break, 234alpha, has space ● 생성자 함수의 이름은 항상 대문자로 시작..

javascript / DOM / BOM / html 에 대한 이해

javascript? 자바스크립트​(​영어​: ​JavaScript)는 ​객체 기반​의 ​스크립트 프로그래밍 언어​이다. 이 언어는 ​웹 브라우저​ 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 프로토타입 기반 프로그래밍​은 ​객체지향 프로그래밍​의 한 형태의 갈래로 클래스​가 없고, ​클래스 기반​ 언어에서 ​상속​을 사용하는 것과는 다르게, ​객체​를 원형(​프로토타입​)으로 하여 ​복제​의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다. 프로토타입기반 프로그래밍은 ​클래스리스​(​class-less​), 프로토타입 지향​(prototype-oriented) 혹은 ​인스턴스 기반​(instance-based) 프로그래밍이라고도 한다. ECMA..