Front-End (30) 썸네일형 리스트형 문서 스크립팅 클라이언트 자바스크립트의 주 역할은 정적인 HTML 문서를 동적으로 작용할 수 있게 해주는 것이다. 이렇게 웹 페이지의 내용을 제어하는 것이 주 역할이다. Window객체에는 Document 객체를 참조하는 document 프로퍼티가 존재한다. 이 프로퍼티는 해당 창의 내용 정보를 가지고 있다. 즉, 문서 내용을 나타내고 조작하는 중요한 역할을 하는 객체이다. DOM API의 일부이다.( 이게 뭔 소리여?? ) DOM 개요 Document Object Model, 즉 DOM은 HTML과 XML 문서의 내용을 조작할 수 있는 API이다. HTML의 요소 집합(태그) 들이 DOM에서는 객체의 계증 구조로 표현된다. HTML이 DOM 객체로 된 그림이다. 최상단에는 문서 전체를 나타내는 Document 객체가.. Section 5:Object-Oriented Javascript and Prototypal Inheritance Prototype classical vs prototypal inheritance classical 상속이 내가 알고 있는 java에서 사용하는 것이다. 하지만 prototypal 상속에 비해 복잡하다고 하는데 비교를 해보자. Prototype이란? 예제를 먼저 살펴보자. console에 무엇이 나올까?Default ? John ? 무엇이 나올까? 답을 살펴보기 전에 john object가 메모리에 어떻게 할당되어 있는지 살펴보자 john - property( firstName, lastName ) -> person - property ( firstName, lastName, getFullName() ) 이런 식으로 할당이 되어 있다. ->는 prototype chain을 나타낸다.firstName을 찾.. Section4 : Objects and Functions JSON JSON vs XML? - XML은 prop 열고 닫고 하는 것 때문에 string 낭비 - 보기에도 json이 더 보기 좋음 Section3 : Types and Operators Types - 자바스크립트에서 타입을 정하지 않고 할당하는거 실화야? var test="str"; test=1javascript engine 실행시점에 알아서 할당을 해준다. ( 그럼 string, number 타입 상관없이 메모리 크기는 똑같이 할당하는건가? 위의 상황에서 )primitive types 1) undefined 2) null 3) boolean 4) number 5) string 6) symbol ( es6에서 나옴, 다음 글에서 소개 ) 비교 연산자== : value만 비교=== : type과 value 비교 ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness ) Defaul.. Section2 : Execution contexts and Lexical Environments Execution contexts - Javascript가 실행될 때 실행 단위 ( global code, function code, eval code ) , 말 그대로 하나의 실행 단위 - Execution context stack에 이 단위가 하나씩 쌓이게 된다. 프로그램이 처음 실행될 때 global code가 stack에 쌓이고 그 다음부터 context(function code, eval code)가 쌓인다. 일반적인 stack과 같이 return이 되는 순간 context도 사라진다. Scope Function level scope var로 선언된 변수나, 함수 선언식으로 만들어진 함수는 함수 레벨 스코프를 가진다. 즉 함수 내부 전체에서 유효한 식별자가 된다. Block level scope.. Section 1 : Getting Started 강의 소개 - 혼잣말 요즘 프론트부터 백까지 다 자바스크립트로 작성이 가능하다보니 자격요건에 온통 javascript다. - 개발 환경 구성하기 Developer tools : Chrome 설치 Sublime Text 설치 - 바로 Angular나 jQuery같은 framework, library를 배워도 되지만 결국 이 둘도 javascript를 통해 구현한 것이다. 결국 javascript를 제대로 알아야 이 framework에 대한 이해도도 높아진다. 종윤이형이 그렇게 얘기하던 어떻게 돌 아가는지 이해하라는..... 나중에 angular,react가 무엇을 해줬는지 찾아봐야지... 반응형 디자인 @media - viewport의 크기 - device의 크기 - 등등 과 같은 조건에 따른 style 적용 가능 예제 : - 참고 : https://www.w3schools.com/cssref/css3_pr_mediaquery.asp 국제화 국제화 얘기가 왜 나올까? 전세계에는 다양한 언어로 작성된 자료들이 있다. 월드 와이드 웹(WWW)이 전세계적으로 사용되려면 이 국제 문서들의 처리와 전송을 지원해야 한다. 전송될 때는 엔터티 본문에 비트들로 담겨 있을텐데 이를 각각의 언어로 변환하는 방법이 있을 것이다. 이를 어떻게 설정하고 어떻게 흘러가는지 공부할 필요가 있을 것 같다. 국제적인 컨텐츠를 다루기 위한 HTTP 지원 서버 - 클라이언트에게 이 비트들을 어떻게 문자로 바꿔야 하는지 ( 디코딩 방법 ) ( charset = iso8859-6) - 길이 (content-length) 클라이언트 - 어떤 언어를 선호하는지 ( accept-language : fr, en;q=0.8 ) - 어떤 언어를 이해할 수 있는지 ( accept-chars.. HTTP 스크립팅(AJAX) AJAX란? HTTP(HyperText Transfer Protocol)은 웹브라우저가 서버로부터 문서를 전송받거나 폼을 보내는 방법, 그리고 해당 요청의 내용에 대해 서버가 응답하는 방법을 명세한다. 즉, 웹브라우저는 많은 양의 HTTP를 처리한다. 일반적으로 HTTP 처리가 발생하는 경우는 스크립트에 의해서가 아니라 사용자가 url을 입력, 링크 클릭, 폼 전송을 통해서 일어난다. 자바 스크립트 코드를 이용해서도 HTTP를 조작할 수 있다. 예를 들어 Window 객체의 location 프로퍼티를 설정하거나 form 객체의 submit() 메서드를 통해 HTTP 요청을 발생할 수 있다. 하지만 전체 페이지를 불러들이지 않고 자바스크립트를 통해 웹서버와 통신하는 방법이 있다. 그것이 바로 AJAX이다... JSON vs CSS?? JSON이 뭔데? JavaScript Object Notation(표기법) 브라우저와 서버간의 데이터 교환 어떻게 해야되지?? text로 밖에 안된다.... 교환 할때 JSON을 이용한다. JSON을 받으면 Javscript Object로 변환할 수 있고, 데이터를 보낼때 Javscript Object를 JSON으로 변환하여 보낸다. 이렇게 되면 복잡한 parsing이나 translation이 필요 없다. 한마디로 특정 언어에 종속적이지 않은 data 교환 format이다. 웹에서 JSON.parse()와 같은 API를 이용하면 서버와 쉽게 데이터를 주고 받을 수 있게 된다. JSON 공식 사이트는 없나? http://json.org/json-ko.html - JSON을 쓰려면 따로 라이브러리가 필요한가.. 이전 1 2 3 다음
