본문 바로가기

○ WEB/19.03 FastCampus_JS13

16. firebase 배포 1. ___ 키워드는 요소 자기 자신을 가리킴. 2. CSS ___ 키워드를 통해 애니메이션 동작 제작 가능 1. this 2. @keyframes firebase를 사용하기 위해 다음 4단계를 거치도록 하자 cmd창에 입력할 것 1. npm install -g firebase-tools +) 그렇다면 여기서 npm이란 무엇일까? Node Package Manager의 약자 JS에서 파생된 라이브러리 서버사이드 코드작성을 도와줌 Node JS 모듈을 패키지형태로 제공, 관리해줌 +) 클라이언트측의 앵귤러JS 2. firebase login 구글 아이디를 선택해서 로그인한다. 3. firebase init firebase 초기화하기 firebase를 사용할 폴더로 이동한 뒤 입력한다. 위 과정을 거치면 다.. 2019. 6. 21.

14. 키보드 이벤트 / onkeydown / onkeyup / 1. ___ 과 ___ 방식은 이벤트 중복 등록이 불가 2. 이벤트를 중복 등록하기 위해 ___ 를 사용 1. DOM 탐색 / 속성 등록 2. addEventListent() "onkeydown" 이벤트 지정한 요소에 키보드가 눌릴 떄 발생 "onkeyup" 이벤트 지정한 요소에 키가 눌렸다 땔 때 발생 이제 코드로 배워보자 우선 index.html main.js 실행결과 입력한 값들에 대한 정보들이 나오는 것을 알 수 있다. 2019. 6. 18.

12. Event / 이벤트 / 자바스크립트 1. ___ 는 코드의 논리적인 흐름을 하나로 묶는 역할을 한다. 2. ___ 키워드로 함수를 선언한다. 3. ___ 키워드는 반환값을 나타내며 반환값이 없을 수도 있다. 4. 변수에 함수를 할당하여 사용하는 것을 ___ 라고 한다. 1. 함수 2. function 3. return 4. 익명함수 JS란? 사용자 동작(이벤트)에 반응(핸들링)하기 위한 언어이다. 클라이언트측 특성화된 언어 이벤트? 웹 페이지에서 발생하는 모든 사용자의 액션 이벤트 사용하기위해 이벤트 핸들러를 등록함. 이벤트 핸들러(반응)는 이벤트 이름 앞에 "on"이 붙음 이벤트 핸들러 등록 방법 1. 속성으로 등록 2. HTML DOM : DOM 객체 탐색으로 등록 3. addEventListener() 메서드 : 메서드를 통해 이벤트.. 2019. 6. 17.

10. BOM객체 / window객체 / confirm / setInterval / open / close / alert 1. ___ 는 웹 페이지를 객체로 인식하는 방법이다. 2. DOM객체는 ___ 와 ___ 로 구성된다. 3. ___ 프로퍼티로 HTML 엘리먼트를 동적으로 조작할 수 있다. 1. DOM객체 2. Method property 3. innerHTML BOM객체란? Browser Object Model 객체 웹 브라우저 자체를 객체로 인식 index.html BOM객체에선 script태그가 body태그 내부에 있어야 한다. 하단은 각 메서드의 기능을 실행하기 위해 main.js에 입력한 코드이다. open, close 메서드를 통해 브라우저를 실행(새탭)시키거나 창을 닫을 수 있다. 현재는 window.document.getElementById()라고 입력했으나 window객체를 생략하여 사용해도 된다. 조.. 2019. 6. 15.

9. JS / DOM객체 / innerHTML / getElementById / getElementsByClassName / querySelectorAll 1. ___ 은 날짜 정보를 제공하는 내장 객체 2. 날짜 객체는 ___ 단위를 기준으로 시간을 표현 3. ___ 은 JS에서 하나의 객체이므로 프로퍼티와 메서드를 가진다. 1. Date() 2. 밀리세컨즈 3. 문자열 객체 DOM객체? Document Object Model객체 웹페이지(Document) 자체를 객체로 인식하기에 웹페이지의 여러 엘리먼트들을 조작할 수 있음 DOM객체이므로 메서드와 프로퍼티를 가질 수 있다. DOM메서드 : HTML 엘리먼트 인식 DOM프로퍼티 : HTML 엘리먼트 조작 getElement... innerHTML... 형태로 메서드와 프로퍼티가 구성됨 DOM객체로 웹페이지를 통제하기 위해선 특정 객체를 찾는 탐색과정이 필요함 총 5가지 탐색방법으로 이뤄짐 document.. 2019. 6. 15.

8. JS 내장객체 / new 연산자 / Date 객체 / 문자열 객체 / Number 객체 1. 객체 2. 속성 메서드 3. 내장객체 내장 객체? JS가 기본적으로 제공하는 객체 new 연산자 객체를 선언할 때 var 객체명 = {키:값} 처럼 중괄호로 객체를 선언하는 방법을 리터럴 형식이라고 한다. JS에선 객체를 리터럴 형식으로 선언하는 방식 뿐만 아니라 new 키워드를 이용한 객체 선언 방식도 지원함 (그러나 new 연산자를 이용한 객체 선언보단 리터럴 자료형 선언 방식을 권장) 선언 방법은 var 객체명 = new object(); new 연산자 선언 예시와 리터럴 방식 선언 예시 // new 연산자 선언 var obj = new Obejct(); // 객체 var str = new String(); // 문자열 객체 var arr = new Array(); // 배열 객체 var nu.. 2019. 6. 15.

6. JS 제어문 / 반복문 / for / while 1. ___ 은 코드의 논리적 구조를 처리하기 위해 사용 2. ___ 은 조건이 참일 경우 중괄호 안의 코드를 실행한다. 3. ___ 은 값의 조건에 따라 실행한다. 1. 조건문 2. if~else 구문 3. switch ~ case 구문 반복문? 특정 코드를 반복 처리 컴퓨터의 빠른 연산 속도를 이용해 다양한 처리 배열? 여러 자료형을 하나로 묶는 자료형 (객체) 하나의 변수에 담고 싶을 때 사용. 배열 값 할당방법 var arr = [값, 값, 값, ...] var arr = [1,2,3,4,5]; console.log(arr); 실행결과 다음처럼 나타난다. 인덱스 0 1 2 3 4 배열값 1 2 3 4 5 길이는 5 for 반복문 var arr = [1,2,3,4,5]; var len = arr.l.. 2019. 6. 14.

5. JS 제어문 1 / 조건문 / if / switch 1. 연산자 2. 산술연산자 3. 비교연산자 4. 삼항연산자 조건문? 프로그램 코드의 논리적 구조를 처리 if 조건문_1 if 조건문_2 if 조건문_3 조건문에선 모든 조건문이 충족되더라도 최상단의 충족 조건문 하나만 실행된다. Switch문 각 실행문마다 break; 를 입력해야 조건에 해당되지 않는 실행문이 실행되지 않는다. // swith문은 타입까지 일치해야 한다. var y = "10"; // string타입의 10 switch(y) { case 10 : console.log("10"); // number타입의 10 break; default : console.log("nothing"); break; } // 실행결과 "nothing" 출력 2019. 6. 14.

4. JS 연산자 1. 변할 수 있는 값 2. 값 3. console.log() 4. typeof 연산자란? 변수의 수학적 연산 및 처리를 하기 위한 기호 증감이란? var x = 10; 후위연산 x++ 출력되고 나서 값이 추가 전위연산 ++x 먼저 값이 추가되고 출력 후위연산 예시. 신기하게 x에 영향미침 // 후위연산예시 var x = 10; var y; y = x++; console.log(y); // 10출력 console.log(x); // 11출력 // 전위연산예시 var x = 10; var y; y = ++x; console.log(y); // 11출력 console.log(x); // 11출력 var x = 10, y = "10"; console.log(x = y); // true로 나옴. type신경쓰지.. 2019. 6. 14.

3. JS 변수 / 변수 선언 / 변수 초기화 / undefined, null 차이점 / typeof 1. HTML은 ____형태이다 2. JS코드 작성시 ___에 유의 해야 한다. 1. DOM(Document Object Model) 구조 2. 작성 순서 +) 왜냐면 인터프리터언어이므로 변수? 변할 수 있는 수 수학적 연산 및 처리가 필요한 경우 변수 사용하는 방법 / 변수 선언 키워드 var 변수명; 변수에 값 할당 (초기화) var 변수명 = 값; 변수를 작성하면 저장 공간(메모리)에 하나씩 변수들이 쌓인다 변수를 사용한 만큼 메모리를 사용하게 된다. JS코드를 해석할 때는 메모리를 운영체제에게 빌려서 만든 변수들을 쌓아서 사용한다. 변수를 선언하기 전에 자료형에 대해 알아보자 변수가 갖는 자료형태를 의미한다. 자료형태 5종류 문자(String) / 숫자(Number) / 논리(Boolean) / .. 2019. 6. 14.

2. JS 불러오기 / 파싱 / DOM구조 JS코드로 사용자의 ___에 반응할 수 있다. 웹 페이지에 일어나는 일들을 ___이라 부른다. JS는 ____언어이다. 동작 이벤트 인터프리터 JS선언문은 보통 head태그에 하단 처럼 작성한다 코드 사용자가 처음 이 페이지에 접속했을 때, 보여주고자 하는 경우 head태그에 작성하지만 DOM구조로서 상위태그들이 파싱된 뒤에 script를 실행하고자 할 경우, body태그에 선 실행될 태그들 뒤에 작성 "순서의 차이점"이 중요하다. html파일(index2.html)에 js파일(main2.js) 불러오기 예시. html파일 JS파일 document.write("hello first time"); JS가 왜 이렇게 동작하는건가? HTML trees라고 해서 Element와 Element.. 2019. 6. 14.

1. JS 기초 사용자 동작에 반응하는 언어. JS를 통해 움직임에 따라 달라지는 동적인 웹페이지를 만들 수 있다. 사용자는 브라우저를 통해 특정한 행동,동작을 서버에 요청하고 서버는 사용자의 요청에 대해 응답(기대한 동작에 대한 결과값)해준다. 버튼 클릭, 키보드 입력 등을 사용자 동작, 즉 이벤트라고 한다. 이벤트에 대한 준비를 하는게 JS이다. 디스크에 저장된 프로그램을 실행(exe파일)시킴 컴파일언어 JS는 _____언어이다 인터프리터언어란? 프로그램 코드를 작성 된 순서대로 한 줄 한 줄 해석하는 것 기본적으로 인터프리터 형식으로 한 줄 한 줄 실행됨 2019. 6. 14.

0. FIREBASE 소개 Firebase란? 우선 Client-Server관계를 다시 살펴보자 client가 Webserver에 요청하고 요청받은 Webserver는 disk에 요청에 맞는 자원(문서,이미지,파일)을 꺼내온 뒤 client에게 응답해줌으로써 브라우저에 나타나게 된다. 지금까지의 과정에선 client측에서 보여지는 것만 구현했다 그렇다면 서버측(WebServer, Disk(저장공간)) 서비스는 누가 제공해주는 걸까? 서버측의 역할을 대신 해주는 것이 Firebase. 바로 Firebase가 호스팅 서비스를 제공해주기 때문이다 서버측을 대신해준다는 말은 웹서버가 디스크에 요청하고 응답받는 과정을 의미. Firebase는 구글 클라우드 플랫폼! +) 기타 클라우드 플랫폼으론 MS의 애져, 아마존의 AWS 그렇다면 클라.. 2019. 6. 14.

이전 1 다음

티스토리툴바