JongTachi의 개발 블로그

자바스크립트에서 속성 이름을 동적으로 구성하고 해당 속성의 값을  가져오는 방법이 있습니다. 바로 대괄호 표기법을 사용하는 것입니다. 아주 간단합니다. 예를 들어 설명드리겠습니다.다국어 번역이 필요한데  confirmText라는 문자 뒤에 this.lang의 값에 따라 영어로 보이거나, 일본어로 보이거나, 중국어로 보여진다. (confirmTexten: 영어, confirmTextja: 일본어, confirmTextzh: 중국어) data.confirmTexten = "hi" data.confirmTextja = "こんにちは"data.confirmTextzh = "你好"var lang = this.lang ; // "en", "ja", "zh" 중 하나var context = data["confirmTe..

JavaScript에서 아주 중요한 개념인 동기, 비동기에 대해 설명드리겠습니다. 1. 동기(Synchronous) 동기적인 코드 실행은 순차적인 진행을 의미합니다. 코드는 한 번에 하나의 작업만을 수행하며, 이전 작업이 완료될 때까지 다음 작업을 시작하지 않습니다. 사용자가 어떤 동작을 실행하면, 해당 동작이 완료될 때까지 기다리며 다른 작업을 수행하지 않습니다. 동기 코드 예시 // 동기 코드 function synchronousFunction() { console.log("첫 번째 작업"); console.log("두 번째 작업"); } synchronousFunction(); 2. 비동기(Asynchronous) 비동기 코드 실행은 작업이 완료될 때까지 기다리지 않고 다른 작업을 수행할 수 있는 ..

제이쿼리에선 다수의 객체를 하나로 합칠 수 있는 문법이 있습니다. 바로 extend()라는 문법인데요. 사용법은 다음과 같습니다. $.extend(대상, 객체1, 객체2, ...,객체n) 예를들어보겠습니다. // BTS 보컬라인 var btsVocal = {jin: 1, jk:2, V:3, jimin:4}; // BTS 래퍼라인 var btsRapper = {rm:5, suga:6, jHope:7}; var bts = new Object; // 이로서 진정한 BTS가 된다. bts = $.extend({}, btsVocal, btsRapper); // merge된 객체를 출력해보면 다음과 같습니다. bts['jin'] = 1 bts['jk'] = 2 bts['rm'] = 5 bts['jHope'] = 7

자바스크립트를 배운다면 빠질 수 없는 녀석이죠 Ajax입니다. Ajax라는 용어는 Asynchronous JavaScript and XML의 약자로 사용됩니다. 1. what is Ajax? Ajax(아작스, 에이잭스 등으로 불림)는 웹페이지에서 데이터를 동적으로 로드하거나 업데이트하기 위해 사용되는 웹 개발 기술입니다. 이 기술은 전통적인 웹 페이지 동작 방식을 개선하고 사용자 경험을 향상시키기 위해 등장했습니다. 기존의 웹 페이지는 매번 전체 페이지를 새로고침해야만 했습니다. 그러나 Ajax를 사용하면서 웹 페이지에서 필요한 데이터만 서버로부터 비동기적으로 가져올 수 있게 된 것이죠. 이렇게 하면 사용자는 페이지를 전체 새로고침 하지 않아도 데이터를 로드하거나 업데이트할 수 잇으며, 애플리케이션의 응..

비교연산자 비교연산자란 프로그래밍에서 주어진 값들이 같은지, 다른지, 큰지 혹은 작은지를 구분할때 사용한는 연산자입니다. ==와 ===, !=와 !==는 보면 얼추 비슷한 것 같지만 서로 다른 연산자입니다. 뭐가 다른지 한번 확인해봅시다. 먼저 자바스크립트(javascript)는 엄격한 비교(===, !==)와 형변환 비교(==, !=) 두 가지 비교 방법을 갖고 있습니다. 1. 동등연산자(==) 두 피연산자의 자료형을 일치시킨 후, 비교를 수행합니다. alert( 1 == 1 ); // true alert( "1" == 1 ); // true alert( 1 == "1" ); // true alert( 1 == true ); // true alert( 0 == false ); // true alert(..

앞서 첫 번째 장에서 JSON 데이터 유형에 설명드렸습니다. 못 보신 분들을 위해 다시 한번 적겠습니다. JSON에 데이터 유형은 다음과 같습니다. 문자열 숫자 객체 배열 참 or 거짓 (true, false) null 함수나 날짜 같은 것들은 JSON의 데이터 유형이 아니니 참고하시길 바랍니다. 1) 문자열 JSON의 문자열은 큰따옴표("")로 묶어야 합니다. {"name":"Baek"} 2) 숫자 숫자는 정수 또는 부동 소수점이어야 합니다. {"age":22} 3) 객체 { "employee":{"name":"baek", "age":32, "city":"Seoul"} } 4) 배열 JSON은 배열도 가능합니다. { "animal":["Lion", "Tigger", "Bird"] } 5) 참 or 거짓..

1. JSON 구문 규칙 JSON구문은 JavaScript 개체 표기 구문에서 파생되었습니다. 데이터는 이름:값 쌍이 있습니다. 데이터는 쉼표로 구분됩니다. 중괄호는 객체를 담습니다. 대괄호는 배열을 유지합니다. 2. JSON 데이터 - 이름 : 값 JSON 데이터는 (이름:값) 쌍 일명 (키:값)으로 작성됩니다. 이름:값 쌍은 필드 이름(큰따옴표), 콜론, 값으로 구성됩니다. "name" : "baek" 3. JSON 값 JSON의 값은 다음 데이터 유형 중 하나여야만 합니다. 문자열 숫자 객체 배열 참 or 거짓 null 예제 person = {name:"Baek", age:32, city:"Seoul"}; person.name; // return Baek person["name"]; // retur..

1. what is Json? JSON은 Java Script Object Notation의 약자입니다. 데이터를 저장하고 전송하기 위한 텍스트 형식이며 이해하기가 쉽습니다. JSON은 가벼운 데이터들을 교환하는 형식입니다. 컵퓨터 간에 데이터를 전송하는데 사용됩니다. 언어 독립적입니다. JavaScript 객체 표기법으로 작성된 일반 텍스트입니다. 2. why use JSON? JSON 형식은 구문상 JavaScript 개체를 생성하는 코드와 유사하기 때문에 JavaScript 프로그램은 JSON 데이터를 쉽게 JavaScript 객체로 변환할 수 있습니다. 형식이 텍스트 전용이며 JSON 데이터는 컴퓨터 간에 쉽게 전송되고 모든 프로그래밍 언어에서 사용가능합니다. 즉 데이터를 주고 받기 위해 쓰인다고..

sort() : 배열 안의 원소를 정렬하는 함수입니다. 여기서 참고하셔야할 점은 정렬할 배열의 요소가 2개 미만(1개 이하)인 경우에는 에러가 발생합니다.(당연한 소리겠죠?) 1. 숫자 정렬 var num = [9, 3, 4, 6, 5, 1]; // 오름차순 num.sort(function(a, b){ return a - b; // 결과: 1, 3, 4, 5, 6, 9 }); // 내림차순 num.sort(function(a, b){ return b - a; // 결과: 9, 6, 5, 4, 3, 1 }); 2. 문자 정렬 var car = ['bmw', 'kia', 'hyundai']; car.sort(); // 결과 : bmw, hyindai, kia 3, 객체(Object) 정렬 /*BTS로 알아보..

jQuery의 선택자는 어떤 것들이 있는지 확인해봅시다. 선택자 정리 Syntax Description $("*") 모든 요소들을 선택한다. $(this) 현재 HTML 요소를 선택한다. $("p.intro") class="intro"인 의 요소를 선택한다. $("p:first") 요소의 첫번째 요소를 선택한다. $("ul li:first") 첫 번째 의 첫번째 의 요소를 선택한다. $("ul li:first-child") 모든 에서 첫번째의 요소를 선택한다. $("[href]") href 속성의 모든 요소를 선택한다. (href 쓰임 예시 ) $("a[target='_blank']") target="_blank"인 태그의 요소를 선택한다. $("a[target!='_blank']") target="_b..