힘차게, 열심히 공대생

1. head 태그 안에 삽입 보통 헤드안에 script태그를 많이 삽입하여 링크하는데 (나도 그랬다) html 문서를 파싱할 때 js를 가져오는 순서를 보면 아래의 그림과 같다. 1. 브라우저에서 html 문서를 한줄 씩 파싱하여 CSS파일과 병합하여 DOM요소로 변환한다. 2. 한줄씩 Parsing을 이어가다가 JS를 만나면, 파싱을 멈추고 JS파일을 다운로드 한다. 3. 다운로드가 완료되면 JS파일을 실행한다. [단점] 가장 일반적인 방법이지만 JS 파일이 크다면 페이지가 로딩되는데 너무 많은 시간이 걸린다는 단점이 있다. 2. body 태그 안에 삽입 다른 방법으로 js파일을 바다태그안에 삽입하는 방법이 있는데 이렇게 하면, html 파일을 모두 파싱 후 js 파일을 링크할 수 있다. [장점] H..

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다. 1. Js 파일로 관리하기 JavaScript 코드를 html 파일안에 삽입된 상태로 관리하면 점점 코드가 길어지기 쉽다. Js 파일을 따로 빼서 관리할 수 있는데 그 방법을 알아보자 [ 방법 ] 1. 예를 들어서 colors.js라는 파일 이름으로 만들었다고 해 봅시다. 2. 그리고 그 파일에 모든 페이지에서 공통적으로 사용되는 Javascript 코드를 넣습니다. 3. 원래 Javascript 코드가 있었던 이러면 간단하게 html 파일과 js 파일을 나누어서 관리할 수 있습니다. 끝!

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다. 1. 객체 Object 1) 객체란 자바스크립트에서 객체란, 연관된 함수들을 그룹으로 묶기위해 사용하는 것입니다. document 또한 객체이고, document로 접근하는 것이 함수입니다. document.querySelector('body'); document : object (객체) querySelector : object (document)에 정의되어 있는 메서드 2) 객체 정의 자바스크립트에서 객체는 중괄호로 정의할 수 있습니다. 객체 Name = { 'key_name' : 'value'}; var coworkers= { "programmer": "egoing", "designer": "leezche" }; 객체의 값은..

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다. 1. 함수 1) 함수(메서드) 함수 혹은 메서드라 불리는 것은, 여러 줄의 코드를 하나의 묶으로 다룬다고 볼 수 있다. 함수를 사용함으로써 유지보수가 쉬워지고, 코드가 간결해진다. 2) 자바스크립트에서 함수의 사용 함수의 정의(function()) 함수 호출 2. 함수 활용 함수에서의 this onclick 이벤트 안에서 'this'란, 그 구문을 가르키며 사용한다. 하지만 함수안에서의 this란, 함수를 단일 객체로 인식하여, windows를 가르킨다. [잘못된 코드] [this -> self로] 즉, 함수에서는 this를 self라는 매개변수에 받아와서, 이를 이용해서 나머지 코드를 진행하는 것이다.

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다. 1. 배열 1) 자바스크립에서 배열의 정의 자바스크립트(js)에서 배열은 변수의 타입처럼 쓰이는 것 같다. 먼저 변수를 설정해주고 값을 배열로 주면, 배열이 선언 된다. 2) 배열 선언 var fruits = ["apple", "banana"]; 3) 배열의 값에 접근하기(Get) document.write(fruits[0]); 4) 배열의 길이 document.write(fruits.length); 5) 배열에 값 추가하기(Push) fruits.push("coconut"); 2. JS 배열 메소드 JS 배열 메소드는 크게 3가지로 구분되어집니다. 원본 배열을 변경하는 메소드 원본 배열은 변경하지 않고 참조만 하는 메소드 원본..

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다. 1. 비교연산자와 블리언 1) 자바스크립트 비교연산자 '===' 조건문의 비교연산자는 보통 '=='을 사용한다. 하지만 자바스크립트에서는 '==' 과 '===' 2개를 사용한다. 쉽게말해 '==' 은 값만을 비교 [ 덜 빡빡한 비교 ] '==='은 유형(Type) 과 값(Value)를 비교 [빡빡한 비교] 변수를 비교하거나 어떤 비교를 위해 항상 '===' 연산자를 사용 할 것을 권장한다. 2. 조건 연산자로 토글 만들기 if() 문을 활용하여 선택 연산을 진행한다. querySelector() 로 태그&선택자를 지정하고 하위 특성들을 변경한다. if(document.querySelector..

1. 데이터 타입(문자열과 숫자) [Javascript의 데이터 타입] Javascript에는 6가지 데이터타입이 존재합니다. Boolean Null Undefined Number (en-US) String Symbol 2. 변수와 대입연산자 변수 변수란 말 그대로 바뀔 수 있는 수를 말합니다. 예를 들어서 다음 코드를 실행한다고 해 봅시다. ; var : 자바스크립트에서는 변수 이름 앞에 특정 데이터 타입을 명시해 줄 필요없이 'var' 를 붙이면 됩니다. 이 때 var은 변수의 영어 단어인 variable의 약자입니다. (파이썬과 비슷한 느낌) 3. 웹브라우저 제어(Js, CSS) [Js에서 CSS를 다룬는 법] 1. div 태그와 span 태그 div 태그는 화면 전체를 사용 [ 부분화면 - 따라서..

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다. 1. WEB과 Javascript, HTML 1. 태초에 HTML이 존재하였지만 정적인 이미지, 정적인 기능만을 제공하였다. 2. 동적, 즉 사용자와 반응하는 웹을 만들기위해 JavaScript가 탄생했다고 한다. 2. Javascript의 역할 Javascript의 가장 중요한 역할는 사용자와 상호작용할 수 있게 하는 것입니다. 아래의 웹페이지에서 사용자가 night/day 버튼을 누를 때마다 페이지의 색깔이 바뀌는 것을 그 예시이죠. * JS 실행하는 방법 (크롬 기준으로) : 웹 페이지에서 '오른쪽 버튼 > 검사'를 누르면 새로운 창이 뜨게 됩니다. 여기에서 Elements 탭을 보면, 페이지를 구성하는 HTML 태그들이 ..