holyksp: 2017

2017년 12월 16일 토요일

日本語単語１

쇼지 겐 (일본어: 昌子源しょうじげん, 1992년 12월 11일 ~ )는 일본의
축구 선수이다.

うちべんけい[内弁慶]
집안에서는 큰소리치지만 밖에서는 패기가 없는 일;
또, 그런 사람; 횃대 밑 사내; 집안 호랑이.(=かげべんけい)

はいのぼる[はい上る·這い上る]
기어오르다; 덩굴져 오르다.

しめす[示す]
가리키다, 보이다;나타내다

さすが[遉·流石]
과연.
자타가 공인할 정도의; 그(처럼) 대단한.

はじをさらす[恥を曝す]
많은 사람 앞에서 창피를 당하다; 자신의 치부를 만천하에 드러내다.
창피[수치]를 드러내다.

いきはじをさらす[生恥をさらす]
살아남아서[오래 살다가] 수모를 당하다.

ひどい[酷い·非道い]　심하다, 가혹하다;호되다, 지독하다;엄청나다

いっこく[一刻]　일각, 짧은 시간, 一時의 4분의 1

とうし[闘志]　투지.(=闘魂)

2018년 06월 27일 FIFA 러시아 월드컵 본선
러시아 카잔 독일 국가대표 :
2018년 06월 24일 FIFA 러시아 월드컵 본선
러시아 로스토프 온돈 멕시코 국가대표 :
2018년 06월 18일 FIFA 러시아 월드컵 본선
러시아 니즈니 노브고로드 스웨덴 국가대표

2017년 12월 12일 화요일

日本語　単語の整理。

しゃりん[車輪]
차륜;수레바퀴, 배우가 열심히 연기함;전하여, 부지런히 일함

だいしゃ[台車]
철도 차량 따위의 바퀴 위에 있으며 차체를 지탱하는 부분;
짐받이에 수레바퀴와 손잡이들 단 운반용 손수레.

あぶらもれ[油漏れ]
1.기름이 새는 것; 기름 누출.

にしにほん[西日本]
[지리]서일본(静岡県의 浜名 호(湖)에서 新潟県의 親不知 부근을
잇는 선의 서쪽 지역).

こうせい[鋼製]
강제; 강철로 만듦; 또, 그 제품.

きれつ[亀裂]
균열.(=동의어 ひびわれ·われめ)

運輸安全委員会

インシデント(incident, 인시던트)
1.(작은) 사건. (어떤 사건의) 부수 사건.

しゃりん[車輪]
차륜;수레바퀴, 배우가 열심히 연기함;전하여, 부지런히 일함

継手
つぎて[継(ぎ)手]
이은 부분;이음매, 상속자;계승자, 이음수

こげる[焦げる]
눋다; 타다.

へんしょく[変色]
변색.

ふちゃく[付着·附着]
부착.

がいかん[外観]
외관.(=外見)

2017년 12월 10일 일요일

JavaScriptにおけるvar/let/constの使い分け

JavaScriptにおけるvar/let/constの使い分け

2016年7月14日 by 古都こと
JavaScriptの3つある変数宣言、varとletとconstは、よく混乱を生みます。
どれも変数を宣言することに変わりはないので、違いがわかりにくいのです。
このことが初学者を混乱させている場面をたびたび目にしますし、プログラミングに慣れ親しんだ人でも役割を意識しないまま書いていることがあります。

そこでこの記事では、3つの変数宣言の役割とその使い分けについて、それぞれ簡単に紹介してみます。

Contents
1 3種類の変数宣言とその使い分け
1.1 var – 変数を宣言する
1.2 let – 変数を宣言する（ブロックスコープ）
1.3 const – 再代入不可能な変数を宣言する
1.4 つまり…
2 let vs. const
2.1 再代入はほとんど必要ない
2.2 基本的にはconstを使用する
2.3 再代入が必要になる（letを使用する）場面
3 まとめ
3種類の変数宣言とその使い分け

var – 変数を宣言する

varは、JavaScriptにおいて変数を宣言する上で、最も基本的な方法になります。
varで宣言された変数は関数スコープとなり、宣言のスコープ先頭への巻き上げ（Hoisting）が行われます。
（※変数のスコープおよび巻き上げについてはここでは解説しません。）

var x = 10;
x = 20;
もともと、JavaScriptの変数宣言にはvarしかありませんでした。
変数を宣言する唯一の方法だったのです。letとconstは新参者ということになります。
よって古いブラウザでも何の問題なく動くのがこのvarになります。

しかし、現在ではvarを使う理由はありません。関数スコープおよび巻き上げのせいで、
挙動の予測が困難になるからです。varを使うのは、古いブラウザを対象にした場合のみになります。
モダンブラウザを対象にする場合は、varの代わりにletを使用してください。

let – 変数を宣言する（ブロックスコープ）

letは比較的新しい変数宣言の方法です。varと同じく変数を宣言できますが、
letで宣言した変数はブロックスコープになります。巻き上げは行われますが、宣言前に参照するとエラーとなります。

let x = 10;
x = 20;
つまり、letは他のプログラミング言語における変数宣言とほぼ同じ動きをします。
プログラマにとって直感的で、扱いやすい挙動をするということです。
初学者にとっても、letは不思議な挙動をしないので、わかりやすいはずです。

letの用途は、varの代わりです。varでも変数は宣言できますが、letのほうが、
よりわかりやすい動きをします。モダンブラウザを対象にしたコードでは、かつてvarを使っていた場面全てで
letを使うことを推奨します。極めて特殊な処理をしていないかぎり、varをletに置き換えても問題は出ないはずです。

const – 再代入不可能な変数を宣言する

constはletと同時期に提案された変数宣言の方法です。letと同じくブロックスコープで、
巻き上げは行われるが宣言前の参照がエラーになる点も同じです。ただし、
constで宣言された変数は、再代入が不可能になります。

const x = 10;
x = 20; // 再代入はerror
注意したい点としては、他のプログラミング言語ではconstというキーワードはコンパイル時定数になることがほとんどですが、
JavaScriptでは単に再代入不可になるだけということです。つまり、JavaScriptにおけるconstは、
他のプログラミング言語におけるfinalと同じ動きをします。

constは、ほぼletと同じです。letとの違いは再代入が可能か否かだけです。constを使うのは変数への再代入が不要な場合、
あるいは再代入されたくない場合になります。

つまり…

つまり、JavaScriptにおいて、実際に変数の宣言に使用するのは、
letとconstだけということになります。varのことは忘れてしまってかまいません。
再代入が必要な場合はlet、不必要な場合はconstを使用すればいいのです。

let vs. const

さて、varは脱落しました。残る問題はletとconstの使い分けです。
再代入が必要か不必要か、どうやって見分けるのでしょうか。
それぞれどんな場面で使用することになるのでしょうか。

再代入はほとんど必要ない

実は、実際のプログラミングにおいて、再代入というのはほとんど必要ないのです。
あなたが今まで書いたプログラムを思い浮かべてください。変数を書き換える場面というのは、めったになかったはずです。

多くの変数は、一度値が代入されると、その値のまま生涯を終えます。
簡単なプログラムを想像してみましょう。円の面積を求めるプログラムです。

const pi = 3.14;
const radius = 5;
const area = pi * radius * radius;
const message = `半径${radius}の円の面積は約${area}です。`;

console.log(message);
このプログラムに再代入は一切出てきません。それもそのはずです。
まず、意味が異なる値には、それぞれ違う名前が割り当てられます。
そして計算して値が変われば、意味も変わり、別の名前が割り当てられます。
つまり、違う値が同じ名前に割り当てられることは、普通ありません。再代入は発生しないのです。

基本的にはconstを使用する

再代入が発生しない場面でletを使うのは得策ではありません。不必要な変数の再代入を許せば、
バグの発生に繋がることがあります。また、コードの読み手に「この変数は値が変わる可能性があるのか？
値の変化を追いかける必要がありそうだ」と不要な懸念を抱かせることになり、デバッグの手間も増えます。

以上のことから、変数の宣言には、基本的にはconstを使うことを推奨します。
constを使うことで、値が変化しないという保証をすることができるのです。

再代入が必要になる（letを使用する）場面

逆に再代入が必要になるのは、どんな場面なのでしょうか。再代入は、
主にイテレーション（繰り返し）処理が行われる場面で必要とされます。
代表的な例としてはfor文があります。for文ではイテレータ変数（多くの場合iという名前が使用される）の値を増減させ、
イテレーションを行います。このときに再代入が必要になります。

for(let i = 0; i < 100; i++) {
console.log(i);
}
ループ中にiの値が何度も書き換わっています。こういったときはletが必要になります。

ただしforループ内の変数宣言については、基本通りconstを使うべきです。

for(let i = 0; i < 100; i++) {
const value = i * 2;
console.log(value);
}
まとめ

varは使わず、letとconstだけを使う。
ほとんどの変数は再代入の必要が無いので、基本的にはconstを使う。
どうしても再代入が必要なときだけletを使う。

2017년 12월 9일 토요일

javascript memo list1

https://www.javatpoint.com/javascript-form-validation#email

<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

<script type="text/javascript">
document.write("JavaScript is a simple language for javatpoint learners");
</script>

for (i=1; i<=5; i++)
{
document.write(i + "<br/>")
}

var i=11;
while (i<=15)
{
document.write(i + "<br/>");
i++;
}

var i=21;
do{
document.write(i + "<br/>");
i++;
}while (i<=25);

var a=20;
if(a==10){
document.write("a is equal to 10");
}
else if(a==15){
document.write("a is equal to 15");
}
else if(a==20){
document.write("a is equal to 20");
}
else{
document.write("a is not equal to 10, 15 or 20");
}

var s1="javascript ";
var s2="concat example";
var s3=s1.concat(s2);
document.write(s3);

var s1=" javascript trim ";
var s2=s1.trim();
document.write(s2);

var s1="abcdefgh";
var s2=s1.slice(2,5);
document.write(s2);

var s1="JavaScript toUpperCase Example";
var s2=s1.toUpperCase();
document.write(s2);

var s1="JavaScript toLowerCase Example";
var s2=s1.toLowerCase();
document.write(s2);

var s1="javascript from javatpoint indexof";
var n=s1.lastIndexOf("java");
document.write(n);

var s1="javascript from javatpoint indexof";
var n=s1.indexOf("from");
document.write(n);

var str="javascript";
document.write(str.charAt(2));

var stringname=new String("hello javascript string");
document.write(stringname);

object={property1:value1,property2:value2.....propertyN:valueN}
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);

var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);

function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);

document.write(e.id+" "+e.name+" "+e.salary);

function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;

this.changeSalary=changeSalary;

function changeSalary(otherSalary){
this.salary=otherSalary;
}
}
e=new emp(103,"Sonoo Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
e.changeSalary(45000);
document.write("<br>"+e.id+" "+e.name+" "+e.salary);

var emp=["Sonoo","Vimal","Ratan"];
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br/>");
}

var i;
var emp = new Array();
emp[0] = "Arun";
emp[1] = "Varun";
emp[2] = "John";

for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}

var emp=new Array("Jai","Vijay","Smith");
for (i=0;i<emp.length;i++){
document.write(emp[i] + "<br>");
}

Current Date and Time: <span id="txt"></span>
var today=new Date();
document.getElementById('txt').innerHTML=today;
Current Date and Time: Sun Dec 10 2017 09:59:52 GMT+0900 (JST)

var date=new Date();
var day=date.getDate();
var month=date.getMonth()+1;
var year=date.getFullYear();
document.write("<br>Date is: "+day+"/"+month+"/"+year);
Date is: 10/12/2017

Current Time: <span id="txt"></span>
<script>
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
</script>
Current Time: 9:59:52

Events Description
onclick occurs when element is clicked.
ondblclick occurs when element is double-clicked.
onfocus occurs when an element gets focus such as button, input, textarea etc.
onblur occurs when form looses the focus from an element.
onsubmit occurs when form is submitted.
onmouseover occurs when mouse is moved over an element.
onmouseout occurs when mouse is moved out from an element (after moved over).
onmousedown occurs when mouse button is pressed over an element.
onmouseup occurs when mouse is released from an element (after mouse is pressed).
onload occurs when document, object or frameset is loaded.
onunload occurs when body or frameset is unloaded.
onscroll occurs when document is scrolled.
onresized occurs when document is resized.
onreset occurs when form is reset.
onkeydown occurs when key is being pressed.
onkeypress occurs when user presses the key.
onkeyup occurs when key is released.

Method Description
alert() displays the alert box containing message with ok button.
confirm() displays the confirm dialog box containing message with ok and cancel
button.
prompt() displays a dialog box to get input from the user.
open() opens the new window.
close() closes the current window.
setTimeout() performs action after specified time like calling function, evaluating
expressions etc.

var n=new Number(value);
var x=102;//integer value
var y=102.7;//floating point value
var z=13e4;//exponent value, output: 130000
var n=new Number(16);//integer value by number object

Constant Description
MIN_VALUE returns the largest minimum value.
MAX_VALUE returns the largest maximum value.
POSITIVE_INFINITY returns positive infinity, overflow value.
NEGATIVE_INFINITY returns negative infinity, overflow value.
NaN represents "Not a Number" value.

JavaScript Number Methods

Let's see the list of JavaScript number methods with description.

Methods Description
toExponential(x) displays exponential value.
toFixed(x) limits the number of digits after decimal value.
toPrecision(x) formats the number with given number of digits.
toString() converts number into string.
valueOf() coverts other type of value into number.

document.writeln("<br/>screen.width: "+screen.width);
document.writeln("<br/>screen.height: "+screen.height);
document.writeln("<br/>screen.availWidth: "+screen.availWidth);
document.writeln("<br/>screen.availHeight: "+screen.availHeight);
document.writeln("<br/>screen.colorDepth: "+screen.colorDepth);
document.writeln("<br/>screen.pixelDepth: "+screen.pixelDepth);

var number=document.getElementById("number").value;
var allgenders=document.getElementsByName("gender");
var totalpara=document.getElementsByTagName("p");

function showcommentform() {
var data="Name:<input type='text' name='name'><br>Comment:<br><textarea rows='5' cols='80'></textarea>
<br><input type='submit' value='Post Comment'>";
document.getElementById('mylocation').innerHTML=data;
}

[MyBatis] parameterType HashMap 관련 예시(다중파라미터)

[MyBatis] parameterType HashMap 관련 예시(다중파라미터)
1. 기존 parameterType="String" 파라미터 한개로 처리

UserInfoMapper.java
public interface UserInfoMapper {
public UserInfo getUserInfo(String userId);
}

UserInfoMapper.xml
<select id="getUserInfo" parametertype="String" resultmap="UserInfoResultMap">

SELECT
id,
user_id,
state
FROM
UserInfo
WHERE
user_id = #{userId}
</select>

UserInfoService.java
String userId = "user_id_value";
userInfo = userInfoMapper.getUserInfo(userId);
※ 단일 parameterType 로 String userId값 넣음

2. parameterType HashMap을 이용해서 여러개 넣기

UserInfoMapper.java
public interface UserInfoMapper {
public UserInfo getUserInfo(HashMap<String, Object> map);
}

UserInfoMapper.xml
<select id="getUserInfo" parametertype="hashmap" resultmap="UserInfoResultMap">
SELECT
id,
user_id,
state
FROM
UserInfo
WHERE
user_id = #{userId}
AND
state = #{state}
</select>
UserInfoService.java
HashMap<String, Object> map = new HashMap<String, Object>();
map.put("userId", "user_id_value");
map.put("state", "state_value");
userInfo = userInfoMapper.getUserInfo(map);

3. 2번과 비슷하지만 기존 userInfo 도메인 이용

UserInfoMapper.java
public interface UserInfoMapper {
public UserInfo getUserInfo(HashMap<String, Object> map);
}
UserInfoMapper.xml
<select id="getUserInfo" parametertype="hashmap" resultmap="UserInfoResultMap">

SELECT
id,
user_id,
state
FROM
UserInfo
WHERE
user_id = #{user.userId}
AND
state = #{user.state}
</select>

UserInfoService.java
UserInfo userInfo = new UserInfo();
userInfo.setUserId("user_id_value");
userInfo.setState("state_value");

HashMap<String, Object> map = new HashMap<String, Object>();
map.put("user", userInfo);
userInfo = userInfoMapper.getUserInfo(map);

4. Param 이용

UserInfoMapper.java
public interface UserInfoMapper {
public UserInfo getUserInfo(@Param("userId") String userId, @Param("state") int state);
}

UserInfoMapper.xml
<select id="getUserInfo" resultmap="UserInfoResultMap">
SELECT
id,
user_id,
state
FROM
UserInfo
WHERE
user_id = #{userId}
AND
state = #{state}
</select>
UserInfoService.java
String userid ="user_id_value";
int state = 0;
userInfo = userInfoMapper.getUserInfo(String userid,int state);

json sample1

@RequestMapping(value = "ok", method = RequestMethod.POST)
public String ok(@Validated TestForm form)
{
System.out.print("");
String tttt = form.getTestList();

String a = tttt;
String saaaa = a.substring(1, a.length()-1 );

JSONParser jsonParser = new JSONParser();
JSONObject jsonObj;
try {
jsonObj = (JSONObject) jsonParser.parse(saaaa);
JSONObject jsonObject = (JSONObject) jsonObj;

for (Object key : jsonObject.keySet()) {
String keyString = key.toString();

JSONArray memberArray = (JSONArray) jsonObject.get(keyString);

for(int i=0 ; i<memberArray.size() ; i++){
System.out.print("");
JSONObject tempObj = (JSONObject) memberArray.get(i);

JSONArray memberArray2 = (JSONArray) tempObj.get("workYearMonthListTable");
for(int j=0; j<memberArray2.size(); j++)
{
JSONObject aaaa = (JSONObject) memberArray2.get(j);
String temp1 = aaaa.get("name").toString();
String temp2 = aaaa.get("id").toString();
}

JSONArray memberArray3 = (JSONArray) tempObj.get("machinListTable");
for(int j=0; j<memberArray3.size(); j++)
{
JSONObject aaaa = (JSONObject) memberArray3.get(j);
String temp1 = aaaa.get("name").toString();
String temp2 = aaaa.get("id").toString();
}

}

}

} catch (org.json.simple.parser.ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}

return "next";
}

var bigTotal = [];
var total = [];
// 리스트 생성
//var testList = new Array();
var testList = []

for (var i=0; i < 5; i++)
{
//var employees = [];
//employees["id"] = "100";
//employees["name"] = "Yashwant" + i;
//employees["age"] = "30";
//employees.push({id:100, name:'Yashwant' + i, age:30});
var data = new Object();
data.id = i ;
data.name = "Tester #" + i ;

testList.push(data);

//all.push(employees);
}

//var jsonEncode = JSON.stringify(testList);

var data2 = new Object();
data2.workYearMonthListTable = testList;
data2.machinListTable = testList;

total.push(data2);

//total.push({workYearMonthListTable: testList});
//total.push({machinListTable: testList});

var keyValue1 = 'site1';
var keyValue2 = 'site2';
//bigTotal[keyValue] = total;

var obj = {};

obj[keyValue1] = total;
obj[keyValue2] = total;

bigTotal.push(obj);

/*
var keyname = 'key';
var something = { };
something[keyname] = 'value';
*/

var jsonEncode = JSON.stringify(bigTotal);
alert(jsonEncode);

var input = $("<input>").attr("type", "hidden").attr("name", "tableList").val(JSON.stringify(gridData));
var input2 = $("<input>").attr("type", "hidden").attr("name", "testList").val(JSON.stringify(bigTotal));
/*
var inputObj = "";
inputObj = document.createElement("input");
$(inputObj).attr("type","hidden");
$(inputObj).attr('name','tableList');
$(inputObj).attr("value",JSON.stringify(tableList));
*/
//$('#TestForm').append($(inputObj));
$('#dynamic_form').append($(input));
$('#dynamic_form2').append($(input2));
//document.body.appendChild($('#TestForm'));
$("#TestForm").submit();

2017년 12월 4일 월요일

jstl을 이용한 javascript에서 el값 받기 JSP / JAVA

2013. 7. 19. 14:22

복사http://blog.naver.com/typeofb/191469973

// java

HashMap<Object, Object> map = new HashMap<Object, Object>();

map.put("name", "홍길동");

map.put("city", "서울");

map.put("age", 30);

ArrayList<Object> list = new ArrayList<Object>();

list.add("hong@naver.com");

list.add("gil@daum.net");

list.add("dong@nate.com");

ArrayList<HashMap<Object, Object>> arrayListMap = new ArrayList<HashMap<Object, Object>>();

arrayListMap.add(map);

HashMap<Object, ArrayList<Object>> lMultiData = new HashMap<Object, ArrayList<Object>>();

lMultiData.put("email", list);

mav.addObject("list_map", arrayListMap);

mav.addObject("map_list", lMultiData);

// javascript

var list1 = new Array();

<c:forEach items="${list_map}" var="item1">

list1.push("${item1.name}");

list1.push("${item1.city}");

list1.push("${item1.age}");

</c:forEach>

for (var i = 0; i < list1.length; i++) {

alert(list1[i]);

}

alert("${list_map[0].name}");

var list2 = new Array();

<c:forEach items="${map_list.email}" var="item2">

list2.push("${item2}");

</c:forEach>

for (var i = 0; i < list2.length; i++) {

alert(list2[i]);

}

json만들기

Convert Java Map to Javascript Map

https://stackoverflow.com/questions/13840660/convert-java-map-to-javascript-map

<dependency>
<groupId>org.json</groupId>
<artifactId>json</artifactId>
<version>20070829</version>
</dependency>

Convert Java Map to Javascript Map

Map<String, String> langSel = new HashMap<String, String>();
langSel.add("en", true);
langSel.add("de", false);
langSel.add("fr", false);

JSONObject jsonObj = new JSONObject(langSel);
engine.put("langSel", jsonObj.toString());

var model=[];
model.paramOne="${model.paramOne}";
model.paramTwo="${model.paramTwo}";
model.paramThree="${model.paramThree}";

{top1={test1=[{name=kim seungpil, id=1, age=38}]}, top2={test1=[{name=kim seungpil, id=1, age=38}]}}

Map<String, String> langSel = new HashMap<String, String>();
langSel.add("en", true);
langSel.add("de", false);
langSel.add("fr", false);

JSONObject jsonObj = new JSONObject(langSel);
engine.put("langSel", jsonObj.toString());

var color = {}; // unique object instance
var shape = {}; // unique object instance
var map = new HashMap();
map.put(color, "blue");
map.put(shape, "round");
console.log("Item is", map.get(color), "and", map.get(shape));
</script>

자바스크립트에서 당장 사용해야 할 5가지의 배열 메소드들 (Array)
2015년 3월 4일 글쓴이 KAZIKAI·댓글 9개
배열 메소드 들중에.. 평소에 잘 사용하지 않지만, 사용하면 생산성이 많이 올라가는 메소드 들이다.

하지만 다시 리마인드 하는 의미로 정리하면, 도움이 될것 같다. 익숙한놈도 있고.. 초기에 JS 공부할때 알아뒀지만, 한번도 안써봤던,,(reduce) 같은 놈들은 다시 보니 어색 하기도 하고. 이번기회에 정리를 해보자

아래는 이 포스팅의 원문이 되는 블로그

http://colintoh.com/blog/5-array-methods-that-you-should-use-today?utm_source=javascriptweekly&utm_medium=email

1. 배열에서특정값이 있는지 찾을때는 indexOf를 사용해라

대부분의 배열에서 indexOf 를 사용 하지 않으면, for loop 를 돌려서 찾을수 밖에 없다. 즉 아래와 같은 코드를 사용 하게 되는데.

var isExist =false;
for( var i = 0; max = array.length; i += 1 ) {
if( array[i] === "특정값" ){
isExist = true;
}
}
위와 같은 코드는 아래와 같이 간단하게 사용할 수 있다.

var isExist = (array.indexOf(“특정값”)!== -1 )
즉 간단하게 위의 for loop 를 한줄로 표현할 수 있으며, 이부분이 생산성이나, 코드 가독성에 도 옳은 영향을 끼친다.

2. filter 를사용해보세요:)

이건.. JSON 오브젝트로 이루어진 배열중에 특정 값만 filter 시킬때 유용하다.

var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16}
];
var newArr = arr.filter(function(item){
return item.name === "orange";
});
console.log("Filter results:",newArr);
위 값의 newArr 은 name이 orange 인 놈만 필터 되서 나온다.

3. forEach()를쓰세요

사실 개인적으로 for 루프가 더 성능 향상에 좋다고 해서..( 자바스크립트 성능 최적화에 나온다. ).for 로 풀어서 쓰는데 1ms 도 차이 안나니 그냥 forEach를 쓰라고 가이드 한다.

사용법은 아래와 같다.

var array = [1,2,3,4,5];
array.forEach( function( v, i ){
if( v === 3 ){
console.log( v + ":" + i); // 3:2 가 나온다.
}
});
4. map을 잘 활용하자.

이전에 jsperf 에서 map이 forEach 보다 더 성능이 빨라서. 개인적으로 array에서 map을 주로 써왔다. 하지만 … map과 forEach는 용도가 미세하게 다른데.. map은 각 루프에서return을 할수있는 것이 특징이다.

( return된 결과의 동일한 배열을 원하는것이 아니라면 forEach가 더 적합하다. )

즉 map을 사용하면, 리턴값으로 같은 길이의 배열이 나오게 된다.

예를들어 …

var a = [1,2,3,4,5];
var b = a.forEach( function(v, i){ console.log(v); return v+1;}});
var c = a.map( function(v, i){ console.log(v); return v+1;});
를 실행해보면차이점이 다르다. b는 undefined 가 나오며 c 는 [2,3,4,5,6] 이라는 배열이 나온다.즉 배열을 가지고, 연산을 하고 길이가 같은 배열로 결과를 리턴받고 싶을때는 map을 쓰는것이 훨씬 유리하다.

forEach와는 용도가 서로 다르다는것을 기억하자

마지막으로 5번..

5.reduce!! 를 사용하자

이놈은.. 인자를 어떻게 주냐에 따라 용도가 달라진다.

array.reduce(f,n)
var a= [1,2,3,4,5] //f는 함수 n은 두번째 인자 라고 가정
n이 없을경우 array.reduce(f);를 살펴 보자
f의
(0) iteration
- 첫번째 인자 : 1
- 두번째 인자 : 2
(1) iteration
- 첫번째 인자 : 1,2
- 두번째 인자 : 3
(2) iteration
- 첫번째 인자 : 1,2,3
- 두번째 인자 : 4
(3) iteration
- 첫번째 인자 : 1,2,3,4
- 두번째 인자 : 5
로 나오게 된다.
즉 f 의 인자가 f( a,b,c,d) 라면
a=이전값
b= 현재값
c= 인덱스
d= 배열
로 생각하면 된다.

하지만 reduce 메소드를 불러올때 n을 주게 되면, f의 첫번째 인자가 n이 되게 되는데, 즉 이전초기값이 n으로 대체 된다.

var a= ["a","b","c","d","e","a","b","a","c","c","c"];
var b = a.reduce(function(x,y){
console.log("x:", x);
console.log("y:", y);
x[y] = ++x[y]|| 1;
return x;
},{});
console.log(b);
위 예제를 돌려보면 B 는 최종적으로

Object {a: 3, b: 2, c: 4, d: 1, e: 1}

로 리턴된다.

설명한 5개의 메소드들은 사용하면 개발 생산성 및 가독성이 좋아질 것 같다.

2017년 12월 3일 일요일

トランプ氏、フリン前補佐官の行動「合法」　「FBIに嘘」は知っていたと

トランプ氏、フリン前補佐官の行動「合法」　「FBIに嘘」は知っていたと
트럼프 플린 전 보좌관의 행동 "합법적" "FBI에 거짓말 '알고 있었다고

12/3(日) 12:18配信
ドナルド・トランプ米大統領の側近で前大統領補佐官（国家安全保障問題担当）のマイケル・フリン被告が連邦捜査局（FBI）に虚偽の供述をしたと有罪を認め、捜査に協力していると明らかにした問題で、トランプ氏は2日、ツイッターで、被告が政権移行期間にロシア大使と接触していたのは「合法」だと書いた。さらに大統領は、被告がFBIに「嘘をついた」ことは前から承知していたと書いた。
도널드 트럼프 미국 대통령의 측근에서 전 대통령 보좌관 (국가 안전 보장 문제 담당)의 마이클 플린 씨가 연방 수사 국 (FBI)에 허위 진술을했다고 유죄를 인정하고 수사에 협력하고 있다고 밝혔다 한 문제에서 트럼프는 2 일 트위터에서 피고가 정권 과도기 러시아 대사와 접촉하고 있던 것은 "합법적"이라고 썼다. 또한 대통령은 피고가 FBI에 "거짓말"것은 전부터 알고 있었다고 썼다.

2日朝はトランプ政権にとって、包括的減税法案が早朝に上院を51対49で通過したことを祝う機会となるはずだった。しかし、それよりもフリン被告の有罪証言と捜査協力が大きく注目されるなか、大統領は「僕がフリン将軍をくびにしなきゃならなかったのは、副大統領とFBIに嘘をついたからだ。彼はその嘘について、有罪を認めた。残念なことだ。というのも、政権移行期の行動は合法だったので。隠すことは何もなかった！」とツイートした。
2 일 아침 트럼프 정권에게 포괄적 인 감세 법안이 이른 아침에 상원을 51 대 49로 통과 한 것을 축하하는 기회가 될 것 같았다. 그러나 그보다 플린 피고의 유죄 증거와 수사 협력이 크게 주목되는 가운데, 대통령은 "내가 플린 장군을 해고하지 않으면 안 것은 부통령과 FBI에 거짓말을했기 때문이다. 그 그 거짓말에 대해 유죄를 인정했다. 안타까운 일이다. 왜냐하면 정권 이행기의 행동은 합법적이기 때문에. 숨기는 것은 아무것도 없었다! "라고 트윗했다.

https://twitter.com/realDonaldTrump/status/937007006526959618

今年2月のフリン補佐官解任当時、ホワイトハウスは解任理由について、昨年12月に駐米ロシア大使と接触したことについて副大統領に事実と異なる説明をしたからだと説明していた。しかし今回のツイートで大統領は、前補佐官がFBIに嘘をついたことを解任当時すでに承知していたと書いた。
올해 2 월 플린 보좌관 해임 당시 백악관 해임 이유에 대해 지난해 12 월 주미 러시아 대사와 접촉 한 것에 대해 부통령에 사실과 다른 설명을했기 때문이라고 설명했다. 그러나 이번 트윗 대통령은 전 보좌관이 FBI에 거짓말을 해임 당시 이미 알고 있었다고 썼다.

5月に解任されたFBIのジェイムズ・コーミー長官は6月、上院情報委員会で、フリン前補佐官解任の翌日に大統領に呼ばれ、前補佐官への捜査をやめるよう要請されたと宣誓証言した。2月当時に自分が書いたメモも提出した。これに対してホワイトハウスは、捜査中止の要請はしていないと反論した。
5 월에 해임 된 FBI의 제임스 코미 장관은 6 월 상원 정보위원회에서 플린 전 보좌관 해임 다음날 대통령 불리며 전 보좌관에 대한 수사를 중단하라고 요청되었다고 선서 증언했다 . 2 월 당시 자신이 쓴 메모도 제출했다. 이에 대해 백악관은 수사 중단을 요청하지 않았다고 반박했다.

もしもトランプ大統領が、FBIへの虚偽供述を承知の上で、フリン前補佐官への捜査中止をFBI長官に要請したとするなら、それは大統領による司法妨害に相当すると、複数の専門家が指摘している。
만약 트럼프 대통령이 FBI에 허위 진술을 감안하고, 플린 전 보좌관에 대한 수사 중단을 FBI 장관에게 요청했다고한다면, 그것은 대통령의 사법 방해에 해당하면 여러 전문가들이 지적 있다.

たとえば、オバマ政権下の司法省にいたマシュー・ミラー氏はツイッターで、「これはすごい。（トランプ氏が）たった今、司法妨害を認めたぞ。もしコーミーに、これ以上捜査しないでほしいと言った時点で、フリンがFBIに嘘をついたと（大統領が）知っていたなら。これが事件になる」と書いた。
예를 들어, 오바마 행정부의 법무부에 있던 매튜 밀러는 트위터를 통해 "이것은 대단하다. (트럼프가) 방금 사법 방해를 인정 했어. 만약 코미에 더 이상 수사하지 말아달라고 말했다 현재 플린이 FBI에 거짓말과 (대통령이) 알고 있었다면 이것이 사건이된다 "고 썼다.

https://twitter.com/matthewamiller/status/937009631662104578

一方で、2日に報道陣を前にしたトランプ氏は、フリン被告の司法取引について質問され、「なんの結託もない。なんの結託もないということが、明らかになった。まったくなんの結託もない。なのでみんなとても喜んでいる」と答えた。
한편, 2 일 보도진을 앞둔 트럼프 플린 피고의 형량에 관한 질문 "무슨 결탁도 없다. 아무런 결탁이 없다는 것이 밝혀졌다. 전혀 아무런 결탁도 없다. 그래서 모두 매우 기뻐하고있다 "고 답했다.

これとは別に、米紙ニューヨーク・タイムズは、フリン被告がロシア当局と接触したのは独自判断の単独行動だったというホワイトハウスの主張とは食い違う、政権移行チームの内部メールを入手したと伝えた。
이와는 별도로, 미국 신문 뉴욕 타임즈는 플린 씨가 러시아 당국과 접촉 한 것은 자체 판단의 단독 행동 이었다는 백악관의 주장과는 어긋나는 정권 인수팀의 내부 메일을 입수했다고 전했다 .

同紙によると、たとえば移行チームのK・T・マクファーランド上級顧問がメールで、ロシアが「アメリカの選挙を（トランプ氏に）投げてよこした」と書いていた。
신문에 따르면, 예를 들어 마이그레이션 팀 K · T 맥팔랜드 선임 고문이 편지에서 러시아가 "미국의 선거를 (트럼프)에 던져 보내어"고 써 있었다.

ホワイトハウスの法律顧問は同紙に対して、上級顧問は単に民主党側がそのように見せかけようとしていると意味で書いただけだと説明した。
백악관 법률 고문은 신문에 수석 고문은 단순히 민주당 측이 그렇게 見せかけよ려고하고 있다고 의미에서 쓴 뿐이라고 설명했다.

司法取引 사법 거래

フリン被告はロバート・ムラー特別検察官との司法取引で、ロシアのセルゲイ・キスリャク大使と政権移行期間に接触し、オバマ政権の制裁やイスラエル入植地に関する国連安保理決議案などについて複数の要請をしていたことを認めた。さらに、大使との接触について今年1月の時点でFBIに虚偽供述をしたと認めた。
플린 씨는 로버트 물라 특별 검사와 사법 거래에서 러시아의 세르게이 키 슬리 야크 대사와 정권 과도기에 접촉 오바마 행정부의 제재와 이스라엘 정착촌에 대한 유엔 안보리 결의안 등에 대한 여러 요청을하고 것을 인정했다. 또한 대사와의 접촉에 대해 올해 1 월의 시점에서 FBI에 허위 진술을했다고 인정했다.

司法取引の内容を説明する起訴状には、フリン被告が政権移行チームの「上級首脳」からロシア大使との接触を指示されていたと書かれている。複数の米メディアは、この首脳とは、トランプ氏の娘婿で大統領顧問のジャレッド・クシュナー氏だろうと伝えている。
사법 거래의 내용을 설명하는 기소장에는 플린 씨가 정권 인수팀의 "고급 정상"러시아 대사와의 접촉을 지시했다고 적혀있다. 여러 미국 언론이 정상은 트럼프의 사위로 대통령 자문 제라드 쿠슈나 씨 것이라고 전하고있다.

米国では、民間人が政府の許可・関与なしに外国政府と外交交渉を行うのは違法。問題となっているロシア大使との接触は、トランプ政権発足前の昨年12月のこと。
미국에서는 민간인이 정부의 허가 · 관여없이 외국 정부와 외교 교섭을하는 것은 불법. 문제가되고있는 러시아 대사와의 접촉은 트럼프 정부 출범 전인 지난해 12 월.

FBIに対する虚偽供述の量刑は通常、最長5年の禁固刑だが、司法取引の結果、フリン被告への求刑は6カ月となっている。
FBI 대한 허위 진술의 양형은 일반적으로 최대 5 년의 징역형이지만, 사법 거래의 결과 플린 피고에 대한 구형은 6 개월이다.

米情報機関は今年1月に、ロシア政府がウラジーミル・プーチン大統領を筆頭に、トランプ氏を大統領選で勝たせようとしたと結論づける報告をまとめた。ロシア政府はこれを否定。トランプ氏は、自分の選挙対策チームとロシアとの結託はなかったと一貫して主張している。
미 정보 기관은 올해 1 월에 러시아 정부가 블라디미르 푸틴 대통령을 필두로, 트럼프를 대선에서 이겨 시키려했다고 결론보고를 정리했다. 러시아 정부는이를 부정. 트럼프는 자신의 선거 대책 팀과 러시아와의 결탁은 없었다고 일관되게 주장하고있다.

大統領選にまつわるロシア疑惑を調べているムラー特別検察官の捜査陣は10月末、選挙戦中のトランプ陣営の外交顧問をFBIへの偽証罪で起訴したほか、トランプ選対元本部長を大統領選関連ではない資金洗浄罪で起訴した。ただし、短期間ながらトランプ政権幹部を務めた人物が有罪を認めるのは、フリン前補佐官が初めて。
대선에 얽힌 러시아 의혹을 조사하고있다 물라 특별 검사의 수사 팀은 10 월말 선거 전중 카드 진영의 외교 고문을 FBI에 위증죄로 기소했으며, 트럼프 선대 원금 부장을 대선 관련없는 자금 세척 혐의로 기소했다. 그러나 단기간 동안 트럼프 정권 간부를 지낸 인물이 유죄를 인정하는 것은 플린 전 보좌관이 처음이다.

（英語記事　Trump-Russia: Flynn's dealings were 'lawful'）

「原発にミサイル発射」イエメン反政府組織　ＵＡＥ否定

「原発にミサイル発射」イエメン反政府組織　ＵＡＥ否定
"원전에 미사일 발사"예멘 반정부 조직 UAE 부정

12/3(日) 21:24配信朝日新聞デジタル
　中東イエメンの反政府武装組織フーシは３日、アラブ首長国連邦（ＵＡＥ）西部で建設中のバラカ原子力発電所に向け、ミサイルを発射したと発表した。ＡＰ通信などが報じた。一方、ＵＡＥの国営通信は「フーシが我が国にミサイルを発射したとの主張は偽りだ」とする同国危機管理当局の声明を伝えた。
12/3 (일) 21:24 전달 아사히 신문 디지털
중동 예멘 반정부 무장 조직 후티은 3 일 아랍 에미리트 연합 (UAE) 서부에 건설중인 바라카 원자력 발전소를 향해 미사일을 발사했다고 발표했다. AP 통신 등이 보도했다. 한편 UAE의 국영 통신은 "후티가 일본에 미사일을 발사했다고 주장은 거짓"이라고하는 나라 위기 관리 당국의 성명을 전했다.

　バラカ原子力発電所はアブダビ首長国のサウジアラビア国境近くにあり、韓国企業が建設を請け負った。原子炉４基を備え、一部は来年中にも営業運転を始める予定。
바라카 원자력 발전소는 아부 다비 에미리트 사우디 아라비아 국경 근처에 한국 기업이 건설을 하청 받았다. 원자로 4기를 갖춘 일부는 내년에도 영업 운전을 시작할 예정.

　フーシは２０１４年９月以降、イエメンの首都サヌアを含む同国北部を掌握。ＵＡＥはサウジアラビアなどとともに１５年３月、イランの支援を受けるフーシを排除するとして、イエメンへの軍事介入を開始した。
후티는 2014 년 9 월 이후, 예멘의 수도 사나를 포함 동국 북부를 장악. UAE는 사우디 아라비아 등과 함께 15 년 3 월이란의 지원을받는 후티을 제거하기로 예멘에 군사 개입을 시작했다.

　だが、フーシは反撃を強めている。今年１１月には、サウジの首都リヤドの国際空港に向けて弾道ミサイルを発射。サウジ軍は、ミサイルを迎撃したと発表した。フーシはさらに「次はドバイを標的にする」などとして、軍事介入する連合軍への威嚇を強めていた。（ドバイ＝渡辺淳基）
　하지만 후티는 반격을 강화하고있다. 올해 11 월에는 사우디의 수도 리야드 국제 공항을 향해 탄도 미사일을 발사. 사우디 군은 미사일을 요격했다고 발표했다. 후티는 또한 "다음은 두바이를 표적으로하는"등으로 군사 개입 연합군에 위협을 강화했다. (두바이 = 와타나베 淳基)
　

NHK수신료

受信料を払わなければ、見れないようにすればいいだけの話。
有料チャンネルは普通にしていること。
それをしないのはNHKの怠慢。
수신료를 내야, 보지 못하게하면 좋은 것뿐의 이야기.
유료 채널은 보통으로하고 있음.
그것을하지 않는 것은 NHK의 태만.

義務じゃなくて強制。見なくていいと感じている人がいる時点で公共性ではない。水道も電気もいらなきゃ契約しなくてよい。バスもそう。テレビ、で一括ではなくて、その中のＮＨＫだけなんやから、分離は可能。そんな多様性を認めないのは、何らかの政府のやましい意図があるに違いないと感じてしまう。
의무 아니라 강제. 보지 않아도 좋다고 느끼는 사람이있는 시점에서 공공성이 아니다. 수도도 전기도 필요 않으면 계약하지 않아도된다. 버스도 그렇고. TV,에서 일괄가 아니라 그 안에 NHK 뿐이 거니까 분리 가능. 그런 다양성을 인정하지 않는 것은 어떤 정부의 꺼림칙한 의도가있는 것이 틀림 없다고 느끼게된다.

確かに放送法の規定はそうなっていますね。自宅としているマンションの他に、仕事の都合でウィークリーマンションに住まわせられたらNHKの集金人がやって来て、無理やり契約させられ2世帯分の受信料払わされたから、その時よく勉強しましたよ。
それ以来、
「日本でテレビを持つことは、ナチスドイツの国民ラジオみたいなもの」
と考えるようにしてますが、スマホの時代にどう対応するのかは気になるところですね。
テレビがあればこれまでの判例を覆すことはないでしょうが、NHKの在り方についてどんな見解が示されるか興味深いところです。
朝日新聞デジタルだって、より詳細は有料だけど大方のニュースは無料で読めるのにね。ほぼ税金みたいな受信料に胡坐をかいているNHKは、この料金の点についてだけは、朝日新聞を見習った方が良いよ。

国民から料金を直接徴収しておきながら、ドキュメンタリーで少しは意地を見せてはいるものの、ニュースなどは現政権に忖度しまくりで、国民の方を見ていない、情けない内容ばかり。
払う価値なんかあるもんか。
국민으로부터 직접 대금을 징수 해 두면서, 다큐멘터리 조금은 고집을 보이고는 있지만, 뉴스 등은 현 정권에 손탁 마구로 국민의 분을 보지 못했다 한심한 내용뿐.
지불 가치 따위있는 것일까.

税金より酷いよ。税金は、なんだかんだでサービスを享受してるけど、NHKは、見ないから全額寄付になってる。
세금 더 심한거야. 세금은 이래저래 서비스를 누리고 있지만, NHK는보고 않기 때문에 전액 기부되어있다.

NHKにのみ特権を認めている現状は異様。スクランブルを掛けずに電波垂れ流しにするのは明らかに電波の押し売りであって受信しない権利を認めるべき。またNHKは職員給与が高いし技術開発にも資金を惜しげもなく投じるなど経費節減の努力をしているように思えないし肥大化しすぎている。「公共放送」の役目を果たすのなら地上波1つ、ラジオ1つぐらいで充分に足りるだろうから不必要な分は事業分離して本体は大幅に事業を縮小するべき。
NHK에만 특권을 인정하고있는 현상은 괴상. 스크램블을 걸지 않고 전파 방류하는 것은 분명히 전파 강매로서 수신하지 않을 권리를 인정해야. 또한 NHK는 직원 급여가 높고 기술 개발에 자금을 아낌없이 투입 등 경비 절감 노력을하고있는 듯없고 부풀어 너무있다. '공영 방송'의 역할을하는 것이라면 지상파 1 개, 라디오 하나 정도로 충분히 충분할테니까 불필요한 분은 사업 분리하고 본체는 크게 사업을 축소해야한다.

政府が白と言った物を、白以外は言えないと、政府側に忖度するのを当然と言う、公共の中立性と言う放送法の根幹に関わる所を、自ら反故にしてるのに、視聴者には放送法を守れという矛盾・・・

本当、スクランブル制にすれば良いのにねぇ。
ただ見が居なくなれば、受信料払ってるの事に対しても納得感はだいぶと増しになるだろうに。
정부가 흰색이라고 말했다 물건을 흰색 이외는 말할 수없는 정부 측에 손탁하는 것을 당연하다고 말한다 공공 중립성이란 방송법의 근간과 관련된 곳을 스스로 휴지 조각하고 있는데, 시청 사람은 방송법을 지키라는 모순 ...

진짜 스크램블 제로하면되는데 네요.
그냥보고가 없게되면 수신료 지불하고있는 것에 대해서도 납득 느낌은 많이하게 증가 될 텐데.

ＮＨＫ受信料は義務か　最高裁判決、「いつ起点」も焦点

12/3(日) 7:45配信

家にテレビがあったらＮＨＫの受信料を支払わなければならないか。ＮＨＫと契約を結ばず受信料を支払わない男性に、ＮＨＫが支払いを求めた訴訟で、最高裁大法廷が６日、判決を出す。男性は憲法が保障する「契約の自由」を理由に支払いを拒んでおり、受信料の支払いをめぐって憲法判断が示されるのは初めて。
집에 텔레비전이 있으면 NHK의 수신료를 지불해야 하는가? NHK와 계약을 체결하고 수신료를 지불하지 않는 남성에 NHK가 지불을 요구 한 소송에서 대법원 대법정이 6 일 판결을 내린다. 남자는 헌법이 보장하는 '계약의 자유'를 이유로 지급을 거절하고 있으며, 수신료 지불 둘러싸고 헌법 판단이 나타나는 것은 처음이다.

　最高裁が判決を出すのは、２００６年３月に自宅にテレビを設置し、１１年９月にＮＨＫから契約を申し込まれた後も受信契約を結ばず、受信料を支払っていない男性のケース。男性は同年１１月にＮＨＫに提訴された。
대법원이 판결을내는 것은 2006 년 3 월에 집에 TV를 설치하고 11 년 9 월에 NHK에서 계약을 신청 한 후 수신 계약을 체결하고, 수신료를 지불하지 않은 남성의 경우 . 남성은 같은 해 11 월에 NHK에 제소되었다.

　放送法は「受信設備を設置したらＮＨＫと契約しなければならない」と定めているが、受信料の支払い義務は明文化されていない。受信料は総務省の認可を得た規約で定められている。
방송법은 "수신 설비를 설치하면 NHK와 계약해야한다"고 규정하고 있지만, 수신료 지불 의무가 명문화되어 있지 않다. 수신료는 총무성의인가를 얻은 약관에 정해져있다.

　ＮＨＫは不祥事などで受信料の支払率が下落したことを受け、０６年から支払いの督促などの法的手段を取り始めた。支払率は上昇したが、契約しながら未払いの世帯は１６年度も２割を超える。ワンセグ放送なども含めると未契約の世帯や事業所は全国で約１千万に上るという。過去に受信料を巡って裁判になったケースは４千件以上ある。
NHK는 비리 등으로 수신료를 지불 율이 하락함에 따라 2006 년부터 지불 독촉 등의 법적 조처를 강구하기 시작했다. 지불금은 상승했지만, 계약하면서 무보수 가구는 16 년에도 20 %를 넘는다. DMB 방송 등도 포함하면 미계약 세대 나 사업소는 전국에서 약 1 천만에 달한다고한다. 과거에 수신료를 둘러싼 재판이 된 사례는 4000 건 이상이다.

　判決は１５人の裁判官全員が参加する大法廷で審理されている。金田勝年法相（当時）は今年４月、放送法の規定は合憲とする意見書を最高裁に出した。判決が社会に大きな影響を与えると判断した場合にとれる措置で、戦後２例目だった。
판결은 15 명의 재판관 전원이 참여하는 대법정에서 심리되어있다. 카네다 勝年 법무 장관 (당시)은 올해 4 월 방송법 규정은 합헌으로하는 의견서를 대법원에 냈다. 판결이 사회에 큰 영향을 미칠 것으로 판단되는 경우 취할 조치에 전후 2 례목이었다.

　法曹関係者の間では、最高裁も一、二審判決同様、ＮＨＫの公共性などを理由に、支払いは義務で、放送法の規定は「合憲」と判断するとの見方が強い。
법조 관계자들 사이에서는 대법원도 한두 심 판결뿐만 아니라 NHK의 공공성 등을 이유로 지불 의무 방송법 규정은 '합헌'이라고 판단하는 견해가 강하다.

　一方、どの時期から支払うべきかについても、最高裁が判断を示すことになる。この訴訟では、ＮＨＫ側は、ＮＨＫが申し込んだ時点で契約が自動的に成立すると主張。テレビ設置時にさかのぼって受信料を支払うべきだと主張している。男性は、支払うとしても、大法廷判決で敗れ、ＮＨＫと契約した以降の料金だけだと訴えている。
한편, 어느시기부터 지불해야하는지에 대해서도 대법원이 판단을 나타내게된다. 이 소송에서는 NHK 측은 NHK가 신청 한 시점에 계약이 자동으로 성립한다고 주장하고있다. 텔레비전 설치시에 소급하여 수신료를 지불해야한다고 주장하고있다. 남성은 지불해도 대법정 판결에서 패해 NHK와 계약 한 이후 요금 뿐이라고 호소하고있다.

　一、二審判決は、ＮＨＫとの受信契約を定めた放送法の規定は、契約を義務づけていると判断。ＮＨＫが契約していない人に裁判を起こして勝訴が確定した時点で契約が成立し、テレビ設置時にさかのぼって受信料を払わなくてはならないとしている。最高裁は、「豊かで良い放送」でなければ受信料制度の基盤が失われると指摘した一審判決と同様、公共放送のあり方に言及する可能性もある。（岡本玄）
한두 심 판결은 NHK와 수신 계약을 정한 방송법의 규정은 계약을 의무화하고 있다고 판단. NHK가 계약하지 않은 사람에게 재판을 일으켜 승소가 확정 된 시점에 계약이 성립, TV 설치시에 소급하여 수신료를 지불하지 않으면 안된다고하고있다. 대법원은 "풍부하고 좋은 방송 '아니면 수신료 제도의 기반이 없어진다고 지적했다 일심 판결뿐만 아니라 공영 방송의 본연의 자세에 대해 언급 할 가능성도있다. (오카모토 현)

2017년 12월 2일 토요일

조건문 한줄로 하기..

x = (v > 30) ? 100 : 0;

[오라클] 테이블 인덱스, 컬럼, 커멘트 정보 얻는 쿼리

-- 오브젝트 조회

SELECT *

FROM ALL_OBJECTS

WHERE OBJECT_NAME LIKE '명'

-- 테이블 조회

SELECT *

FROM ALL_TABLES

WHERE TABLE_NAME LIKE '명'

-- 시노님 조회

SELECT *

FROM ALL_SYNONYMS

WHERE SYNONYM_NAME = '명'

-- 테이블의 인덱스 정보

SELECT *

FROM ALL_IND_COLUMNS

WHERE TABLE_NAME = '테이블명'

-- 테이블의 컬럼 정보

SELECT *

FROM ALL_TAB_COLUMNS

WHERE TABLE_NAME = '테이블명'

-- TABEL COMMENT 쿼리

SELECT *

FROM ALL_TAB_COMMENTS

WHERE TABLE_NAME = '테이블명'

-- COLUMN COMMENT 쿼리

SELECT *

FROM ALL_COL_COMMENTS

WHERE TABLE_NAME = '테이블명'

제이쿼리

// ********** 제이쿼리 다운로드

http://jquery.com에 접속한 후 메인 페이지에서
[Download jQuery] 버튼을 클릭하여 최신 버전의 파일을 다운로드합니다.
이렇게 다운로드한 라이브러리는 네트워크를 사용할 수 없는 상황에서도 jQuery를 테스트할 수 있습니다.

"사용자가 다운받은 파일의 경로"
"네크워크 상의 jQuery 라이브러리의 경로"
jQuery에서 제공하는 CDN : http://code.jquery.com/jquery-1.8.3.min.js
jQuery에서 제공하는 최신 jQuery CDN : http://code.jquery.com/jquery.min.js
MS에서 제공하는 CDN : http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.3.min.js
Google에서 제공하는 CDN : https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

사용방법 : 기존 jQuery 로드 부분을 제거하고 <script type="text/javascript" src="위 3개 중 하나"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>

참고로 CDN이란 "contents delivery network"로서 제공하는 콘텐츠를
이 서버에 미리 옮겨놓고 필요할 경우 그 콘텐츠를
사용자에게 전달해 주는 것을 의미합니다.

// ********** 제이쿼리 사이트

http://jquery.com/ : 자바스크립트 라이브러리, 출간도서 소개 및 프로그램, 플러그인 다운로드 등 안내
http://www.jquerykorea.pe.kr/ : jQuery, Core, CSS, Events, 조작함수 등 정보 수록
http://www.jquery.kr/ : jQuery 강좌
http://apycom.com/ : jQuery 드롭다운 메뉴를 만들어주는 사이트
http://tympanus.net/codrops/category/tutorials/ : 현 시점에서 가장 많이 참고하고 있는 사이트로 템플릿을 제공

// ********** 구문 문법 정리

1) 명칭 정의
태그(tag) : HTML 구성
요소(element) : HTML 구성 태그와 id와 클래스
노드(node) : HTML 구성 구조로서 태그, 요소와 같은 의미
DOM : Document Object Model로서 HTML 요소 간의 긴밀한 노드 트리를 의미

2) $()의 의미
jQuery() = $()

3) $(function(){ code })의 의미
jQuery(document).ready(function(){ code });
jQuery(function(){ code });
$(function(){ code });

4) 기본 선택자
태그 선택자 / 클래스 선택자 / id 선택자 / 그룹 선택자 / 전체 선택자

5) 계층 선택자
descendant 선택자 / child 선택자 / sibling 선택자 / siblings 선택자

6) 속성 선택자
attribute 선택자

7) 기본 필터 선택자
eq 선택자 / gt 선택자 / lt 선택자 / first last 선택자 / even odd 선택자 / not 선택자

8) 내용 필터 선택자
contains 선택자 / has 선택자 / empty 선택자

9) 보임 필터 선택자
hidden 선택자 / visible 선택자

10) 자식 요소 필터 선택자
first-child 선택자 / last-child 선택자 / nth-child 선택자

11) 탐색
children() / find() / prev() / next() / siblings() / parent()

12) 필터링
first() / last() / eq() / filter() / not() / has()

13) DOM 변경
append() / prepand() / html() / text() / remove() / empty()

[jQuery] jQuery를 시작하자

(1) jQuery 란?

jQuery(제이쿼리)는 브라우저 호환성이 있는
HTML 속 자바스크립트 라이브러리이며 클라이언트 사이드 스크립트 언어를
단순화 할 수 있도록 설계되었다. 존 레식이 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 공식적으로 소개하였다.
jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.

jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서v2의
듀얼 라이선스를 가진 자유 오픈 소프트웨어이다.
jQuery의 문법은 코드 보기, 문서 객체 모델 찾기, 애니메이션 만들기,
이벤트 제어, Ajax 개발을 쉽게 할 수 있도록 디자인되었다.
또한, jQuery는 개발자가 플러그인을 개발할 수 있는 기능을 제공한다.

출처 : wiki 백과

(2) jQuery 장점

- 크로스브라우징의 대안
- 코드의 간결화
- CSS 문법 지원
- 강력하고 활용도 높은 selector
- 유용한 플러그인 jQuery-ui, jQuery-mobile
- json Object를 이용한 페이지의 가벼움

(3) jQuery 시작

<script src="scripts/jquery-1.6.2.min.js"></script>

JQuery 명령어를 사용할 수 있는 라이브러리를 추가해준다.
참고 : jQuery API , jQueryKorea

(4) Body Onload

<script>
$(document).ready(function(){
// JQuery 적용
});
</script>

$(document).ready(function(){}); 는 해당 페이지의 인코딩이 완료되었을 때, 실행된다.

(5) 클릭 리스너 등록

$('#move_up').click(function(){
// 실행 함수
});

id 가 'move_up' 인 html 태그를 클릭시 작동하는 함수를 작성한다.
같은 리스너가 중복으로 등록되면, 클릭시 등록된 수만큼 함수가 실행되므로 주의.

(6) jQuery 기본 문법
jQuery(), $() : 괄호안의 대상을 JQuery로 묶어준다.
선택자 : HTML 요소, CSS요소, ID요소로 JQuery를 적용할 요소를 선택할 수 있다.

(1) HTML 요소 선택 : 같은 HTML요소에 대해 공통적인 사항을 적용할 때 선택
$('img') : <img> 태그 전체 선택
$('table') : <table> 태그 전체 선택

(2) CSS 요소 선택 : 같은 CSS 요소에 대해 공통적인 사항을 적용할 때 선택
$('.my_class') : class="my_class: 인 HTML 요소 선택
ex> <input type="button" class="my_class" value="선택" />

(3) ID요소 선택 : 선택한 ID 요소를 선택할 경우 사용. (ID는 고유의 값으로 하나만 선택)
$('#userId') : id가 userId인 요소 선택.(고유값)
ex> <input type="button" id="userId" value="선택" />

(4) 연쇄 요소 선택 : 선택자를 연속적으로 사용하여, 원하는 요소를 선택할 수 있다.
$('table .my_class') : <table> 요소 아래에 있는 요소중 class=my_class 요소를 선택한다.
$('div [name="myName"]') : <div> 요소중 name="myName"인 요소를 선택한다.

jQuery의 장점은 유연함에 있다. 위의 선택자를 잘 활용하면,
원하는 요소를 쉽게 선택할 수 있다. 소스가 복잡해질 수록
각 요소들의 CSS, ID, name 값을 잘 사용해야 한다.

여러명이 함께 하는 프로젝트라면 더욱더 약속된 명명 규칙을 잘 활용하자.
특히 ID 는 고유값으로만 사용할 수 있다는 것에 주의해야 한다.

[jQuery] jQuery API (1/7) - 제어 (선택, 삽입, 삭제, 변경, 변환, 확장)
1. 제어
- 선택
.add() : 요소를 추가 선택한다.
/ $("p").add("div") // p 요소와 div 요소를 선택한다.

.not() : 선택된 확장집합에서 인자에 해당하는 요소를 제거한다.
/ $("p").not(".green") // p 요소의 확장집합에서 class가 green인 요소를 제거한다.

.children() : 요소의 고유한 자식으로 구성된 확장 집합을 반환한다.

.contents() : 선택한 요소의 자식 요소를 가져온다.(text node 포함)
$('.container').contents().filter(function(){});
// class container 요소의 자식요소(text 포함)를 가져와 filter 한다. iframe text를 가져올때 사용

.first() : 요소의 첫번째 노드 반환

.last() : 요소의 마지막 노드 반환

.next() : 요소 집합내의 바로 다음에 나오는 형제로 구성된 요소 반환

.nextAll() : 요소 집합내의 다음에 나오는 모든 형제로 구성된 확장집합 반환

.nextUntil() : 선택 요소부터 인자가 나올때까지 집합을 선택한다.
/ $("#term").nextUntil("dt").css('background-color', 'red');
// id term 요소부터 dt가 나올때까지 형제요소를 검색하고 배경을 red로 변경
/ $("#term").nextUntil($("#term2"), "dd").css('background-color', 'red');
// id term 요소부터 id term2 요소까지 중 dd 요소만 배경을 red로 변경

.parent() : 요소 집합의 바로 위 부모로 구성된 확장 집합 반환

.parents() : 요소 집합의 모든 조상 확장 집합을 반환. 부모와 상위 모든 조상이 포함되지만 문서루트는 미포함

.parentsUnitl() : 선택 요소부터 인자가 나올때까지 부모 집합을 선택한다.
/ $("#term").parentsUntil("dt").css('background-color', 'red');
// id term 요소부터 dt가 나올때까지 부모요소를 검색하고 배경을 red로 변경
/ $("#term").parentsUntil($("#term2"), "dd").css('background-color', 'red');
// id term 요소부터 id term2 부모요소까지 중 dd 요소만 배경을 red로 변경

.prev() : 요소 집합의 바로 이전에 나오는 형제로 구성된 확장 집합을 반환

.prevAll() : 요소 집합의 이전에 나오는 모든 형제로 구성된 확장 집합을 반환

.siblings() : 요소의 모든 형제를 포함하는 확장 집합을 반환.

.eq() : 선택 요소의 index번째 요소를 선택한다.

/ $("div").eq(2).css('background-color', 'red'); // div의 3번째 요소의 배경을 변경

.index() : 선택 요소에서 인자의 index 번호를 반환

/ $("div").index($("div:contains('Third')"));
// div 안에서 div에 'Third'라는 단어를 포함하고 있는 div index 값

$.inArray() <jQuery.inArray()> : 대상 배열 내의 값을찾아서 인덱스를 반환한다. ; 첫번째 배열은 0, 요소가 없으면 -1
/ $.inArray("John", arr); // arr 배열에서 "John"의 인덱스를 찾아서 반환

.find() : 선택된 요소의 자식노드에서 인자의 요소를 찾는다.
/ $("#div").find(ul); // id div의 자식노드에서 ul 요소를 찾는다.

.filter() : 선택된 요소를 포함한 노드에서 인자의 요소를 찾는다.
/ $("#div").filter(ul); // id div 노드 자신을 포함한 요소에서 ul 요소를 찾는다.

.end() : jQuery 함수를 연쇄적으로(chain)으로 사용할 경우 앞쪽에 이미 선택되었던 요소로 돌아간다.

$('ul:first').find('.foo).css('background-color' , 'red') // ul의 첫번째 요소에서 class=foo를 찾아 배경 변경
.end().find('bar').css('background-color', 'green'); // find를 호출하기 전의 요소($('ul:first))에서 class=bar를 찾아 배경 변경

.each() : 다중 요소를 순서대로 선택한다.
/ $("div").each(function(i,element){
// div 요소를 순서대로 선택한다. i: 순서 시작은 0 , element : 선택된 요소
});

.has() : 인자를 가지고 있는 확장집합을 선택
/ $("li").has("ul"); // li 요소중 ul을 가지고 있는 요소만 선택

.slice() : 선택한 요소 집합을 인자의 범위로 잘라낸다.
/ $("img").slice(2).css(...);
// img 요소의 세번째 요소부터 끝 요소까지 css 적용
/ $("img").slice(2, 4).css(...);
// img 요소의 세번째 요소부터 5번째 요소를 만날때까지(4번째) css적용
/ $("img").slice(-2, -1).css(...);
// img 요소의 끝에서 두번째 요소부터 끝에서 첫번째 요소를 만날때까지 css적용

.clone() : 선택된 요소를 복사한다. / $("#img").clone(); // id img DOM을 복사한다.

.closest() : 현재 위치한 요소에서 DOM 트리를 탐색하여 일치된 요소를 선택한다.

$("#name").closest("ul"); // id name 요소에서 가장 가까운 ul을 선택한다.
$("#name").closest("ul", "#code"); // id code 요소 아래의 id name 요소에서 가장 가까운 ul을 선택한다.

.andSelf() : 선택된 구조 요소를 이어붙인다.

/ $('div').find('p').andSelf().css(..);
// div와 내부의 p요소를 선택해서 결합 후 css 적용

.offsetParent() : 위치(css:position) 요소를 기반으로 한 부모 요소를 찾는다.
/ $('li.item-a').offsetParent().css(..); // li의 item-a 클래스의 css position상 가장 가까운 부모요소에 css를 적용

$.grep() <jQuery.grep()> : 배열 요소를 조건에 따라 필터링하여 제거 한다. 특정 로직에 의해 true가 되는 결과만 반환

/ $.grep([0,1,2], function(n,i){ return n>0;});
// 배열 [0,1,2] 에서 0보다 큰값을 반환 [1,2]
/ $.grep([0,1,2], function(n,i){ return n>0;}, true);
// 배열 [0,1,2] 에서 0보다 크지 않은 값을 반환 [0]

$.proxy() <jQuery.proxy()> : jQuery의 네임스페이스를 관리할 수 있게 한다. "this" 키워드를 통하여 다른 개체를 유지할 수 있게 한다.

var app={
config : { clickMessage : Hi!" },
// config 메서드에 clickMessage를 정의

clickHandler : function(){ // clicHandler 메서드 함수 정의
alert( this.config.clickMessage);
// this:app 의 config 메시지의 clickMessage를 알람
}
}

$('a).bind('click', app.clickHandler);
// 실행되지 않는다. jQuery 이벤트 모델에 의해 this가 app 이 아니다.

$('a').bind('click', .proxy(app, 'clickHandler'));
// this 키워드를 유지한채 실행된다.

- 삽입

.after() : 지정한 요소 뒤에 새로운 요소를 삽입 / A.after( B) / A뒤에 B를 추가
.insertAfter() : 지정한 요소 뒤에 새로운 요소를 삽입
/ A.insertAfter(B) / B뒤에 A를 추가

.append() : 지정한 요소 뒤에 내용 삽입
/ $("div").append("<p>내용</p>"); // div 뒤에 <p>내용</p> 를 삽입한다.

.appenTo() : 지정한 내용을 요소 뒤에 삽입
/ $("<p>내용</p>").appendTo($("div")); // <p>내용</p>를 div 뒤에 삽입한다.

.before() : 지정한 요소의 앞에 요소를 삽입 / A.before(B) / A 앞에 B를 추가

.insertBefore() : 지정한 요소의 앞에 요소를 삽입
/ A.insertBefore(B) / B 앞에 A를 추가

.prepend() : 지정한 요소 앞에 내용 삽입
/ $("div").prepend("<p>내용</p>"); // div 앞에 <p>내용</p> 를 삽입한다.

.prependTo() : 지정한 내용을 요소 앞에 삽입
/ $("<p>내용</p>").prependTo($("div"));
// <p>내용</p>를 div 앞에 삽입한다.

.pushStack() : jQuery 스택에 DOM 요소를 추가한다.
/ $("#ids").pushStack($("div"));
// id ids 요소에 jQuery 스택에 div 요소를 추가한다.

.wrap() : $() 형식으로 쓰는 함수의 선택한 요소 각각을 문자열 또는 객체로 감싼다.
./ $(".inner").wrap('<div class="new" />');
// class=inner 집합 요소 각각을 <div class ="new"></div>
./ $(".inner").wrap(function(){

return '<div class="new" />');

// class=inner 집합 요소 각각을 <div class ="new"></div>
});

.unwrap() : 선택한 요소 집합의 부모를 제거한다.
./ $(".inner").wrap(); // class=inner 집합 요소의 부모를 제거한다.

.wrapAll() : $() 형식으로 쓰는 함수의 선택한 요소 전체를 문자열 또는 객체로 감싼다.
./ $(".inner").wrapAll('<div class="new" />');
// class=inner 집합 요소 전체를 <div class ="new"></div>

.wrapInner() : $() 형식으로 쓰는 함수의 선택한 요소 각각의 내부를 문자열 또는 객체로 감싼다.
./ $(".inner").wrapInner('<div class="new" />');
// class=inner 집합 요소 각각의 내부를 <div class ="new"></div> 로 감싼다

- 삭제
.detach() : 지정한 요소를 포함 하위 요소 모두 제거
/ $("div").detach(); // div를 포함 하위 요소 모두 제거

.empty() : 지정한 요소의 하위 요소를 제거
/ $("div").empty(); // div 하위 요소 모두 제거

.remove() : 지정한 요소를 포함 하위 요소 모두 제거, 요소와 관련된 이벤트와 데이터 모두 제거
/ $("div").remove(); // div 포함 하위 요소, 이벤트, 데이터 모두 제거

- 변경, 변환
.text() : 해당 요소에 text 요소를 삽입 또는 변경한다.

.html() : 해당 요소에 html 요소를 삽입 또는 변경한다.

.val() : 해당 요소의 value 값을 삽입 또는 변경한다.

.replaceAll() : 해당 요소들로 인자 요소를 대체한다.
/ $('<h2>New heading</h2>').empty($("div"));
// div 요소를 <h2>New heading</h2> 요소로 변경한다.

.replaceWith() : 해당 요소들을 인자의 요소로 바꾼다. ; replaceAll() 과 선택,인자(target)이 반대
/ $("div").empty('<h2>New heading</h2>');
// <h2>New heading</h2> 요소로 div 요소를 변경 시킨다.

.toArray() : 선택한 요소 DOM 집합을 자바스크립트 배열로 만든다.
/ var arr = $("div").toArray(); // arr[0] === <div>Hello</div>

$.makeArray <jQuery.makeArray()> : jQuery 집합의 요소 값을 JavaScript 배열로 변환한다.
/ var arr = $.makeArray($("input")); // arr[0] === "Hello"

$.map() <jQuery.map()>
.map() : 선택된 배열 요소를 순서대로 callback 함수를 통해 얻어진 리턴값을 포함하는 새로운 jQuery 오브젝트 생성

/ var arr = $("div").map(function(){
return $(this).text().toUpperCase(); // 선택된 요소들의 text값을 대문자로 변경한다.
});

/ var arr = $("div").map({width : 10, height: 15} ,function(value, index){
return index; // key를 반환한다. ["width", "height"]
});

$.globalEval() <jQuery.globalEval()> : 문자열로 명령어를 실행시켜준다.

/ $.globalEval("var newVar = true;") // newVar == true

$.merge() <jQuery.merge()> : 두개의 배열을 첫번째 배열에 합칩니다.

/ $.merge([0,1,2],[2,3,4]); // 첫번째 배열 결과 : [0,1,2,2,3,4]
/ $.merge($.merge([],[0,1,2]),[2,3,4]);
// 첫번째 배열의 값을 유지하기 위해 새로운 배열을 만든다.

$.trim() <jQuery.trim()> : 문자열 앞뒤에 있는 공백 문자를 제거하고 결과 반환
/ var trimStr = $.trim(str); // str === " abc def ff "; trimStr === "abc def ff";

$.unique() <jQuery.unique()> : element 배열의 중복된 모든 element를 제거한다. ; string, number 배열에서는 동작 X
/ var divs = $.unique(divs); // divs의 중복 선택되어 들어간 element를 제거한다.

$.parseJSON() <jQuery.parseJSON()> : JSON문자열을 JavaScript object로 반환한다.
/ var obj = $.parseJSON('{"name":"John"}');
// 문자열 {"name":"John"}을 JavaScript object로 변환한다.
/ alert(obj.name==="John"); // JavaScriptObject인 obj에서 name 요소인 John

- 참고 : 형식이 어긋난 JSON 문자열을 인자로 사용하면 exception이 발생한다.
문자열의 key 와 value 는 쌍따옴표("")를 사용해야 한다.

$.parseXML() <jQuery.parseXML()> : 유효한 XML문서를 파상한다.

$title = $.parseXML(xml).find("title"); // xml 파일에서 title의 값을 찾는다.

- 확장

$.noop() <jQuery.noop()> : 비어있는 함수 (function(){})
$.noConflict() <jQuery.Conflict()> : 다른 JavaScript 라이브러리와 함께 사용할때 $의 충돌을 막기위해 사용

$.sub() <jQuery.sub()> : 새로운 jQuery 함수를 정의할때, 네임스페이스의 충돌로 다른 개발자의 함수에 영향을 주지 않도록 캡슐화된 플러그인을 만들고자 할때 $.sub() 로 복사하여 사용

(function(){
var sub$ = jQuery.sub();
sub$.fn.myCustomMethod = function(){
return 'just for me';
};

sub$(document).ready(function() {
sub$('body').myCustomMethod() // 'just for me'
});
})();

typeof jQuery('body').myCustomMethod // undefined

$.extend() <jQuery.extend()> : 첫번째 인자에서 두번째 인자를 병합하며, 확장한다.
(1) 두번째 인자값이 첫번째 인자값의 같은 옵션을 대체하며 확장
var object1 = { apple : 0, banana : {weight : 52, price : 100}, cherry : 97 };
var object2 = { banana : {price : 200}, durian : 100 };
$.extend(object1, object2);

결과 : object1 = { apple: 0, banana: { price: 200 }, cherry: 97, durian: 100 };

(2) 첫번째 인자값의 원본 값을 유지하며 병합
var object1 = { apple: 0, banana: {weight: 52, price: 100}, cherry: 97};
var object2 = { banana: {price: 200}, durian: 100};
$.extend(true, object1, object2

결과 : object1 == { apple: 0, banana: { weight: 52, price: 200 }, cherry: 97, durian: 100 }

(3) 요소에 적용할 명령어 확장
$.fn.extend({
myMethod : function(){...}
});

-> $("div").myMethod();

(4) 함수 실행 JQuery 명령어 확장
$.extend({
myMethod2 : function(){...}
});
-> $.myMethod();

[jQuery] jQuery API (2/7) - 속성(CSS), 추출

2. 속성(CSS), 추출
- 속성(CSS)

.addClass() : 지정한 요소에 class 값을 추가한다.
$("p").addClass("name"); // class = "name" 추가

.hasClass() : 지정한 요소에 class 유무를 확인한다.
if($("p").hasClass("name")==true) // class 가 "name"인지 확인 true/false

.removeClass() : 지정한 요소에 class 값을 제거한다.
$("p").removeClass("name"); // class = "name"을 제거

.toggleClass() : 지정한 요소에 class를 추가/제거
$("p").toggleClass("name"); // class = "name"이 있으면 제거 / 없으면 추가

.attr() : (1) 지정한 요소의 속성값을 입력 또는 변경한다.
$("a").attr("href", "http://www.googlec.co.kr"); // a 요소의 href 값을 변경한다.
$("#content").attr({id:'content01', class:'style1'}); // id content 요소의 id와 class 값을 변경한다.
(2) 지정한 요소의 속성값을 가져온다.
$("a").attr("href"); // a 요소의 href의 값을 가져온다.

.removeAttr() : 지정한 요소의 속성값을 제거한다.
$("a").removeAttr("href"); // a 요소의 "href" 속성값을 제거한다.

.prop() : .attr()과 동일하나, boolean 값을 사용하는 속성에 사용한다. checked, selected, disabled

.removeProp() : removeProp()과 동일하나, boolean 값을 사용하는 속성에 사용한다. checked, selected, disabled

.css() : (1) 지정한 요소의 css 값을 삽입 또는 변경한다..
$("div").css("color", 'red'); // div 요소의 글자색을 red로 설정한다.
$("div").css({color:'red', border:'1px solid blue'}); // 동시에 여러개의 값을 설정할 수 있다.
(2) 지정한 요소의 속성값을 가져온다.
$("div").css("backgroundColor"); // div 요소의 backgroud-Color 값을 가져온다.
참고 - css의 속성명과 jQuery에서 쓰는 속성명은 형식이 조금 다르다.
css : background-color , jQuery : backgroundColor
css : padding-left, jQuery : paddingLeft

.width() : 선택한 요소의 현재의 계산된 넓이를 얻거나 넓이 값을 설정한다.
$("div").width(); // div 의 현재 넓이 값 (숫자로 반환, .css('width')는 숫자뒤에 px가 붙어 반환 400px)
$("div").width(30); // div의 넓이를 30으로 설정한다. { 30, 30px, 30%, auto }

.innerWidth() : 선택한 요소의 padding을 포함한 넓이를 반환한다. (border 제외)
$("div").innerWidth(); // div 의 padding을 포함한 현재 넓이

.outerWidth() : 선택한 요소의 padding 과 border를 포함한 넓이를 반환한다. (인자값 true 면 margin 포함)
$("div").outerWidth(); // div 의 padding과 border 포함한 현재 넓이
$("div").outerWidth(true); // div 의 padding과 border, margin 포함한 현재 넓이

.height() : 선택한 요소의 현재의 계산된 높이를 얻거나 높이 값을 설정한다.
$("div").height(); // div 의 현재 높이 값 (숫자로 반환, .css('height')는 숫자뒤에 px가 붙어 반환 400px)
$("div").height(30); // div의 높이를 30으로 설정한다. { 30, 30px, 30%, auto }

.innerHeight() : 선택한 요소의 padding을 포함한 높이를 반환한다. (border 제외)
$("div").innerHeight(); // div 의 padding을 포함한 현재 높이

.outerHeight() : 선택한 요소의 padding과 border를 포함한 높이를 반환한다. (인자값 true면 margin 포함)
$("div").outerHeight(); // div 의 padding과 border를 포함한 현재 높이
$("div").outerHeight(true); // div 의 padding과 border, margin을 포함한 현재 높이

.data() : (1) 지정한 요소에 값을 삽입 또는 변경한다.
$("div").data("foo", '52'); // div 요소에 "foo" 라는 key로 52를 삽입한다.
$("div").data("bar", {color:'red', border:'1px solid blue'}); // "bar" 라는 key로 배열 삽입
$("div").data({baz : [1,2,3]}); // baz 배열 삽입
(2) 지정한 요소의 값을 가져온다.
$("div").data("foo"); // div 요소에 "foo"라는 key로 저장된 값을 가져온다.
$("div").data(); // div 요소에 전체 값을 가져온다. {foo:52, bar:{color....}, baz:[1,2,3,4]}

$.data() <jQuery.data()> : 첫번째 인자의 요소에 두번째 인자를 키로 세번째 값을 저장한다. .data()와 동일
$.data(document.body, "foo",'52'); // 페이지 body 요소에 foo를 키로 52 삽입

.removeData() : 지정한 요소에 데이터를 제거한다.
$("div").data("foo"); // div 요소에 "foo" 라는 key의 데이터를 제거한다.

$.removeData() <jQuery.removeData()> : 지정한 요소에 데이터를 제거한다.
$.data($("div"), "foo"); // div 요소에 "foo" 라는 key의 데이터를 제거한다.

$.hasData() <jQuery.hasData()> : $.data()에 의해 저장된 임의의 값들이 있는지 확인한다. true / false
if(.$.hasData(document.body)==true) // document.body에 data가 있으면 true

- 추출

$.browser <jQuery.browser> : JQuery가 실행되는 browser의 version, browser 종류를 Map 형식으로 리턴한다.
$.each($.browser,function(i, val){
result += i +":" + val; // 결과 msie:true version:7.0
}

참고 - $.browser.version : 브라우저의 버전을 문자열로 리턴
$.browser.safari : 사파리 브라우저 여부 true & false 리턴
$.browser.opera : 오페라 브라우저 여부 true & false 리턴
$.browser.msie : Internet Explorer 브라우저 여부 true & false 리턴
$.browser.mozilla : Mozilla 브라우저 여부 true & false 리턴

$.support <jQuery.support> :
브라우저마다의 기능의 차이나 버그등의 정보를 구조체로 반환 ; 1.3 이후 버전에서는 $.browser 대신 $.support를 사용 권장

옵션값 : http://api.jquery.com/jQuery.support/

.size() : 선택한 요소 배열의 길이를 반환한다.
var num = $("div").size(); // num은 div의 배열 크기를 숫자로 반환한다.

.length : 선택한 요소의 배열의 길이를 반환한다. (선택 요소에 "" 는 적용이안된다. '' 사용)
var num = $('div').length; // num은 div의 배열 크기를 숫자로 반환한다

.offSet() : 선택한 요소의 전체 문서 내(document)에서의 left, top 좌표를 구한다.
var offset = $('div:last').offset(); // div 마지막 요소의 left, top 좌표 반환 offset.left / offset.top

.position() : 선택한 요소의 부모요소를 기준으로 left, top 좌표를 구한다.
var position = $('div:last').position(); // div 마지막 요소의 부모로부터의 left, top 좌표 반환 position.left / position.top

.scrollLeft() : 선택한 요소의 스크롤바의 수평 위치(x좌표)를 얻거나 변경한다.
var x= $('div:last').scrollLeft(); // div 마지막 요소의 현재 수평 스크롤 x좌표를 반환한다.
var x= $('div:last').scrollLeft(300); // div 마지막 요소의 수평 스크롤 x좌표를 300으로 이동한다.

.scrollTop() : 선택한 요소의 스크롤바의 수직 위치(y좌표)를 얻거나 변경한다.
var x= $('div:last').scrollTop(); // div 마지막 요소의 현재 수직 스크롤 y좌표를 반환한다.
var x= $('div:last').scrollTop(300); // div 마지막 요소의 수직 스크롤 y좌표를 300으로 이동한다.

$.type() <jQuery.type()> : 인자의 obj의 type을 반환한다.
$.type(undefined) === "undefined" //
$.type() === "undefined" //
$.type(null) === "null" //
$.type(true) === "boolean" //
$.type(3) === "number" //
$.type("test") === "string" //
$.type(function(){}) === "function" //
$.type([]) === "array" //
$.type(new Date()) === "date" //
$.type(/test/) === "regexp" //

$.now() <jQuery.now> : 현재 시간을 number로 반환
$.now() // result : 1340954729007 (new Data).getTime();

$.fx.interval<jQuery.fx.interval> : 브라우져 애니메이션 프레임 조절
/ $.fx.interval = 1000; // 프레임을 1000으로 변경한다.

$.fx.off<jQuery.fx.off> : 모든 애니메이션 효과를 전역적으로 끈다.
/ $.fx.off = true; // 애니메이션 효과를 끈다.

[jQuery] jQuery API (3/7) - 검증

3. 검증
.is() : 현재 상태를 확인하여 반환한다. true / false
var chk = $("div").is(":animated"); // chk 는 true, false

$.contains() <jQuery.contains()> : 첫번째 인자 요소에 두번째 인자 요소를 가지고 있는지 확인한다.
$.contains($("#name"), $("#code")) // #name 요소 아래에 #code 요소가 있다면 true

$.isArray() <jQuery.isArray()> : 인자가 배열인지 확인한다.
$.isArray(arr) // arr이 Array 인지 체크 true / false

$.isEmptyObject() <jQuery.isEmptyObject()> : 인자가 empty 인지 체크한다.
$.isEmptyObject(arr) // arr 이 empty 인지 체크 empty : true / false

$.isFunction() <jQuery.isFunction()> : 인자가 JavaScript 함수인지 체크한다.
$.isFunction(function(){}); // function(){}가 함수인지 체크한다. : true / false

$.isPlainObject() <jQuery.isPlainObject()> : 인자가 plain Object인지 확인한다. (Plain Object : "{}" 나 "new Object"로 만들어진) ; IE8에서는 Error
$.isPlainObject({}); // {}가 Plain Object 인지 체크 한다. true /false

$.isWindow() <jQuery.isWindow()> : Window 인지 판별한다.
$.isWindow(window); // window가 Window 인지 체크 true / false

$.isXMLDoc() <jQuery.isXMLDoc()> : XML 문서의 DOM 노드 또는 XML 문서인지 체크
$.isXMLDoc(document); // document가 xml 문서인지 확인 : false

[jQuery] jQuery API (4/7) - 효과

4. 효과
.animate() : 해당 객체의 CSS 변화 효과를 준다. /$('p').animate({CSS Map}, {options});
/ $('p).animate({color:'white', font-size : 22px}, {duration : 400, easing : 'ease-in',
complete : function(){....}}); {queue:false}

.delay() : 해당 시간만큼 실행을 delay 시킨다.
/ $("div").slideDown().delay(5000).slideUp(); // id div 요소를 슬라이드 다운 후 5초 후 슬라이드 업 한다.

.stop() : 실행중인 애니메이션을 중지한다.
$("div").stop(); // div의 큐의 애니메이션을 멈춘다.

.show() : 해당 요소를 보여준다.
$("div").show(); // div 가 나타난다.
$("div").show(1000); // div 가 1초에 걸쳐서 나타난다.

.hide() : 해당 요소를 숨긴다.
$("div").hide(); // div가 사라진다.
$("div").show(1000); // div 가 1초에 걸쳐서 사라진다.

.toggle() : 해당 요소가 show 상태면 hide() / hide 상태면 show() 실행
$("div").toggle(); // div가 hide 상태면 show() / show 상태면 hide()한다.

$("div").toggle(1000); // div 가 1초에 걸쳐서 toggle() 한다.

.fadeIn() : 서서히 나타나게 한다.
$("div").fadeIn(); // div가 서서히 나타난다.
$("div").fadeIn("slow"); // div가 천천히 서서히 나타난다.
$("div").fadeIn(3000"); // div가 3초에 걸쳐서 서서히 나타난다.

.fadeOut() : 서서히 사라지게 한다.

.fadeToggle() : show 상태면 fadeOut(), hide 상태면 fadeIn()이 실행된다.

.fadeTo() : 주어진 시간동안 주어진 투명도로 변화한다.
$("div").fadeTo("slow", 0.15); // 천천히 투명도 0.15 로 변화
$("div").fadeTo("slow", 0.15); // 천천히 투명도 0.15 로 변화

.slideDown() : 선택 요소가 슬라이드 되어 내려온다.
$("div").slideDown(); // div가 아래로 내려온다.
$("div").slideDown("slow"); // div가 천천히 아래로 내려온다..
$("div").slideDown(3000"); // div가 3초에 걸쳐서 아래로 내려온다.

.slideUp() : 선택 요소가 슬라이드 되어 올라간다.

.slideToggle() : 선택 요소가 slideDown 상태면 slideUp(), slideUp 상태면 slideDown()을 실행

.queue() : 애니메이션이 chain으로 연속적으로 연결될 때, 애니메이션이 아닌 실행 함수를 큐에 저장 한다.(ex: class 속성 변경)

.dequeue() : queue에 쌓여있는 나머지 함수를 실행한다.

$("div").show("slow").animate({left:'+=200'}. 2000) // id div 요소가 천천히 나타난 후, 2초간 오른쪽으로 200이동한다
$("div").queue(function(){ // queue의 함수를 호출한다.
$(this).addClass("newcolor"); // id div 요소의 class를 newcolor 등록
$(this).dequeue(); // 다음 애니메이션 실행
});

$("div").animate({left:'-=200'}, 500); // 05초간 왼쪽으로 200 이동한다.

.clearQueue() : queue에 쌓인 것을 삭제한다. 현재 실행중인 queue는 계속 실행된다.

$("#stop").click(function(){ // id stop 요소를 클릭하면
$("div").clearQueue(); // div의 queue가 비워진다. 실행중인 큐는 진행한다.
});

[jQuery] jQuery API (5/7) - Event

5. Event
- event 제어

.bind() : event가 발생하면 실행될 함수를 지정한다. (이미 생성된 DOM에 대하여)

/ $("#image").bind("mousedown", function(){
// id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정
});

.unbind() : bind()를 해제한다.

.live() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (이벤트 버블 발생 가능)

/ $("#image").live("click", function(){
// id image 요소에 마우스를 클릭했을 때, 해당 함수 실행 지정
});

.die() : live() 제거

.delegate() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (이벤트 버블 방지)

/ $("#image").delegate("td", "click", function(){
// id image 요소 밑의 'td'에 마우스를 클릭했을 때, 해당 함수 실행 지정
});

.undelegate() : delegate() 제거

.on() : 동적으로 생성된 DOM 객체들의 이벤트를 연결한다. (1.7 이후 버전)

/ $("#image").on("click", "td", function(){
// id image 요소 밑의 'td'에 마우스를 클릭했을 때, 해당 함수 실행 지정
});

/ $("#image").on("click", "td",{foo: "bar"}, function(event){
alert(event.data.foo);
// id image 요소 밑의 'td'에 마우스를 클릭했을 때, {foo:"bar"}를 event에 넣어 함수 실행
});

.off() : on() 제거 (1.7 이후 버전)

.one() : bind() 함수처럼 선택된 이벤트를 지정한다. 하지만 딱 한번만 이벤트가 실행된다.

.trigger() : 선택된 요소의 이벤트를 발생시킨다.

/ $("#img").trigger("click") // id img 요소에 click 이벤트를 발생시킨다.

.triggerHandler() : trigger() 함수와 비슷하게 동작한다.
- form submission에는 동작하지 않는다.
- 선택된 요소들중 가장 첫번째 요소만 영향을 미친다.
- 브라우저 기본동작, 버블링, live Events는 일어나지 않는다.

$('element").명령어(function(event){
// element 요소에 명령어 실행시 함수 동작
});

- 웹 브라우져 Event

.load() : 문서가 불려졌을 때

.unload() : 문서가 닫혔을 때

.ready() : DOM이 모두 준비 되었을 때 함수 실행

$.holdReady() <jQuery.holdReady()> : DOM이 로드되는 것을 지연시켜준다. ; js 파일을 불러들이고 동작을 할때, js가 로드되지 않은 시점에 DOM이 로드 되는것을 방지해준다. / head 영역에 선언하는게 좋다.
$.holdReady(true); // DOM이 로드되는 것을 멈춘다.
$.getScript("myplugin.js", function(){ // myplugin.js 파일을 가져온다.
$.holdReady(false); // 파일 로드가 성공하면 DOM을 구성한다.
});

.resize() : 창 크기가 변경되었을 때 함수 실행

.scroll() : HTML 문서가 스크롤 되었을 때

.error() : 선택된 개체(images, window, document 등)가 정확하게 로드(load)되지 않을 경우 발생 오류 이벤트
<img src="missing.png" alt="Book" id="book" />
$('#book').error(function(){
// 이미지가 로드되지 않을 경우 함수 실행
});

- 마우스 Event

.click() : 마우스 클릭시

.dblclick() : 마우스 더블 클릭시

.mousedown() : 마우스 버튼을 누른 순간

.mouseup() : 마우스 버튼을 놓는 순간

.mouseover() : 대상에 마우스 커서가 위치했을 때

.mouseseenter() : 대상에 마우스가 위치했을 때

.mousemove() : 대상에서 마우스 커서가 움직였을 때

.mouseout() : 대상에서 마우스가 벗어 났을때

.mouseleave() : 대상에서 마우스가 벗어났을 때

.hover() : 마우스가 요소에 오버되었을때 첫번째 함수가 실행되고, 마우스가 요소를 떠날때 두번째 함수가 실행된다.

/ $("#p1").hover(function(event){
// 마우스가 오버되었을때 함수 실행
},
function(){
// 마우스가 떠날때 함수 실행
});

.toggle()

- 키보드 Event
.keypress() : 키 입력 시 발생(enter, tabemd의 특수키 제외)
.keydown() : 키 입력을 누르고 있을 때, 모든 키에 대해 적용
.keyup() : 키 입력 후 발생

- form Event
.select() : 선택한 개체를 선택 했을 때
.change() : <input />, <textarea />, <select /> 요소의 값 변경시 실행
.focus() : 해당 요소에 포커스를 받았을 때 실행되는 함수
.focusin() : focus() 의 업그레이드(1.4)

.blur() : 해당 요소에 포커스를 잃었을 때 실행되는 함수
.focusout() : blur()의 업그레이드(1.4)
.submit() : submit이 일어날 때

- event 함수 option 처리
event.target : event를 발생시킨 Target

event.currentTarget : event 버블링으로 현재 이벤트 발생되는 Target
event.relatedTarget : 해당 이벤트와 관련된 다른 DOM 요소 선택

event.result :해당 이벤트가 실행한 이벤트 핸들러 함수에 의해 리턴되는 가장 마지막 값
event.data : event 대상이 가지고 있는 값

event.namespace : 이벤트가 tirgger 됐을때, 발생한 이벤트의 namespace

event.pageX : 이벤트가 발생한 요소의 문서의 왼쪽부터의 위치

event.pageY : 이벤트가 발생한 요소의문서의 상단으로부터의 위치

event.timeStamp : event가 실행된 시간
event.type : 실행된 event 타입

event.which : 이벤트가 발생된 요소의 key (키보드 값<숫자>, 마우스 <왼쪽 1, 중간 2, 오른쪽 3>)

event.preventDefault() : 해당 요소에 걸려있는 다른 이벤트를 무력화 한다.

event.isDefaultPrevented() : event.preventDefault() 상태인지 체크 true / false

event.stopPropagation() : 다른 이벤트 핸들러가 호출되는 것을 막는다.(이벤트 버블링)

event.stopImmediatePropagation() : 다른 이벤트 핸들러가 호출되는 것을 막는다. (이벤트 버블링)

event.isPropagationStopped() : event.stopPropagation()이 호출 됐는지 여부 리턴 true / false
event.isImmediatePropagationStopped() : event.stopImmediatePropagation()이 호출됐는지 여부 리턴 true /false

[jQuery] jQuery API (6/7) - Ajax

6. Ajax
$.param() <jQuery.param()> : 폼 요소들의 값을 변환하여 직렬화된 문자열로 표현한다.
var params = {width : 1680, height : 1050}; // 배열 선언
var str = $.param(params); // Ajax로 전송가능하도록 직렬화
// $.param({a:[2,3,4]}); // "a[]=2&a[]=3&a[]4"
// $.param({a:{b:1,c:2},d:[3,4,{e:5}] }); // "a[b]=1&a[c]=2&d[]=3&d[]=4&d[2][e]=5"

.serialize() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 직렬화 한다.
/ $("#name").serialize(); // id name form의 데이터를 직렬화한다. a=1&b=2

.serializeArray() : 선택한 form의 데이터를 ajax로 전송할 수 있도록 배열로 직렬화 한다.
/ $("#name").serializeArray(); // id name form의 데이터를 배열로 직렬화한다. [ { name : "a", value : "1" }, { name : "c", value:"3"}]

$.ajax() <jQuery.ajax()> : ajax 비동기 호출 전송
$.ajax({
type : 'POST', // post 타입 전송
url : 'some.php', // 전송 url
data : "name=John&location=Boston", // 전송 파라미터
cache : false, // ajax로 페이지를 요청해서 보여줄 경우
// cache가 있으면 새로운 내용이 업데이트 되지 않는다.
async : true, // 비동기 통신, false : 동기 통신
beforSend : fucntion(){ // ajax 요청이 전송되기 전 실행 함수
},
success : function(msg){ // 콜백 성공 응답시 실행
},
error : function(){ // Ajax 전송 에러 발생시 실행
},
complete : function(){ // success, error 실행 후 최종적으로 실행
}
});

.ajaxSend() : ajax 요청이 서버로 보내지기전에 호출됨

.ajaxStart() : ajax 요청이 서버로보내진 직후에 호출됨.

.ajaxStop() : 응답을 서버로부터 받은 직후에 호출됨

.ajaxSuccess() : 요청이 성공적으로 완료된 후에 호출됨

.ajaxError() : ajax 실행 후 에러 발생시 함수 실행 / $.ajax() 옵션의 error와 동일

.ajaxComplete() : ajax 실행 후 최종적으로 함수 실행 / $.ajax() 옵션의 complete 와 동일

$.ajaxPrefilter() <jQuery.ajaxPrefilter()> : ajax 요청을 보내기 전에 Ajax 옵션들을 수정하거나 조작한다.

$.ajaxPrefilter(function(options)){
// options : request 요청 옵션 값들
});

$.ajaxSetup() <jQuery.ajaxSetup()> : 앞으로 발생할 ajax 요청에 대한 디폴트 값을 설정한다.

$("button").click(function(){ // button을 클릭할시 ajax 호출에 대한
$.ajaxSetup({ // url과 success 함수를 셋팅한다.
url : "test_ajax.txt",
success:function(result){
})
});

$.get() <jQuery.get()> : get 방식으로 ajax 통신을 한다. 서버에서 가져온다.
$.get("test.php", function(data.status){..}); // "test.php"로 get 방식 통신 후 function 실행

$.getJSON() <jQuery.getJSON()> : $.get()과 동일하나, 데이터 타입은 json 타입이다.

$.getScript() <jQuery.getScript()> : $.get()과 동일하나, 데이터 타입은 script, 동적으로 자바스크립트를 불러온다.

$.post() <jQuery.post()> : post 방식으로 ajax 통신을 한다. 서버와 파라미터로 데이터를 주고받는다.

$.post("test.php", // "test.php"로

{ // name과 message 파라미터
name: "myeonghyeon",
message : "hi"
},

function(data.status){..} // callback() 함수 실행

); // "test.php"로 파라미터를 보내 post 방식 통신 후 function 실행

.promise() : 비동기함수(Ajax)가 리턴한 객체를 가진다.

.promise().done(); : 선택된 비동기함수 리턴 객체의 콜백이 성공, done 함수 실행

$("div").promise().done(function(){

$("p").append("Finished"); // 모든 div 요소의 요청이 모두 성공하면, done 실행, p 요소에 finished 삽입

});

.promise().fail(); : 선택된 비동기함수 리턴 객체의 콜백이 실패, fail 함수 실행

.promise().then(); : 콜백이 성공하면(success) 리턴데이터를 then의 인자가 받아서 실행

$("div").promise().then(A).then(B); // div에 주어진 액션이 성공하면 리턴값을 가지고 A 함수 실행 A함수 리턴값을 가지고 B 함수 실행

$.when() <jQuery.when()> : 인자의 함수의 콜백 후 리턴값을 반환한다.

$.when( effect() ).done(function(){

$("p").append("finished"); // effect() 함수를 실행해서 성공하면 p 에 finished를 삽입한다.

});

$.when( A, B ).done(function(){

// 동시에 A,B 함수를 실행하고 모두가 성공할 경우 .done(function() 실행

});

$.deferred() <jQuery.deferred()> : $.ajax가 반환하는 객체, pomise 객체와 같은 일을 할 수 있으며 추가적인 콜백 함수를 가진다.

deferred.always() : 요청이 성공, 실패에 무관하게 항상 실행된다.

deferred.done() : 요청이 성공시 실행된다.

deferred.fail() : 요청이 실패시 실행된다.

deferred.isRejected() : 요청이 실패됐는지 확인한다.

deferred.isResolved() : 요청이 성공했는지 확인한다.

deferred.pipe() : 요청의 return 값을 인자로 넘겨준다.

deferred.promise() : 요청의 콜백을 객체로 가지고 있는다.

deferred.reject() : 요청이 실패시 fail() 함수를 호출한다.

deferred.rejectWith()

deferred.resolve() : 요청이 성공시 done() 함수를 호출한다.

deferred.resolveWith()

deferred.then() : 두개의 인자를 가지고 두개 모두 성공할 때 resolve(), 하나라도 실패하면 reject() 실행

[jQuery] jQuery API (7/7) - 선택자

- "*" : 전체 선택자

속성 선택자

- [name] : name 속성이 있는 요소를 선택

- [name = "value"][name2 = "value2"] : name 속성의 값이 value이고 name2 속성의 값이 value2 인 요소를 선택

- [name = "value"] : name 속성의 값이 value인 요소를 선택한다.

- [name != "value"] : name 속성의 값이 value가 아닌 요소를 선택한다.

- [name ^= "value"] : name 속성의 값이 value로 시작하는 요소를 선택한다.

- [name |= "value"] : name 속성의 값이 value 이거나 value로 시작하는 요소를 선택한다.

- [name *= "value"] : name 속성의 값에 value가 들어 있는 요소를 선택한다.

- [name ~= "value"] : name 속성의 값이 value를 포함하는, 쉼표로 구분된 문자열 요소를 선택.

- [name $= "value"] : name 속성의 값이 value로 끝나는 요소를 선택한다.

태그 선택

- div : 태그명이 div인 모든 Element 선택

- div p : div 요소의 자식 요소중 태그명이 p인 요소 선택

- div, p : div 요소와 p 요소를 선택

- div > p : div 요소의 바로아래 자식 요소중 태그명 p인 요소 선택

- div + p : div의 형제 요소로 바로 다음에 나오는 요소 p인 요소 선택

- div ~ p : div의 형제 요소로 다음에 나오는 모든 요소 p인 요소 선택

- div:has(p) : 태그명이 p인 자손을 하나 이상 가지는 div 요소 선택

- div.code : 클래스명 code를 가지는 모든 div 요소 선택

- div#name : id가 name인 div 요소 선택

- div[A] : 속성 A를 가지는 모든 div 요소 선택

- div[A=B] : 값이 B인 A 속성 값을 가진 div 요소 선택

- div[A^=B] : 값이 B로 시작하는 값인 A 속성을 가진 div 요소 선택

- div[A$=V] : 값이 V로 끝나는 값인 A 속성을 가진 div 요소 선택

- div[A*=V] : 값에 V를 포함하는 값인 A 속성을 가진 div 요소 선택

선택자

- :animated : 움직이는 요소를 선택한다.

- :header() : <h1>, <h2>, <h3> 등 제목 요소를 선택한다.

- :input : input, textarea 모든 입력 컨트롤 선택

- :text : <input type="text"> 선택

- :button : <input type="button"> 선택

- :radio : <input type="radio"> 선택

- :checkbox : <input type="checkbox"> 선택

- :password : <input type="password"> 선택

- :file : <input type="file"> 선택

- :hidden : <input type="hidden"> 선택

- :image : <imput type="image"> 선택

- :submit : <input type="submit"> 선택

- :reset : <input type="reset"> 선택

- :selected : <select>의 <option selected> 를 선택한다.

- :checked : <input type="checkbox"> <input type="radio">의 체크된 요소를 선택한다.

- :contains() : 해당 인자를 가지고 있는 요소 선택 ; $('div:contains("text")') // div 요소중 "text"를 포함한 요소

- :visible : 눈에 보이는 요소 선택

- :enabled : 활성화된 요소 선택

- :disabled : 비활성화된 요소 선택

- :empty : 해당 요소가 비어있는 요소 선택 (text도 포함)

- :odd : 홀수 요소 선택

- :even : 짝수 요소 선택

- :parent : 부모요소 선택

- :first : 첫번째 요소 선택

- :first-child : 첫번째 자식요소 선택

- :last : 마지막 요소 선택

- :last-child : 마지막 자식요소 선택

- :nth-child() : 자식 요소 집합에서 인자의 위치한 자식을 선택 ; $('li:nth-child(1)') // <li>의 첫번째 자식요소를 찾는다. (index : 1, 2, 3)

- :eq() : 인자의 순번에 있는 요소를 선택 ; $('td:eq(2)") // td 집합중 세번째 요소를 선택 (index : 0, 1, 2)

- :only-child : 형제가 없는 요소를 선택

- :gt() : 인자보다 큰 요소 선택 ; $(":gt(index)") // index 값보다 큰 요소 선택

- :lt() : 인자보다 작은 요소 선택 ; $(":lt(index)") // index 값보다 작은 요소 선택

- :has() : 인자요소를 가지고 있는 요소를 선택 ; $('div:has(p)') // p를 자식으로 가지고 있는 div를 선택

- :not() : 인자의 조건이 아닌 요소를 선택 ; $(':not(div)') // div 가 아닌 요소를 선택

- :focus : focus 상태 요소 선택