본문 바로가기

vanilla javascript4

JS 근본 공부 - 배열(Array) - 배열은 프로그래밍에서 가장 많이 사용되는 자료구조다. - 배열의 개념과 활용방법을 익혀보자. 1. 배열은 무엇인가? - 배열이란 자료구조 중 하나로 여러개의 데이터를 묶어서 저장하는 방식이다. - 일반적으로 배열은 동일한 자료형의 데이터 끼리만 묶어 저장할 수 있지만, JavaScript에서는 자료형과 상관없이 데이터를 배열에 저장할 수 있다. 하지만, 이런 방식의 사용은 권장하지 않는다. 2. 자료구조와 object는 무엇이 다른가? - object는 연관된 속성과 행동이 모여서 하나의 존재를 이룬다. - 자료구조란 데이터를 저장 및 정렬하는 형식/방식을 의미하는 것이다. 3. 배열의 특징 - 동일한 자료형의 데이터를 저장한다. - 데이터가 순차적으로 저장된다. - 저장된 데이터는 index가 부여.. 2020. 11. 2.
Vanilla JS - 이벤트와 이벤트 핸들러(Events & Event Handlers) 1. Event란? - JavaScript는 단지 HTML과 CSS를 수정하기 위한 스크립트 언어가 아니라 이벤트에 대응하기 위해 만들어진 언어이다. - 이벤트란, 웹사이트에서 발생하는 모든 것(사건)을 의미한다. ex) 클릭, 새로고침, 닫기, 버튼입력, 제출(submit), etc. - JavaScript를 사용하면 웹사이트에서 발생하는 이벤트 상황을 control 할 수 있다. ex) 새창이 열리기 전/후, 버튼 클릭 후, etc. Window 이벤트 - 윈도우 이벤트는 웹사이트 내부에서 발생하는 것이 아니라, 윈도우 환경 자체에서 발생하는 이벤트를 말한다. 예를 들어, 브라우저 창의 사이즈를 조절하거나 브라우저를 최소화 하거나 닫는 경우 등이 존재한다. - 예시로 브라우저 창의 사이즈를 조절할 때.. 2020. 10. 7.
Vanilla JS - 기본문법(2) 1. JS 함수와 객체의 관계 - 프로그래밍에서 함수란, 어떤 기능을 의미한다. 그리고 해당 기능을 구현하기 위해서 어떤 코드의 집합으로 구성되어있다. - 이전 포스팅에서 출력을 위해 사용했던, console.log()에서 log라는 부분이 하나의 함수이다. 그렇다면 앞부분에 있는 console이라는 것은 무엇인가? - 저번 포스팅에서 객체가 갖고 있는 특정 key의 value를 출력하기 위해서 다음과 같은 코드를 사용했다. const myInfo = { name: "abc", location: "Seoul, Korea", gender: "Male", handsome:"true", favFood: [ { name: "Kimchi", healthy: true }, { name: "Hamburger", he.. 2020. 10. 2.
Vanilla JS - 기본문법(1) 1. JavaScript를 사용하는 방법 script 태그를 사용한다 script 태그는 반드시 body태그의 가장 아래쪽에 위치한다. script 태그 내부에 JS코드를 작성하거나 src 속성을 이용하여 JS파일을 연동시킨다. 예시) HTML 구조 This works! 예시) JS 파일 코드 alert("JavaScript is working"); 예시) 실행 결과 2. JS의 기본문법 1) JS variable(변수) 선언 방법 JS에는 변수를 사용하기 위해 반드시 3가지 과정을 거쳐야한다. Create(선언), Initialize(초기화), Use(사용) 선언과 초기화는 한번에 수행할 수 있으며, JS에서 변수를 선언할 때, 반드시 let을 붙여야 한다. ex) let a = 100; 명령어가 끝날.. 2020. 10. 1.