JSON / JAVASCRIPT
<div id="a" style="width:500px; height:300px; background:red;">a <div id="b" style="width:400px; height:200px; background:yellow">b <div id="c" style="width:300px; height:100px; background:gray">c</div> </div> </div> 이렇게 div a ( div b ( div c) ) )가 있을때 a,b,c에 각각 이벤트를 거는 2가지 방법은 ? (event bubbling와 event capturing이란?)
(방법1) a.onclick = function() { alert('a'); } b.onclick = function() { alert('b'); } c.onclick = function() { alert('c'); 이렇게 이벤트를 걸면 window에서 document>>html>>body>>a > b> c> 순으로 읽어내려오며 '클릭'이벤트가 있는지 검색해두었다가, c>b>a 순으로 이벤트를 다 발생시킨다. (즉 가장 안쪽에 c를 누르면 c,b,a가 다 발생하고, b를 누르면 b,a가 발생하게 된다.) 위에서 아래로 내려오며 '탐색'하는 과정을 event capturing phase라고 하고, 다시 밑에서 위로 올라가면서 이벤트를 발생시키는 것을 event bubbling phase라고 한다. 이때 c.onclick 안에 event.stopPropagation()을 넣어서 event bubbling을 막을 수 있다. (하지만 b를 누르면 여전히 a도 fire된다) (방법2) a.addEventListener('click', function() { alert('a'); }, true); b.addEventListener('click', function() { alert('b'); }, true); c.addEventListener('click', function() { alert('c'); }, true); 이 경우 마지막 true/false는 false가 기본값이며, true일 경우 capturing일 때 발생하고, false면 bubbling일때 발생한다. (결국 안발생하는게 아님... 다 발생함)
select 에 name 또는 id로 selectedvalue를 뽑는 방법은?
** Name일 경우 document.querySelector('[name=skills]').value ** ID일 경우 document.getElementById(skill).value 같은 결과가 나온다.
var person = { "name":"John", "age":31, "city":"New York" }; 이게 '자바스크립트' OBJ 일때, name에 접근해라.
// returns John person.name; // returns John person["name"];
store JavaScript objects as text. using JSON //Storing data: myObj = { "name":"John", "age":31, "city":"New York" }; //Retrieving data: (name인 John을 뽑아라)
//Storing data: myObj = { "name":"John", "age":31, "city":"New York" }; myJSON = JSON.stringify(myObj); localStorage.setItem("testJSON", myJSON); //Retrieving data: text = localStorage.getItem("testJSON"); obj = JSON.parse(text); obj.name;
How to register event handler 이벤트 핸들러를 등록하는 방법을 설명해라
<!-- How to register event handler --> <!-- (1) --> <input type="button" onclick="alert('Hello world');" value="button" /> <!-- (2) with parameter : very bad way --> <input type="button" id="target" onclick="alert('Hello world, '+document.getElementById('target').value);" value="button" /> <!-- (3) easier way using 'this' --> <input type="button" onclick="alert('Hello world, '+this.value);" value="button" /> <input type="button" id="target2" value="button2" /> <input type="button" id="target3" value="button3" /> </body> <!-- (4) script is separated now. --> <script> var t = document.getElementById('target2'); t.onclick = function(){ alert('Hello world'); } </script> <!-- (5) Most preferred way, using 'event handler' : can register multiple event handler --> <script> var t = document.getElementById('target3'); t.addEventListener('click', function(event){ alert(1); }); t.addEventListener('click', function(event){ alert(2); }); </script> <!-- event.target = object of 'button' button is the one that will cause 'Event' --> <script> var t = document.getElementById('target2'); t.addEventListener('click', function(event){ alert('Hello world, '+event.target.value); }); </script> <!-- (6) Re-use event handler --> <script> var t1 = document.getElementById('target2'); var t2 = document.getElementById('target3'); function btn_listener(event){ switch(event.target.id){ case 'target2': alert('it is button2'); break; case 'target3': alert('it is button3'); break; } } t1.addEventListener('click', btn_listener); t2.addEventListener('click', btn_listener); </script>
Convert a JavaScript object into a JSON string, and send it to the server. var myObj = { "name":"John", "age":31, "city":"New York" };
<script> var myObj = { "name":"John", "age":31, "city":"New York" }; var myJSON = JSON.stringify(myObj); window.location = "demo_json.php?x=" + myJSON; </script>
Convert a string into a date, using the reviver function: '{ "name":"John", "birth":"1986-12-14", "city":"New York"}'; 이것을 John, Sat Dec 13 1986 19:00:00 GMT-0500 (Eastern Standard Time) 이렇게 나오도록 해라.
<script> var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}'; var obj = JSON.parse(text, function (key, value) { if (key == "birth") { return new Date(value); } else { return value; }}); obj.name + ", " + obj.birth; </script>
JSON이 web server에서 to/from할 때 어떤 형태인가? JSON을 어떻게 JS object로 convert하는가?
A common use of JSON is to exchange data to/from a web server. When receiving data from a web server, the data is always a string. Parse the data with JSON.parse(), and the data becomes a JavaScript object.
JSON와 XML을 비교해라
Both JSON and XML are "self describing" (human readable) Both JSON and XML are hierarchical (values within values) Both JSON and XML can be parsed and used by lots of programming languages Both JSON and XML can be fetched with an XMLHttpRequest JSON doesn't use end tag JSON is shorter JSON is quicker to read and write JSON can use arrays
Data를 JSON으로 어떻게 변환하는가? (ex- date)
Date objects are not allowed in JSON. If you need to include a date, write it as a string. You can convert it back into a date object later:
getElementsByName와 getElementsById의 차이점은?
Id는 하나밖에 없으므로 뒤에 [index]를 뽑지 않아도 되지만 name은 같은 name의 elements가 여러개 뽑히므로, [index]를 붙여야한다.
JSON와 JS의 array의 차이는 무엇인가?
In JSON, array values must be of type string, number, object, array, boolean or null. In JavaScript, array values can be all of the above, plus any other valid JavaScript expression, including functions, dates, and undefined.
Date를 JSON으로 바꿀 수 있는가?
In JSON, date objects are not allowed. The JSON.stringify() function will convert any dates into strings.
JSON와 JS에서 쓸 수 있는 value들을 비교해라.
In JSON, values must be one of the following data types: a string a number an object (JSON object) an array a boolean null --------------------------------------- In JavaScript values can be all of the above, plus any other valid JavaScript expression, including: a function a date undefined In JSON, string values must be written with double quotes: { name:'John' } >> JS에선 싱글 '으로 감쌀 수 있지만 JSON은 무조건 "" 더블 quote만 쓸 수 있다.
JSON의 기본 syntax는?
JSON syntax is derived from JavaScript object notation syntax: Data is in name/value pairs Data is separated by commas Curly braces hold objects Square brackets hold arrays
Why use JSON?
Since the JSON format is text only, it can easily be sent to and from a server, and used as a data format by any programming language. JavaScript has a built in function to convert a string, written in JSON format, into native JavaScript objects: JSON.parse() So, if you receive data from a server, in JSON format, you can use it like any other JavaScript object.
언제 XML / JSON을 써야하는가?
Using XML Fetch an XML document Use the XML DOM to loop through the document Extract values and store in variables Using JSON Fetch a JSON string JSON.Parse the JSON string
node란?
W3C HTML DOM 표준에 따르면, HTML 문서의 모든 것은 노드입니다. 문서 노드(document node) HTML 문서 전체를 나타내는 노드임. 요소 노드(element node) 모든 HTML 요소는 요소 노드이며, 속성 노드를 가질 수 있는 유일한 노드임. 속성 노드(attribute node) 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가지고 있음. 하지만 해당 요소 노드의 자식 노드(child node)에는 포함되지 않음. 텍스트 노드(text node) HTML 문서의 모든 텍스트는 텍스트 노드임. 주석 노드(comment node) HTML 문서의 모든 주석은 주석 노드임.
Array as JSON JSON.parse()을 사용할 때 return값은 어떤 형식으로 오는가? The content is written in JSON format, 와 Content written as an JSON array 는 서로 다른 결과를 return한다. 어떤 결과를 return하는가?
When using the JSON.parse() on a JSON derived from an array, the method will return a JavaScript array, instead of a JavaScript object. The content is written in JSON format, and can easily be converted into a JavaScript object. Content written as an JSON array will be converted into a JavaScript array.
AJAX request 를 이용해 JSON을 server에서 받아오는 방법은? (json_demo.txt 안에 { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, { "animal":"cat", "name":"Felix" }, { "animal":"hamster", "name":"Lightning" } ] } 이렇게 담겨있다고 하면 name을 뽑아라
You can request JSON from the server by using an AJAX request As long as the response from the server is written in JSON format, you can parse the string into a JavaScript object. <script> var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var myObj = JSON.parse(this.responseText); console.log(myObj.name); } }; xmlhttp.open("GET", "json_demo.txt", true); xmlhttp.send(); </script> <p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p>
JSON values cannot be one of the following data types:
a function a date undefined
delete keyword to delete properties from a JSON object: var myObj, i, x = ""; myObj = { "name":"John", "age":30, "cars": { "car1":"Ford", "car2":"BMW", "car3":"Fiat" } } 여기서 car2를 지워라.
delete myObj.cars.car2; 이후에 for문 돌리면 Ford Fiat만 나온다.
JSON ARRAY index 로 delete 하기 myObj = { "name":"John", "age":30, "cars": ["Ford","BMW","Fiat"] } 일때 Ford를 삭제하라.
delete myObj.cars[1];
var divs = getelementbyTagname('div') 등으로 여러 개의 nodes가 나올 때 특정 노드를 찾는 방법은 ?
divs[index] 로 찾는다. (특정 div elements가 나옴)
select option와 selected를 뽑는 방법은
document.getElementsByName("skills")[0].options[1].value 처럼 .options[index] 로 특정 option을 찾거나 .value를 붙이면 내부 text가 나온다 document.getElementsByName("skills")[0].options[2].getAttribute("selected") 처럼 getAttribute로 찾으면 "selected" 또는 null이 나온다.
multiple radio button 에서 모든 value을 name 으로 뽑으려면?
document.getElementsByName('ButtonName') document.getElementsByName('favoriteColor')[1].value 로 특정값을 뽑을 수도 있다.
<span data-customAttr="USA">States</span> 일때 'USA'를 뽑아내려면? (특정 element가 갖는 attributes중 하나의 value를 잡으려면? -get value of attribute
document.getElementsByTagName('span')[1].getAttribute("data-customAttr")) getAttribute("attribute이름") 을 적으면 'USA'가 나옴.
querySelectorAll by attribute name get attribute's value by attribute's name
document.querySelectorAll("[attributeName]") document.querySelectorAll("[attributeName]")[1].getAttribute("attributeName")
<table> <tr> <th>Name</th> <th>Department</th> </tr> <tr> <td class="empName">John</td> <td>Sales</td> </tr> <tr> <td class="empName">Amy</td> <td>Finance</td> </tr> <tr> <td class="empName">Austin</td> <td>Sales</td> </tr> <tr> <td class="empName">Katie</td> <td>Marketing</td> </tr> <tr> <td class="empName" data-customAttr="court">Courtney</td> <td>Sales</td> </tr> <tr> <td class="empName">Scout</td> <td>Sales</td> </tr> </table> Q. Get tr th td from table javascript. (th와 td만 table에서 select해라.)
function getPeopleInSales(){ var i; // start from 1, fixed '1' for checking if it's sale or not var depts = document.getElementsByTagName('tr')// [1].cells[1].textContent; // get 'department' // doesn't need to check the first tr for (i = 1 ; i < depts.length ; i++){ //console.log(depts[i].cells[1].textContent); // all second td if (depts[i].cells[1].textContent == "Sales"){ console.log(depts[i].cells[0].textContent); // all emp name } } }
nested JSON nested for loop 하기 myObj = { "name":"John", "age":30, "cars": [ { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] }, { "name":"BMW", "models":[ "320", "X3", "X5" ] }, { "name":"Fiat", "models":[ "500", "Panda" ] } ] } 일 때 Ford Fiesta Focus Mustang BMW 320 X3 X5 Fiat 500 Panda 이렇게 결과가 나오게끔 for문을 작성해라.
myObj = { "name":"John", "age":30, "cars": [ { "name":"Ford", "models":[ "Fiesta", "Focus", "Mustang" ] }, { "name":"BMW", "models":[ "320", "X3", "X5" ] }, { "name":"Fiat", "models":[ "500", "Panda" ] } ] } for (i in myObj.cars) { x += "<h2>" + myObj.cars[i].name + "</h2>"; for (j in myObj.cars[i].models) { x += myObj.cars[i].models[j] + "<br>"; } }
JSON Array index로 change value 값 바꾸기 var myObj, i, x = ""; myObj = { "name":"John", "age":30, "cars":[ "Ford", "BMW", "Fiat" ] }; 여기서 BMW을 Mercedes로 바꾸어라
myObj = { "name":"John", "age":30, "cars":[ "Ford", "BMW", "Fiat" ] }; myObj.cars[1] = "Mercedes";
myObj = { "name":"John", "age":30, "car":null }; 여기서 John 30 null이 나올 수 있는 코드를 짜라.
myObj = { "name":"John", "age":30, "car":null }; for (x in myObj) { myObj[x]; }
JSON for loop myObj = { "name":"John", "age":30, "car":null }; 이걸 loop를 돌려 출력값이 name age car 이 나오게 해라.
myObj = { "name":"John", "age":30, "car":null }; for (x in myObj) { x; }
var myJSON = '{ "name":"John", "age":31, "city":"New York" }'; Convert a string written in JSON format, into a JavaScript object. 그리고 John을 뽑아내라.
var myJSON = '{ "name":"John", "age":31, "city":"New York" }'; var myObj = JSON.parse(myJSON); myObj.name;
var arr = [ "John", "Peter", "Sally", "Jane" ]; JavaScript array을 하나의 string으로 convert 해라
var myJSON = JSON.stringify(arr);
var obj = { "name":"John", "age":30, "city":"New York"}; JSON 을 하나의 String으로 바꾸어라 (convert JSON to String)
var myJSON = JSON.stringify(obj);
Get value in JSON var myObj = { "name":"John", "age":30, "cars": { "car1":"Ford", "car2":"BMW", "car3":"Fiat" } } 여기서 BMW를 뽑는 코드 2가지 방법을 작성해라
var myObj = { "name":"John", "age":30, "cars": { "car1":"Ford", "car2":"BMW", "car3":"Fiat" } } myObj.cars.car2; //or: myObj.cars["car2"];
JSON Modify Value var myObj, i, x = ""; myObj = { "name":"John", "age":30, "cars": { "car1":"Ford", "car2":"BMW", "car3":"Fiat" } } 여기서 car2의 값을 Mercedes로 바꾼 후 Ford BMw Fiat를 꺼내는 for문을 작성해라.
var myObj, i, x = ""; myObj = { "name":"John", "age":30, "cars": { "car1":"Ford", "car2":"BMW", "car3":"Fiat" } } myObj.cars["car2"] = "Mercedes"; for (i in myObj.cars) { x += myObj.cars[i] + "<br>"; }
object 안에 JSON array를 for loop 하기 var myObj, i, x = ""; myObj = { "name":"John", "age":30, "cars":[ "Ford", "BMW", "Fiat" ] }; 일때 차를 하나씩 돌려 꺼내는 for문을 작성해라.
var myObj, i, x = ""; myObj = { "name":"John", "age":30, "cars":[ "Ford", "BMW", "Fiat" ] }; for (i in myObj.cars) { x += myObj.cars[i] + "<br>"; } 또는 for (i = 0; i < myObj.cars.length; i++) { x += myObj.cars[i]; } 이 가능함.
'{ "name":"John", "age":30, "city":"New York"}' 이 String을 JS object로 parse하여 name 값과 age값을 뽑아라.
var obj = JSON.parse('{ "name":"John", "age":30, "city":"New York"}'); document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
Parsing Functions using JSON function() {return 30;} 라는 function을 JSON의 value로 담아 30이 출력되도록 해라.
var text = '{ "name":"John", "age":"function () {return 30;}", "city":"New York"}'; var obj = JSON.parse(text); obj.age = eval("(" + obj.age + ")"); document.getElementById("demo").innerHTML = obj.name + ", " + obj.age(); 결과는 John, 30이 나옴. *** 하지만 function을 json에 담아 쓰려는 짓은 시도도 하지 말아라. (should avoid!!)
var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}'; 와 new Date(); 를 하나의 JSON에 담는 코드를 작성한 후 John, Sat Dec 13 1986 19:00:00 GMT-0500 (Eastern Standard Time) 이 나오게 작성해라.
var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}'; var obj = JSON.parse(text); obj.birth = new Date(obj.birth); document.getElementById("demo").innerHTML = obj.name + ", " + obj.birth; 결과는 John, Sat Dec 13 1986 19:00:00 GMT-0500 (Eastern Standard Time) 이렇게 나온다.
<table id="myTable"> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> 여기서 처음 두개의 td (cell 1,2)를 찾는 방법은? (get td in tr in javascript)
var x = document.getElementById("myTable").rows[0].cells 여기서 .cells[0] 등 인덱스로 td들 하나하나를 찾을 수 있다.
span tag 밖에 a로 감싸져있다고 하자. span tag의 parent node를 구하는 방법은?
var x = document.getElementById(span")[1].parentElement //첫번째 span의 a를 찾음. .parentElement를 이용한다.
object 안에 JSON array의 get value by index myObj = { "name":"John", "age":30, "cars":[ "Ford", "BMW", "Fiat" ] }; 일 때 Ford를 찾는 코드를 작성해라.
x = myObj.cars[0];
Get JSON value myObj = { "name":"John", "age":30, "car":null }; 여기서 name을 뽑아라
x = myObj.name; 또는 x = myObj["name"];
name은 john, age는 30, car는 car 1,2,3이 들어있는 JSON 객체를 작성해라. (Create JSON object with array in it)
{ "name":"John", "age":30, "cars":[ "Ford", "BMW", "Fiat" ] }
(1) john이란 이름이 담긴 name JSON (2) 30을 담은 age JSON (3) [ "John", "Anna", "Peter" ]인 JS array를 담은 employee JSON object를 만들어라. (4) { "name":"John", "age":30, "city":"New York" } 인 JS 객체를 담은 employee JSON을 만들어라 (5) boolean / null이 담긴 json을 만들어라
{ "name":"John" } { "age":30 } { "employee": [ "John", "Anna", "Peter" ] } { "employee":{ "name":"John", "age":30, "city":"New York" } } { "sale":true } { "sale":null }
name 은 John이라는 것을, JS/ JSON 방식으로 각각 작성해라
{ "name":"John" } //JSON { name:"John" } // JavaScript
<employees> <employee> <firstName>John</firstName> <lastName>Doe</lastName> </employee> <employee> <firstName>Anna</firstName> <lastName>Smith</lastName> </employee> <employee> <firstName>Peter</firstName> <lastName>Jones</lastName> </employee> </employees> 이걸 JSON 형태로 바꾸면?
{"employees":[ { "firstName":"John", "lastName":"Doe" }, { "firstName":"Anna", "lastName":"Smith" }, { "firstName":"Peter", "lastName":"Jones" } ]}
var obj = { "name":"John", "today":new Date(), "city":"New York"}; var myJSON = JSON.stringify(obj); var obj = { "name":"John", "age":function () {return 30;}, "city":"New York"}; var myJSON = JSON.stringify(obj); 각각 어떤 결과가 나오는가? (date와ㅏ function은 parse 되는가?)
{"name":"John","today":"2018-02-08T20:43:34.832Z","city":"New York"} {"name":"John","city":"New York"}
attribute name으로 querySelector 이용해 한개 찾기 / 모두 찾기
그냥 querySelector을 쓰면 first element만 나오고 querySelectorAll을 쓰면 모든 element가 나온다. document.querySelectorAll('[property]'); // All with attribute named "property" document.querySelectorAll('[property=value]'); // 이렇게 안의 값을 바꿀 수도 있다.
자바스크립트에서 어떤 경우에 ; 세미콜론을 붙이고, 붙이지 않는가?
모든 명령문은 세미콜론으로 종료될 수 있습니다. 하지만 위의 코드 모두 꼭 세미콜론을 붙일 필요는 없습니다 당신은 } 이 닫힌 이후에 세미콜론을 사용하면 안됩니다. var obj={};와 같은 할당문은 예외입니다 // NO semicolons after }: if (...) {...} else {...} for (...) {...} while (...) {...} // BUT: do {...} while (...); // function statement: function (arg) { /*do this*/ } // NO semicolon after }
Call 와 Callback 의 차이점은?
사용자가 시스템에게 너 이거 처리해 라고 하면 : Call 시스템이 사용자가 요청한 처리를 하다가 어라?! 다른 것도 처리해야대! 처리해줘! 라고 하면 : CallBack 비유하자면, 간단하게, 여자사람과 데이트를 하러 가기로 한 당일, 2- 1 Ex) 남자 사람이 여자 사람에게 10분에 한번씩, "준비 다 됬음?" 하고 물어보고 준비 다 됬을때, 데이트 하러 가는 것과 (물론 정말로 이런다면, 그리 멀지 않은 시일, 또는 시간에 솔로 부대로 합류 할수 있을것임. -_-ㅋ) 2- 2 Ex) 여자 사람에게 "준비 다 되면 문자 해~~" 하고 근처 PC방에서 게임하고 있다가, 문자 오면 데이트 하러 가는 것과, 어느게 더 깔끔하고 -_-ㅋ 문제의 소지가 없어 보임?
여러개의 node중 특정 tag 노드를 찾아 뽑는 방법
여러개의 node중 특정 tag 노드를 찾아 뽑는 방법 .querySelector() >> 만약 id가 name인걸 찾으려면 .querySelector("#name") 이고 tag가 span인걸 찾으려면 .querySelector("span")이다.
Event와 Event Handler,Event Listener란 무엇인가?
이벤트(event)는 어떤 사건을 의미합니다. 브라우저에서의 사건(event)에는 여러가지 event type들이 있다. (브라우저가 지원하는 이벤트로 이미 약속된 것들임) ------------------------------ onblur(객체가 focus를 잃었을 때), onchange(객체의 내용이 바뀌고 focus를 잃었을 때), onclick(객체를 클릭했을 때), ondblclick(더블클릭할 때), onerror(에러가 발생했을 때), onfocus(객체에 focus가 되었을 때), onkeydown(키를 눌렀을 때), onkeypress(키를 누르고 있을 때), onkeyup(키를 눌렀다 뗐을 때), onload(문서나 객체가 로딩되었을 때), onmouseover(마우스가 객체 위에 올라왔을 때), onmouseout(마우스가 객체 바깥으로 나갔을 때), onreset(Reset 버튼을 눌렀을 때), onresize(객체의 크기가 바뀌었을 때), onscroll(스크롤바를 조작할 때), onsubmit(폼이 전송될 때) 등의 종류가 있다. ------------------------------------------ 이벤트가 발생후 실행되는 콜백함수(callback function)를 이벤트 핸들러라고 한다.
현재 노드의 이름을 알아내는 방법 현재 노드 안쪽에 있는 childNode 알아내는 방법 여러개의 td 등 테이블에서 하나를 뽑아내는 방법 tag안에 문자를 뽑아내는 방법
현재 노드의 이름을 알아내는 방법 ( .nodeName) 현재 노드 안쪽에 있는 childNode 알아내는 방법 ( .childNodes[index]) 여러개의 td 등 테이블에서 하나를 뽑아내는 방법 ( .cells[index]) (ex) document.getElementsByTagName('tr').cells[0] tag안에 문자를 뽑아내는 방법 .textContent document.getElementsByTagName('tr').cells[0].textContent