힘차게, 열심히 공대생

이 글은 부스트코스에서 제공하는 생활코딩 강의를 기반으로 정리한 내용입니다. 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 태그들이 ..