너굴 개발 일지

JavaScript 사용시 타입 변환이 왜 일어나는지 어떤 규칙에 의해 타입이 바뀌는지 공부한 글입니다. 목차 서론 본문 타입 변환이란? 명시적 타입 변환만 사용하는 것이 좋은 방법 아닐까? 타입 변환은 어떻게 진행될까? 암묵적 타입 변환이 왜 일어날까? 명시적 타입 변환만 사용하는 것이 좋은 방법 아닐까? 타입 변환 규칙 숫자 표현식에서 숫자가 아닌 값 문자열 객체 Falsy and Truty NaN 결론 서론 JavaScript를 사용하다보면 종종 의도대로 코드가 동작하지 않는 경우가 있다. const sumNumber = (a, b) => { return a + b; }; console.log(sumNumber(1, 2)); // 3 console.log(sumNumber(100)); // NaN ..

ES6(ES2015) 이전에는 통일된 규칙 없이 배열, 문자열, DOM 컬렉션들은 각자의 구조를 가지고 for문, for...in문, forEach를 사용해 요소들을 순회했었습니다. ES6에서는 순회 가능한 데이터 컬렉션들을 이터레이션 프로토콜을 준수하는 이터러블로 통일해 for...of문, 스프레드 문법, 디스트럭처링 할당(구조 분해 할당)의 대상으로 사용할 수 있도록 일원화했으며 이터러블 객체를 쉽게 생성할 수 있는 제너레이터 함수를 사용할 수 있습니다. 이터러블 객체를 만들기 위해선 이터레이션 프로토콜에 대해 알아야 합니다. 이터레이션 프로토콜에는 이터러블 프로토콜, 이터레이터 프로토콜이 있습니다. 이터러블 프로토콜 (Iterable Protocol) 이터러블이란 이터레이터를 반환하는 Symbol...

자바스크립트의 데이터 타입에는 크게 2가지로 기본형(원시형), 참조형이 있습니다. 기본형에는 number, string, boolean, null, undefined 가 있으며 ES2015(ES6)에 추가된 Symbol이 있습니다. Symbol은 무엇이며 언제 사용하고 왜 추가된 걸까요? Symbol이란 자바스크립트의 객체 타입은 순서가 없는 프로퍼티 집합으로 ES6 이전까지는 프로퍼티명이 오로지 문자열이었지만 ES6 이후에는 심벌 타입도 프로퍼티명으로 지정할 수 있게 되었습니다. const strname = "string name"; const symname = Symbol("propname"); console.log(typeof strname); // string console.log(typeof s..

자바스크립트를 이용한 화면 슬라이드 쇼 만들기 더보기 ⟨ ⟩ .wrapper { /* 슬라이드 쇼 영역 스타일 */ width:600px; /* 너비 */ margin:0 auto; /* 화면 중앙에 배치 */ position:relative; /* 슬라이드 위치를 잡기 위해 */ background-color:#ccc; text-align:center; /* 슬라이드를 화면 중앙에 배치 */ } #container { position:absolute; } #container > img { /* 각 이미지의 스타일 */ width:100%; /* 슬라이드 영역에 꽉 차게 */ float:left; /* 왼쪽부터 배치 */ } button { position:absolute; /* 배치 방법 : absol..

목차 자바스크립트를 이용한 태그에 이벤트 발생시키기 예제 자바스크립트를 이용한 checkbox를 이용해 값을 다른 로 넣어주기 예제 자바스크립트를 이용한 회원가입 정보 화면에서 입력 요구사항 만족하지 않을 시 alert 알림창 띄우기 자바스크립트를 이용한 checkbox 값을 읽어서 합계금액을 출력하기 자바스크립트를 이용한 브라우저 정보 불러오기 자바스크립트를 이용한 현재 시간 나타내는 창 만들기 window.open() 자바스크립트를 이용한 해당 문서 정보 출력 location.replace("url"); 자바스크립트를 이용한 페이지 접속시 새로운 팝업창 띄우기 예제 자바스크립트를 이용한 숫자 맞추기 프로그램 onchange : select에서 무언가를 선택했을 때(바뀌었을 때) 발생시키는 이벤트 자바..

목차 자바스크립트를 이용한 객체 생성 자바스크립트 객체 생성자 및 멤버변수 innerText 자바스크립트 배열 자바스크립트 이벤트 부여 방법 자바스크립트를 이용한 객체 생성 var 변수명(객체명) = {변수명:값, 변수명:값}; 예시 더보기 var member = { id : 123, name : "너굴이", age : 25, address : "서울" }; document.write 코딩을 html 파일이 아닌 js 파일로 옮겨서 실행해도 된다 자바스크립트 객체 생성자 및 멤버변수 (자바스크립트를 이용한 프레임워크 개발시 주로 사용) 생성자 생성 function 생성자(매개변수){ this.멤버변수명; this.메서드명 = function() {} } 객체 생성 방법 var 객체명 = enw 생성자(전..

목차 css 스타일 설정 방법 자바스크립트 기초, 문법 및 예제 css 스타일 설정 방법 1. 태그명 사용 : body{}, input{} in css file2. 스타일 클래스 : 일때, .클래스명{} in css file (클래스명 앞에 꼭 점 붙이기)3. 태그 id 속성값 : 일때, #id속성값{} in css file 자바스크립트 코딩 위치 - 혹은 태그 사이 자바스크립트 코딩 방법 1. html 내부에 명시 - 2. js파일 생성 후 html 파일에 따로 적용 html 내부에 자바스크립트 문법 prompt() 값을 입력 받을 수 있는 창을 띄우는 자바스크립트 문법 body 내부에 prompt()를 포함하는 script 태그가 있다면 입력창 실행 뒤 나머지 코드들 출력 prompt() 실행시 취소..