frontend/javascript (8) 썸네일형 리스트형 [JavaScript] 이벤트 함수를 callback 함수로 호출 지난번 학교 수업에서 웹 서비스 개발 프로젝트를 진행했는데, 해당 프로젝트 과정에서 자바스크립트 파일 내에서 특정 엘리먼트에 이벤트 함수를 지정하는 코드를 작성했다. let new_input = document.createElement('input'); new_input.setAttribute("id", theater); new_input.setAttribute("type", 'radio'); new_input.setAttribute("value", theater); new_input.setAttribute("class", 'theater_city'); new_input.setAttribute("name", 'theater_city'); new_input.onclick = theaterCity_onCli.. [JavaScript] 06 Array 이번 게시글에서는 배열(Array)을 다뤄 볼 것이다. 코드 상에서 데이터를 다룰 때, JS 뿐만 아니라 다른 언어들에서도 이 배열을 많이 사용하게 된다. 자바스크립트에서 배열 또한 하나의 객체로서, 이 Array 객체 내부에는 여러가지 필드변수와 메소드들이 정의되어 있다. 배열을 사용할 때는 Array 객체의 필드변수 및 메소드들이 정리된 API를 익히고, 각각을 잘 활용할 수 있어야 한다. 1. Declaration 배열을 선언하는 방법에는 크게 두 가지로 나눌 수 있다. const arr = new Array(); const arr = []; 2. Index Position 다른 프로그래밍 언어들과 마찬가지로, 인덱스(index)를 통해 배열 요소에 접근할 수 있다. const fruits = ['.. [JavaScript] 05 Objects 이번 게시글에서는 자바스크립트 테이터 타입중 하나인 오브젝트를 다뤄볼 것이다. 우선, 오브젝트는 서로 연관된 데이터나 기능을 모아두는 컬렉션이며, 자바스크립트의 거의 모든 객체들은 Object의 인스턴스이다. 이러한 오브젝트는 key - value 쌍의 집합체로 구성된다. ( ex. object = { key : value }; ) Objects One of the JavaScript's data types. A collection of related data and/or functionality. Nearly all objects in JS are instances of Objects. 1. 오브젝트 생성 이러한 객체를 생성하는데에는 크게 두 가지 문법이 존재한다. 첫 번째로는 object litera.. [JavaScript] 04 Class 이번 게시글에서는 클래스에 대해 다뤄볼 것이다. 이미 JAVA를 배우면서 어느정도 익혔기 때문에, 너무 세세하게 다루진 않겠다. Class - Template Object - instance of a class 1. Class Declarations class Person { // constructor constructor(name, age) { // fields this.name = name; this.age = age; } // methods speak() { console.log(`${this.name}: hello!`); } } const min = new Person('min', 22); console.log(min.name); // min console.log(min.age); // 22 mi.. [JavaScript] 03 Operators 이번 게시글에서는 자바스크립트 연산자와 if문, 반복문과 같은 제어문을 다룰 것이다. 1. Equality const stringFive = '5'; const numberFive = 5; == ( loose equality, with type conversion ) == 는 타입을 서로 같은 데이터 타입으로 변경한 후 비교연산을 진행한다. ( 타입 무시 ) console.log(stringFive == numberFive); // true console.log(stringFive != numberFive); // false === ( strict equality, no type conversion ) === 은 보통 개발에서 흔히 떠올리는 equal 연산으로, == 와 다르게 데이터 타입을 무시하지 않.. [JavaScript] 02 Function 이번 게시글에서는 함수에 대해 다뤄볼 것이다. 너무 기초적인 내용은 생략하고, 이번 함수 파트에서는 TS 내용도 아주아주 조금씩 언급하면서 글을 작성하고자 한다. 함수 작성 매뉴얼 ( One Function - Do One Thing , Naming ) 기본적으로 하나의 함수는 하나의 일만 수행하도록 작성하는 것이 가장 이상적이다. 그리고 함수의 이름을 정할 때는 그 함수가 어떤 일을 수행하는지 명시할 수 있는 동사를 포함하는 것이 좋다. (ex. create_user) 함수를 작성할 때는 다음과 같이 작성한다. function name(param1, param2) { // body ... return ; } 추가로, 다음과 같이 첫 번째 코드는 두 번째 코드로 변경하여 작성하는 것이 재사용성, 다양성 .. [JavaScript] 01 Variable 이번 게시글에서는 자바스크립트 변수에 대해 다뤄보도록 할 것이다. 자바스크립트에서 변수를 선언할 때는 다음과 같이 var나 let을 사용한다. var name = "minsan"; let age = 22; 자바스크립트는 C, JAVA 등과 같은 기존 프로그래밍 언어와 달리 변수를 선언하거나 사용하는 것에 있어서 제약이 적다(Dynamic Typing - dynamically typed language). 예를 들어 기존 프로그래밍 언어(type이 static한 성질을 가짐)에서는 변수를 처음 선언할 때 해당 변수의 자료형을 명시해야하고, 변수를 먼저 선언한 '이후'에 값을 할당하거나 사용할 수 있다. 이와 달리, 자바스크립트에서는 변수를 선언할 때 자료형을 따로 명시할 필요가 없으며 var나 let 하나.. [JavaScript] 자바스크립트 이전에 자바스크립트를 한번 공부한 적이 있는데, 스터디로 일주일이 안 되는 기간동안 빠르게 배우다보니 지금은 머릿속에 거의 남지 않은 상태다. 그래서 이번에는 혼자서 자료도 찾아보고, 서적도 참고하면서 차근차근 배워보고자 한다. 멋쟁이 사자처럼에서 아이디어톤이나 해커톤에 참가했을 당시, 내가 다룰 줄 아는 HTML, CSS, Django 만을 이용하다보니 구현가능한 범위에 한계가 너무 컸고, 특히나 반응형 웹을 제작하기 위해서라도 (React) 하루 빨리 자바스크립트를 배워야겠다는 생각이 들었다. 우선 자바스크립트를 배우기에 앞서, 웹 개발 과정에서 자바스크립트를 왜 사용해야하는지, 기본적인 지식을 쌓아보고 본격적으로 공부를 시작하고자 한다. 특정 언어를 본격적으로 배우기 전에, 이 언어를 왜 사용해야하.. 이전 1 다음