Martin`s Work

변수의 데이터 타입 총 다섯가지의 기본적인 데이터 타입이 존재하며 이를 원시 데이터 타입 이라고 한다. 확인하는 법으로는 typeof 를 사용하면 알 수 있다. Number - 가장 기본이 되는 데이터 타입 123var number1 =1;var number2 = '1';console.log(number1 == number2); // result : false;cs - 형 변환 123456789101112131415161718/** 암시적 형변환- 자바스크립트 엔진이 필요에 의해 암시적으로 형을 자동으로 변환시키는 것- 문자열이 숫자 문맥에 사용되면 자동으로 변환*/var num1 = "1"; //stringvar num2 = "2"; //stringvar result = num1 * num2;conso..

map 메소드 map 메소드의 대상에 대해서 map 메소드를 이용하여 콜백함수를 호출하면 기존의 배열에서 사용자가 원하는 새로운 형태의 배열을 반환할 수 있다. 사용법은 아래와 같다. 1arr.map( callback(v, i ){})cs v는 배열의 value 값이며, i 의 경우 value값에 대한 index 값이다. 123456789var arr = [1,2,3,4,5];arr.map( function(v,i){ console.log("배열의 value값은 " + v + "이고, 그 value값의 index는 " + i + "이다.");})//result : 배열의 value값은 1이고, 그 value값의 index는 0이다.//result : 배열의 value값은 2이고, 그 value값의 ind..

변수의 조작 자바스크립트는 세가지 주요한 방식을 통해 데이터의 값을 조작할 수 있다. 1. 값을 새로운 변수에 할당하여 사용할 수 있다. 2. 값을 함수나 메서드의 전달인자로 넘겨줄 수 있다.3. 데이터의 두 값이 동일한지를 알아보기 위해 한 값과 다른 값을 비교할 수 있다. 이러한 데이터 값을 조작하는 방식은 2가지로 나뉘는데, 그것이 기본형 데이터(값에 의한-by value) 와 참조형 데이터(by-reference) 이다. 기본형 데이터(값에 의한-by value) 종류- Number, String, boolean, null, undefined기본형 데이터를 조작할 때 가장 중요한 것은 데이터 값이다. 값을 할당할 때에 기본형 데이터의 경우 실제 그 값이 복사되며, 복사시 해당 데이터는 변수, 객체..

겸손한 자바스크립트의 정의 겸손한 자바스크립트 라는 의미는 자바스크립트는 웹페이지를 보는 사용자에게 무리하게 참견해서도 안된다라는 뜻이다. 예를 들어, 자바스크립트가 실행 여부 환경에 따라 웹페이지에서 제공하는 정보의 정도가 달라서는 안된다. 이러한 환경은 다음과 같다. 1. 자바스크립트를 지원하지 않는 브라우저 2. 보안상의 이유로 스크립트를 꺼둔 경우 3. DOM 명세의 일부분을 브라우저 독자적으로 해석/지원하여 스크립트의 오류 혹은 지원의 범위가 다른 경우 4. 사용자가 브라우저를 사용하는 방법이 다른 경우( 대부분의 사용자가 마우스를 가지고 이용한다 하여, 마우스를 이용할 때에만 작동하고, 키보드를 이용한 경우에는 작동하지 않을 경우. 장애를 가진 사람들은 키보드를 가지고 이용할 수 있으며, 그렇..

1. 비동기 방식과 동기 방식의 차이점 동기 방식의 경우 서버에 신호를 보냈을 때 응답이 돌아와야 다음 동작을 수행할 수 있지만, 비동기 방식은 그와 반대로 신호를 보냈을 때 응답 상태와 상관 없이 동작을 수행할 수 있다. 비동기 방식인 Ajax의 주목적으로는 화면 전환 없이 클라이언트 측과 서버측 간의 정보를 교환하기 위해서이다. 비동기 방식을 이용하면 자료를 요청할 때 걸리는 시간에 대해 클라이언트가 기다릴 필요없이 다른 작업을 바로 수행할 수 있다는 장점이 있다. 2. Ajax 개념 기존에는 Ajax는 Asynchronous Javascript and XML의 약자로 사용되었으나 이후에는 웹 어플리케이션 개발에 사용되는 기술 그룹을 말한다. 비동기 자바스크립트를 이용한 비동기 통신으로 데이터를 불러..

정규표현식에서 사용하는 메소드 1. match (String 클래스의 메소드)정규표현식에서 조건에 부합하는 문자열을 배열 형태로 리턴해준다. 만약 조건에 부합하는 문자열이 없으면 null을 반환한다. 1console.log('RegExp Study'.match(/Study/)); //결과 : ["Study", index: 7, input: "RegExp Study"]cs 2. search (String 클래스의 메소드)정규표현식에서 조건에 부합하는 문자열의 인텍스 번호를 리턴해준다. 만약 조건에 부합하는 문자열이 없으면 -1을 반환한다. 12console.log('RegExp Study'.search(/Study/)); //결과값 : 6Colored by Color Scriptercs 3. replace..

개념 HandlebarJS는 Mustache를 기초로 개발된 클라이언트 템플릿 엔진이다. HandlebarJS는 중괄호({{}})를 이용를 이용하며 사용자 정의 함수인 헬퍼 개념을 도입시켜 데이터를 자유롭게 컨트롤 할 수 있다. 사용법 1. handlerbarJS 사이트에서 해당 handlebar.js를 다운로드 받는다. HandlebarJS 공식사이트 http://handlebarsjs.com/ 2. 스크립트를 해당 html 파일에서 불러온다. - {{name}} 등과 같이 중첩 중괄호 안에 사용자 정의 함수를 넣는다. 예제 1234567891011 과일 사과 Apple red Colored by Color Scriptercs 위의 소스에 handlebar를 이용하여 데이터를 넣어본다. 기본적으로 ha..

아래와 같이 상황에 따라 attr를 다중으로 줘야하는 경우가 존재한다. 123$("img").attr("src","img.png");$("img").attr("alt","이미지 부가 설명");$("img").attr("title","지금 보시는 이미지는 이미지입니다.");cs 위의 소스를 보면 가독성도 좋지 않고, 소스 역시 깔끔하지 못하다. 이러한 경우 아래와 같이 다중 attr을 한번에 처리하면 보다 편리하고 깔끔하게 소스를 정리할 수 있다. 12345$("img").attr({ "src":"img.png", "alt":"이미지 부가 설명", "title":"지금 보시는 이미지는 이미지입니다."})Colored by Color Scriptercs

RequireJS에서는 CSS 역시 JS 와 마찬가지로 모듈화를 시켜 로드해올 수 있다. RequireJS 공식 웹사이트에서는 "RequireJS는 CSS 파일을 로드 할 수는 있으나, Gecko/Firefox 등에서는 다른 도메인에서 불러왔을 때 이슈가 생긴다." 라고 되어 있지만 플러그인을 사용하면 어느정도 해당 이슈는 해결되는 듯하다. RequireJS에서는 플러그인을 사용할 때는 'css!style.css' 와 같이 파일명 앞에 !를 사용해준다. 플로그인은 text플로그인 이나 require-css 플러그인 등을 사용하면 로드해올 수 있다.

RequireJS 개념 requirejs 는 자바스크립트 파일/모듈 로더이다. RequireJS 브라우저에 최적화 되어있지만, 다른 자바스크립트 환경( Rhino와 Node)에서도 사용할 수 있다. RequireJS와 같은 스크립트 모듈러를 사용하는 것은 당신의 코드의 질과 스피드를 향상 시킬 것이다 - RequireJS 공식 홈페이지( http://requirejs.org/) 자바스크립트는 Java나 Python과 같은 여타 서버사이드 언어처럼 한 파일에서 다른 파일은 로드해올 수가 없다. 혹여나 기능이 계속해서 추가되면 스크립트가 중복되거나 관리가 힘들어질 수 있다. 이러한 경우 코드를 a.js와 b.js 등으로 나누어 관리는 하게 되는데, 혹여나 스크립트 로드 순서가 의도대로 로딩되지 않는다면, 많..