Java Script
-
자바스크립트 구성요소 ~ 조건문Java Script/MDN 정리 2020. 7. 24. 00:12
Active Learning : 간단한 달력 만들기 링크 var select = document.querySelector('select'); var list = document.querySelector('ul'); var h1 = document.querySelector('h1'); select.onchange = function() { var choice = select.value; let days = 31; // ADD CONDITIONAL HERE if(choice === "February") { days = 28; } else if(choice === "April" || choice === "June" || choice === "September" || ..
-
자바스크립트 첫걸음 ~ 바보같은 이야기 생성기Java Script/MDN 정리 2020. 7. 23. 22:46
시작하기 HTML 예제 파일이 있는 사이트(grab the HTML file)로 이동하여 파일을 카피하여 자기 컴퓨터에 디렉토리을 새롭게 만들고 파일이름 index.html로 저장한다. 이 안에는 예제를 위한 CSS가 포함되어 있다. 또 다른 가공전의 텍스트가 있는사이트 (page containing the raw text) 로 가서 별도의 브라우저 탭으로 열어 놓아라. 이것은 나중에 필요하다. 프로젝트 설명 "랜덤한 이야기 만들기(Generate random story)" 버튼을 누를 때 마다 꾸며진 이야기(silly stories)를 만들어야 한다. "Enter custom name"필드에 값이 입력되어있지 않을 경우 기본 이름을 Bob으로 지정한다. "랜덤한 이야기 만들기(Generate rando..
-
자바스크립트 첫걸음 ~ 배열Java Script/MDN 정리 2020. 7. 23. 20:23
배열 배열 만들기var sequence = [1, 1, 2, 3, 5, 8, 13]; var random = ['tree', 795, [0, 1, 2]]; 위와 같이 배열 안에 모든 항목을 한번에 저장할 수 있다. (배열 안에 배열도 가능) 유용한 배열 Method 문자열을 배열로, 배열을 문자열로 변환하기 split() var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle'; var myArray = myData.split(','); myArray; join() var myNewString = myArray.join(','); myNewString; 조인 안에 문자열 파라메터를 ..
-
JavaScript 첫걸음 ~ 문자열 제대로 다루기Java Script/MDN 정리 2020. 7. 23. 17:05
Strings as objects 자바스크립트의 모든 것은 객체다. 변수가 문자열 객체 인스턴스되면, 수많은 속성과 메서드를 사용할 수 있다. String 객체 페이지에서 목록 확인. 문자열 길이 찾기 length 프로퍼티를 사용할 수 있다. var browserType = 'zin0'; browserType.length; 결과는 4를 리턴한다. 특정 문자열 찾기 대괄호 표기법을 이용해서 문자열 안의 문자를 구할 수 있다.browserType[0]; browserType[browserType.length-1]; z와 0이 리턴된다. 문자열 내부의 하위 문자열 찾기 및 추출 큰 문자열 안의 작은 문자열(하위 문자열)을 찾고 싶을 때, indexOf()를 사용해서 찾을 수 있다.browserT..
-
JavaScript 첫걸음 ~ 자바스크립트 기초Java Script/MDN 정리 2020. 7. 23. 01:12
예제 - 숫자맞추기 1~100 사이의 수 중에서 무작위로 선택해야한다 플레이어는 10번의 기회안에 숫자를 맞춰야한다 틀렸다면 큰지 작은지 포함해서 말해야 한다. 또한, 이전에 써냈던 번호들도 보여줘야한다. 게임은 플레이어가 숫자를 맞추던가, 기회를 모두 소진하면 끝난다 게임이 끝나면 다시 게임을 할 것인지 묻게된다. 위의 조건을 정리하면 1과 100사이의 숫자 중 무작위로 추출한다. 1부터 플레이어의 차례를 기록한다. 플레이어에게 숫자를 맞출 수 있게 한다. 숫자를 맞추면 어딘가에 저장하고, 사용자는 이전의 추측한 숫자를 볼 수 있도록 한다. 그다음, 숫자가 일치한지 확인한다. 만약 일치한다면: 축하 메시지를 표시한다. 더 이상 숫자를 맞출필요가 없다. 플레이어가 다시 게임을 할지 묻는다. 숫자가 틀렸고..
-
JavaScript의 첫걸음 ~ 자바스크립트가 뭔가요?Java Script/MDN 정리 2020. 7. 22. 23:18
그래서, 진짜 어떤 일을 할 수 있나요? APIs(Application Programming Interfaces) 이미 만들어진 코드의 집합체, 개발자들이 만들기 어렵고 힘든 부분을 쉽게 구현하도록 하는 프로그램 Browser API 웹 브라우저에 설치된 API들로, 컴퓨터 환경구성으로 부터 데이터를 보이게 하고 복잡한 일들을 하게한다. DOM(Document Object Model) API 동적으로 페이지의 스타일을 정하는 등 HTML과 CSS를 알맞게 조정하는 역할 팝업창이나 컨텐츠들이 보여지는 것들 모두 DOM의 결과 Geolocation API 지리적인 정보를 검색하게 해준다. Google Maps가 어떻게 위치를 찾고 지도에 표시하는지 알 수 있게 한다. Canvas와 WebGL API 2D와 ..
-
웹과 함께 시작하기 ~ 웹 작동 방식Java Script/MDN 정리 2020. 7. 22. 22:28
클라이언트와 서버 클라이언트 일반적인 웹 사용자의 인터넷이 연결된 장치들과 이런 장치들에서 이용가능한 웹에 접근하는 소프트웨어(일반적으로 크롬과 같은 웹 브라우저) 서버 웹페이지, 사이트, 앱을 저장하는 컴퓨터 클라이언트의 장비가 웹페이지에 접근하기 원할 때, 서버로부터 클라이언트의 장치로 사용자의 웹 브라우저에서 보여지기 위한 웹페이지의 사본이 다운로드 된다. 도구 상자의 다른 부분들 웹이 도로라고 가정하고, 도로의 한 쪽 끝은 집같은 클라이언트, 다른 한 쪽 끝은 상점같은 서버라고 전제 TCP/IP Transmission Control Protocol (전송 제어 규약)과 Internet Protocol (인터넷 규약)은 데이터가 어떻게 웹을 건너 여행해야 하는지 정의하는 통신 규약 주문을 하고, 상..
-
웹과 함께 시작하기 ~ 자바 스크립트 기초Java Script/MDN 정리 2020. 7. 22. 22:04
자바스크립트는 무엇인가? HTML 문서에 적용될 때, 웹사이트상에서 동적 상호작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어(Dynamic programming language) 코어 자바스크립트 언어(core JavaScript language) 위에서 동작하는 다양한 도구를 이용하면, 최소한의 수고로 엄청나게 많은 확장 기능을 사용 가능 브라우저 응용 프로그래밍 인터페이스 (APIs) 브라우저에 내장된 API로 HTML을 동적으로 생성하고 CSS 스타일을 설정 사용자의 웹캠으로부터 비디오 스트림을 수집하거나 조작 3D 그래픽이나 오디오 샘플을 생성 등 다양한 기능 제공 제 3자(third-party) API를 활용해 개발자는 트위터나 페이스북 같은 다른 컨ㄴ텐츠 공급사부터 제공되는 기능을 자신의..