본문 바로가기

programming study/JavaScript

 (186)
[노마드코더]바닐라 JS로 크롬 앱 만들기 (4)(2021.1.19) 본 내용은 해당 강의 토대로 작성 Making My First JS APP 1. Making a To Do List part One JavaScript로 To Do List 를 만든다. HTML index.html에 To Do List를 만들기 위한 form을 만들고 class를 지정한다. JavaScript todo.js를 생성하고 코드를 입력한다. const toDoform = document.querySelector(".js-toDoForm"), toDoInput = toDoform.querySelector("input"), toDoList = document.querySelector(".js-toDoList"); const TODOS_LS = 'toDos'; function paintToDo(te..
[노마드코더]바닐라 JS로 크롬 앱 만들기 (3)(2021.1.15 ~ 16) 본 내용은 해당 강의 토대로 작성 Making My First JS APP 1. Making a JS Clock part One 현재 시간을 출력하는 코드를 작성한다. Console 사용할 함수들이 어떻게 작동하는지 크롬 개발자 도구를 사용하여 확인해본다. new Date( ) : 날짜와 관련된 객체 date에 선언한 결과, 해당 국가의 표준시가 입력 date.getDay( ) : 요일의 수. 월요일부터 카운트해서 금요일인 5가 나왔다. date.getDate( ) : 몇 일인지 입력 date.getHours( ) : 현재 시간 date.getMinutes( ) : 현재 분 시간 출력 웹 페이지 만들기 페이지를 연 순간을 기점으로 시간을 출력하는 웹 페이지를 만들어 본다. 위 함수들을 사용 HTML 00..
[노마드코더]바닐라 JS로 크롬 앱 만들기 (2)(2021.1.13) 본 내용은 해당 강의 토대로 작성 Practice 1. Your first JS Function 함수 어떤 것을 수행하는 한 부분 console.log console은 object이다. console이라는 object안에 log라는 함수가 있다. console.log(console) 을 출력하면 아래처럼 log를 포함한 여러가지의 함수가 있는 것을 볼 수 있다. JavaScript는 내장함수를 위와 같은 방식으로 가지고 있다. 함수 선언 기본적인 내장함수 말고, 원하는 기능을 할 수 있도록 함수를 선언할 수 있다. function 함수명(인자){ ​ 함수 선언 } 함수명 : camel case 문법으로 만든다. 인자(argument, parameter) : 입력하는 값을 저장하고 함수에 사용할 수 있게 ..
[노마드코더]바닐라 JS로 크롬 앱 만들기 (1)(2021.1.11 ~ 12) 본 내용은 해당 강의 토대로 작성 Introduction 바닐라 JavaScript로 여러 앱을 클론코딩 한다. 모든 언어의 공통적인 concept를 배운다. 변수, 함수, 조건문 등등 Theory 1. Why JS? 웹에 사용되는 하나뿐인 프로그래밍 언어 Fornt-end 분야에서 사용한다. Interactive 한 웹 사이트를 만들 수 있다. 2. Super Powers of JS Interactive한 모든 것에 사용될 수 있다. game app web site 3. JavaScript version ECMAScript : specification of JavaScript ES5, ES6 : version of specification specification이란, 웹 페이지를 어떻게 구현하라는 안..
[생활코딩]WEB2-JavaScript (6)(2020.12.22) 본 내용은 해당 강의 토대로 작성 객체의 형식 객체(Object)는 정보를 정리하는 수납상자 역할을 한다는 점에서 배열(Array)와 비슷하다. 다른점은 아래와 같다. Object Array 순서 없음 순서에 따라 저장 식별자: 문자(이름) 식별자: 숫자(0부터) 중괄호{} 대괄호[] 또, 객체에서는 식별자를 key, 값을 value라고 한다. 구체적인 예시로, 각각을 선언하고 출력하는 것은 아래와 같다. var members = ['siru','jaemin','greedysiru']; console.log(members[1]); // 콘솔창에 jaemin 출력 var roles = { 'programmer':'jaemin', 'cat' : 'siru', 'id' : 'greedysiru' } conso..
[생활코딩]WEB2-JavaScript (5)(2020.12.9) 본 내용은 아래의 강의를 토대로 하여 작성하였습니다. 링크:opentutorials.org/course/3085/18888 수업을 마치며 - 생활코딩 Long take 버전 코딩장면만을 담은 버전의 영상입니다. 복습할 때 도움이 되면 좋겠습니다. 좋아하는 음악 틀어놓고 배속으로 보시면 덜 지루합니다. 지식지도 관련된 지식의 지도입니다. 지도 opentutorials.org 1. 강의 내용 Object (객체) 함수가 많아지면, 이들 또한 정리할 필요가 있다. 수많은 파일들을 디렉터리로 정리할 수 있듯, 이 함수들과 변수를 그룹핑해서 정리 정돈하기 위한 도구는 바로 Object(객체)이다. 함수들을 객체로 정리하기 이전에, 항상 기억할 수칙이 있다. 함수를 만들 때 이름이 충돌되지 않도록 염두해야 한다. ..
[생활코딩]WEB2-JavaScirpt (4) (2020.12.8) 본 내용은 아래의 강의를 토대로 하여 작성하였습니다. 링크:opentutorials.org/course/3085 WEB2 - JavaScript - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상 opentutorials.org 1. 강의 내용 Function(함수) 코드의 양이 많아지면 웹 페이지의 크기가 커져서 비용과 시간의 소요가 커진다. 이렇게, 많은 코드를 정리 정돈하기 위해서는 함수를 사용한다. 함수는 중복된 코드를 정의할 수 있고 이로 인해서 웹 페이지의 유지 보수를 좋게 할 수 있다. 함수 문법 함수의 문법은 ..
[생활코딩]WEB2-JavaScript (3) (2020.12.8) 본 내용은 아래의 강의를 토대로 하여 작성하였습니다. 링크:opentutorials.org/course/3085 WEB2 - JavaScript - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 JavaScript에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 사용자와 상 opentutorials.org 1. 강의 내용 Array(배열) 책장에는 수많은 책을 정리할 수 있다. 잡다한 많은 물건들 또한 수납상자에 정리할 수 있다. 이처럼, 많은 것들을 정리하는 것은 중요하다. 프로그래밍은 무한에 가까운 데이터들을 다룬다. 이 데이터들을 정리하지 않으면 절대 정상적으로 코딩할 수 없을 것이다. 그러므로 ..

티스토리툴바