점미의 스터디 점미의 스터디

JavaScript

• 웹브라우저 자바스크립트 - BOM, 전역객체 Window

  JavaScript/생활코딩 2018. 11. 21. 15:40

  BOM - https://opentutorials.org/course/1375/6628 BOM(Browser Object Model)은 웹브라우저를 제어하기위해서 브라우저가 제공해주는 객체들을 의미한다. 전역객체 Window최상위에 있는 window객체에 대한 접근방법 window는 전역객체이기 때문에 alert('a'); 와 window.alert('a');와 같은 의미가 된다.그래서 window객체 아래에 있는 navigator, screen..등등의 속성들은 window.navigator, window.screen..과 같은 의미이다. 전역변수, 전역함수들은 모두 window객체의 프로퍼티와 메소드들이다.

  Read More
• 웹브라우저 자바스크립트 - Object Model

  JavaScript/생활코딩 2018. 11. 21. 15:27

  Object Model - https://opentutorials.org/course/1375/6622 자바스크립트를 통해서 브라우저를 제어하기 위해서 자바스크립트로 제어할 수 있는 무엇인가가 있어야한다.그 무엇이 Object(객체)이다. 브라우저의 여러 구성요소들을 객체로 만들어서 제공해주는 것을 Object Model이라고 한다.자바스크립트로 브라우저를 제어하기 위해서 객체를 만드는 것을 객체화라고 한다.아래는 객체화의 예시이다. img태그가 있는 html문서가 있다.여기서 img태그를 제어하려면 브라우저가 가지고 있는 객체를 사용하여 제어할 수 있다. 브라우저에는 document라는 객체가 이미 있는 상태이며 이 객체가 가지고 있는 메소드 중 getElementsByTagName을 사용하여 img태..

  Read More
• 웹브라우저 자바스크립트 - HTML에서 JavaScript 로드하기

  JavaScript/생활코딩 2018. 11. 20. 11:19

  HTML에서 JavaScript 로드하기 - https://opentutorials.org/course/1375/6620 html과 javascript는 다른 문법을 가지고있는 언어이기 때문에html에서 javascript을 로드할때 어떻게 javascript인지 구분할 수 있는지에 대한 기준이 필요하다. html에서 javascript를 로드하는 방법 1. inline방식 빨간색 - html문법 연두색 - javascript문법html과 javascript 문법이 함께 있다면 정보+제어가 동시에 되기 때문에 여러가지 문제가 발생하게 된다. 2. script방식 //onclick이 사라지고 온전히 html태그로만 이루어져 있다. 가 나오기 전까지의 내용이 javascript문법이다. var hw = do..

  Read More
• 웹브라우저 자바스크립트 - 웹브라우저와 javascript

  JavaScript/생활코딩 2018. 11. 20. 10:31

  웹브라우저와 javascript - https://opentutorials.org/course/1375/6619 HTML : 정보를 담아내는, 표현하는 것 (css,javascript는 없어도 html은 꼭 있어야함)아래 예시처럼 정보 자체를 표현해준다. CSS : 정보를 꾸며주는 것아래 예시처럼 html의 정보에 색을 입혀서 꾸며준다. JavaScript : 프로그래밍적으로 html,css를 제어하는 것버튼을 눌렀을 때 html,css를 제어하여 바꿔줄 수 있다.

  Read More
• 자바스크립트 기본 - UI와 API

  JavaScript/생활코딩 2018. 11. 19. 17:07

  UI와 API - https://opentutorials.org/course/743/6533 UI와 API의 약자 UI - User InterfaceAPI - Application Programming Interface UI의 개념컴퓨터라는 시스템과 사람과의 접점.컴퓨터와 사람의 중계자 역할이라고 할 수 있다. API의 개념프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작장치.조작장치는 프로그래밍 언어를 통해서 조작 가능하다. 자바스크립트의 API를 활용하여 웹브라우저, Node.js, Google Apps Script에서 사용 할 수 있다.아래 API에서 자바스크립트 API을 확인 할 수 있다.https://opentutorials.org/course/50https://developer..

  Read More
• 자바스크립트 기본 - 라이브러리

  JavaScript/생활코딩 2018. 11. 19. 15:31

  라이브러리 - https://opentutorials.org/course/743/4750 라이브러리와 모듈은 비슷한 개념이다.모듈은 프로그램을 구성하는 작은 부품이라면라이브러리는 자주 사용되는 로직을 재사용하기 편리하도록 잘 정리한 일련의 코드들의 집합이다. 라이브러리는 어떠한 목적이 있고 그 목적을 쉽게 달성할 수 있도록 만들어 놓은 코드들의 집합이다.웹브라우저에서 제공하는 기능, 자바스크립트에서 제공하는 기능으로 1000줄로 할 수 있는 기능을 라이브러리를 사용하면 1줄로 만들 수 있다. 현재 사람들이 많이 사용하는 라이브러리는 jquery이다. http://jquery.com/ jquery로직을 사용 하기 위해서는 http://api.jquery.com/에서 확인 가능하다. jquery 실제 적용 ..

  Read More
• 자바스크립트 기본 - 모듈

  JavaScript/생활코딩 2018. 11. 19. 15:18

  모듈 - https://opentutorials.org/course/743/4750 모듈화 - 프로그래밍을 구성하고 있는 로직들을 재사용할 수 있는 단위로 조각조각 나눠서 별도의 모듈이라는 형태로 떼어내서 이것을 또 다른 프로그램에 부품으로 사용하는 기법 코드를 여러 개의 파일로 분리하여 모듈화를 시키는 방법의 장점1. 자주 사용하는 코드를 별도의 파일로 만들어서 재활용할 수 있다. 2. 코드 수정 시 필요한 로직을 빠르게 찾을 수 있다.-> 파일의 이름에 따라서 관련되어 있는 로직들이 모여 있기 때문에 로직을 빠르게 찾을 수 있는 것이다. 3. 필요한 로직만을 로드해서 메모리의 낭비를 줄일 수 있다.-> 각 각의 파일별로 필요한 것들이 쪼개져서 분리되어 있기 때문에 필요한 파일만 읽어와서 메모리의 낭비..

  Read More
• 자바스크립트 기본 - 객체

  JavaScript/생활코딩 2018. 11. 16. 17:23

  객체 - https://opentutorials.org/course/743/6491 객체(Object)는 배열과 유사한 역할을 한다. 객체와 배열의 눈에 보이는 차이점은 색인의 값이다.배열의 경우 아래와 같이 자동으로 색인의 순서 및 내용을 정해준다.a b c 0 1 2 하지만 객체는 아래와 같이 색인의 값을 우리가 원하는 값으로 지정할 수 있다.abc"first""second""third" a. 객체의 생성 객체는 중괄호로 만들어야 한다.아래는 하나의 객체를 만들어서 변수에 넣은 것이다.객체에서는 색인을 key, 원소를 value로 부른다. var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; 그림으로 표현하면 아래와 같이 key는 문자들로 만들어져 있고..

  Read More