본문 바로가기

자바스크립트27

[JavaScript공부 - 7] Type Conversions(타입 변환) 대부분, 연산자와 함수들은 자동으로 파라미터를 받을 때 적절한 타입으로 변환해 줌. 이런걸 "Type Conversions(타입 변환)"이라고 부름. 예를 들어, alert는 자동으로 값을 메세지로 보여주기 위해서 string으로 자동 변환 하여 보여줌. 수학 연산자 같은 경우에는 값들을 number 타입으로 변환함. 물론, 원하는 타입으로 값을 명시적으로 바꿔주는 경우도 있음. ToString String 변환은 값을 String 타입으로 바꾸어야 할 때, 일어남. 예를 들어, alert(value)는 값을 String으로 바꾸고 그 값을 메세지로 보여줌. 그러나 특정 값을 String으로 바꾸는 함수가 있는데, String(value) 함수임. 12345let value = true;alert(typ.. 2019. 1. 25.
[JavaScript공부 - 6] Data types(데이터 타입) 자바스크립트에서 변수는 어떤 데이터를 담고 있음. 하나의 변수는 어떤 상황에서는 String이 될 수 있고 또 다른 상황에서는 number가 될 수 있음. 12let message = "hello";message = 123456;cs 이와 같이 한 변수가 String이나 number가 될 수 있는 특성을 가진 프로그래밍 언어를 "dynamically typed(동적 타입 지정)"이라고 함. 동적 타입 지정은 데이터 타입은 있지만 변수가 데이터 타입 중에 하나에 종속되지 않는 특성을 이야기 함. 자바스크립트에는 7가지 기본 데이터 타입이 있음. 이번 포스팅과 다음 포스팅에서 이에 대해 설명할 예정! A number 12let n = 123;n = 12.345;cs 위와 같이 number 타입은 정수와 소수.. 2019. 1. 24.
[JavaScript공부 - 5] Variables(변수) 대부분의 경우에 자바스크립트는 정보를 처리해야함. 이에 대한 예로 2가지를 들어보면 1. 온라인 쇼핑몰 - 온라인 쇼핑몰의 정보는 쇼핑몰에서 파는 물건과 쇼핑카트에 담겨진 물건에 대한 정보가 포함되어 있음.2, 채팅 어플리케이션 - 채팅 어플리케이션은 사용자, 사용자들이 보내는 메세지 등등을 포함하는 정보가 있음. Variables(변수)는 이러한 정보를 저장하는 데에 사용됨. A variable (변수) 변수는 "이름이 붙여진 데이터 저장고"임. 우리는 상품이나 방문자 등에 대한 데이터를 변수를 사용하여 저장할 수 있음. 자바스크립트에서 변수를 사용하기 위해서는 "let"이라는 키워드를 사용함. 아래의 구문은 "message"라는 이름을 가진 변수를 생성(다른 말로, 선언 또는 정의)를 하는 예시임. .. 2019. 1. 21.
[JavaScript 공부 -4] JavaScript의 "use strict" 오래전부터 자바스크립트는 호환성 문제 없이 발전해 옴. 기존의 기능이 변경되지 않는 동안 자바스크립트에는 새로운 기능이 추가됨. 그래서 기존에 존재하는 코드를 변경할 필요가 없다는 장점을 가지고 있으나, 부작용으로는 자바스크립트의 제작자의 불안정한 부분이나 실수들이 이 언어에 영원히 남게됨. 이 경우는 2009년 ECMAScript 5(ES5)가 나타났을 때, 자바스크립트에 새 기능을 추가하고 기존의 기능의 일부를 수정하려고 했음. 기존의 코드가 작동되게 유지하기 위해서, 대부분의 수정이 기본 설정을 해제하게 됨. 기본 설정을 유지하기 위해서는 명시적으로 "use strict"라는 명령을 사용할 수 있음. "use strict"이 명령어는 String처럼 보임. ("use strict"나 'use str.. 2019. 1. 17.
[JavaScript공부 -3] 코드의 구조 Statements Statements는 구문의 구성요소이며 행동을 수행하는 명령들을 이야기 함. 1alert("hello world!");cs 위의 코드는 hello world!라는 메세지를 보여주는 statement임. Javascript에서 이 statements들은 세미콜론(;)에 의해서 구분되고 나뉘어짐. 예를 들어, 아래와 같이 Hello와 world!를 따로 보여주려면 두 개의 alert구문을 세미콜론으로 나누면 됨. 1alert("hello"); alert("world!");cs 보통은 코드를 읽기 쉽게 하기 위해서 구문(statements)들을 줄바꿈을 통해서 구분해 줌! 12alert("hello"); alert("world!");c Semicolons(세미콜론, ; )statement.. 2019. 1. 16.
[JavaScript 공부 -2] JavaScript가 할 수 있는 일 JavaScript가 할 수 있는 일 ■ 자바스크립트가 할 수 있는 일 JavaScript는 "안전한" 프로그래밍 언어임. JavaScript는 처음에 메모리나 CPU같은 low-level의 접근이 필요로 하지 않는 브라우저를 위해 만들어졌기 때문에 이러한 메모리나 CPU같은 low-level의 접근을 제공하지 않음. JavaScript의 능력은 이 언어가 동작하는 환경에 따라 차이가 날 수 있음. 예를 들면 Node.js는 JavaScript가 임의의 파일을 읽거나 쓰기, 네트워크의 요청을 수행하는 등의 일을 할 수 있는 매서드를 지원함. 브라우저에서 수행되는 JavaScript는 웹페이지는 조작하거나 사용자나 웹서버와 상호작용 등의 역할을 수행할 수 있음. 따라서 JavaScript가 할 수 있는 일.. 2019. 1. 3.
[JavaScript 공부 - 1] JavaScript란? JavaScript란 ? JavaScript는 원래 "웹 페이지를 생동감있게 만들자!"라는 취지로 개발되었음. JavaScript가 돌아가는 프로그램을 "Scripts"라고 부르는데 얘는 웹페이지의 HTML 안에 쓰여지고 페이지가 로드 될 때 자동으로(automatically) 실행됨(executed) Scirpts는 plain text, 즉, 인간이 이해할 수 있는 코드로 쓰여지고 실행됨. 이 Scripts언어들은 언어를 실행시키는데 특별한 세팅이 필요하지 않음. 또, JavaScript라고 해서 Java랑 관련이 있다는 것은 아님. Why JavaScript? 처음에 JavaScript는 "LiveScript"라는 이름을 가지고 있었음. 하지만 당시에 Java가 엄청 유명했기 때문에 Java의 유명세.. 2018. 12. 26.
[jQuery] on으로 eventlistener 추가 할 때 인자값 넘기는 방법 on으로 eventlistener 추가 할 때 인자값 넘기는 방법 $("id/class").on(event, handler) 이런식으로 사용하면 어떤 동작(event)이 일어났을 때, 해당 선택자가 어떠한 일(handler)을 처리하는지를 넣을 수 있음.개발할 때 HTML inline에 onclick등과 같은 걸 넣지 않기로 미리 정했음. inline에서는 누르세요 이런식으로 onclick을 사용했는데 얘를 안쓰자고 합의를 하고 보니 매서드의 파라미터를 넘기는 데에서 문제가 생겼음.해결하려고 찾아보니 jQuery의 on 매서드 안에 data를 넣을 수 있다고 함 http://api.jquery.com/on/ 이곳에 들어가보면 on 매서드의 파라미터를 볼 수 있음! on은 .on(events [, sele.. 2018. 11. 29.
[JavaScript] Array.from 함수가 IE에서 작동하지 않을 때 Array.from 함수가 IE에서 작동하지 않을 때 개발 중에 Array.from을 접할 기회가 생겼었는데 IE10과 IE11에서 테스트를 해보니 동작하지 않았습니다. 개발자 도구를 켜서 보니 이런 경고가 나타났다. CanIUse라는 홈페이지에서 찾아보니 Array.from은 ECMAScript 6문법으로 IE11에서 지원하지 않았습니다.... 그렇다면 이 부분을 해결해야 한국에서 많이 사용하는 IE에서도 동작을 할 수 있게 하는게 목표였습니다. 찾아보니 Array.from부분을 1234567var elementList = document.querySelectorAll('.leftMenu_btn'); [].forEach.call(elementList, function(element) { element... 2018. 10. 24.