개발/Javascript4 html 자바스크립트 위치- 브라우저 작동 방식 자바스크립트는 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. HTML 파서는 script 태그를 만나면 자바스크립트 코드를 실행하기 위해 DOM 생성 프로세스를 중지하고 자바스크립트 엔진으로 제어 권한을 넘긴다. 제어 권한을 넘겨 받은 자바스크립트 엔진은 script 태그 내의 자바스크립트 코드 또는 script 태그의 src 어트리뷰트에 정의된 자바스크립트 파일을 로드하고 파싱하여 실행한다. 자바스크립트의 실행이 완료되면 다시 HTML 파서로 제어 권한을 넘겨서 브라우저가 중지했던 시점부터 DOM 생성을 재개한다. 이처럼 브라우저는 동기(Synchronous)적으로 HTML, CSS, Javascript을 처리한다. 이것은 script 태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수.. 2020. 9. 8. 자바스크립트 Promise Promise - 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성. - promise 객체 사용(Javascript에서 비동기 함수 로직을 처리한 이후의 결과를 얻기 위한 객체) - 이때 promise는 인자로는 Executor를 받는데, 이는 resolve 와 reject 라는 두 개의 함수를 매개변수로 받는 실행함수. 연산이 성공적으로 완료되었을 때 resolve함수를 호출하고, 오류가 발생하면 reject함수를 호출. - promise는 다음 세가지 상태 중 하나의 상태. pending(대기): 비동기 처리 로직이 이행되거나 거부되지 않은 상태 new Promise(function(resolve, reject) { // ... .. 2020. 8. 20. DOM - Javascript DOM(Domcument Object Model) 웹페이지에 접근할 수 있게 해주는 일종의 인터페이스입니다. 이는 원본 HTML 문서의 객체 기반으로 표현합니다. 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어집니다. DOM의 구조는 노드 트리로 표현됩니다. 트리라고 표현하는 이유는 부모 줄기가 여러개의 나뭇가지를 가지고 있고 또 각각의 나뭇가지는 입들을 가질 수 있는 트리의 구조와 같은 구조로 이루어져 있기 때문입니다. 이때 html태그는 부모줄기, 루트 요소 안에 있는 태그들은 나뭇가지, 요소 안의 콘텐츠는 잎에 해당합니다. DOM - Node 접근 javascript에 DOM을 조작할 수 있는 API가 존재합니다. Node를 선택하여 접근할 수 있는데, //id로 dom 객.. 2020. 8. 19. Javascripts -Ajax란? Json? Ajax가 무엇인지 알기 전에 웹에서의 통신과 자바스크립트에 대해 알아보겠습니다. 통신? 웹에서 통신은 웹 브라우저와 서버 간에 Data를 주고 받는 것을 의미합니다. html 파일들이 브라우저에게 전송이 되고, 브라우저는 해당 파일을 해석하여 컴퓨터 화면에 띄워주는 것(rendering하는 것)입니다. 자바스크립트란? JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어입니다. HTML과 CSS와는 다른, 웹 브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어입니다. 프로그래밍언어는 컴퓨터와 인간이 의사소통하기 위해 나타난 것입니다. 그리고 의사소통을 하기 위한 규칙이 언어별로 있는데, 이를 문법이라 합니다. 이는 HTML이 한번 화면에 출력된 후에는 그 형태나 동작.. 2020. 8. 3. 이전 1 다음 728x90
