javascript - ncsjfor/in •for / in –for(variable in object) statement •variable: •object :...
TRANSCRIPT
JavaScript
JavaScript����NCSJ2018
��� ������
JavaScript" �
• ��������–��(��� ���
• ��� ��#�C/C++�Java����&• ����'��&– ECMAScript
• )1,2.0,2-/*+!�%�$'����'&
1directec co.,ltd. NCSJ2018
JavaScript���
• JavaScript��
<html><head><title>JavaScript</title></head><body><hr/><script>
document.write(“Hello,JavaScript!!”);</script></body></html>
2directec co.,ltd. NCSJ2018
����
• ��–���������� �
• ��– ‘ ��� “ ���– Unicode�����
• ���– true / false
3directec co.,ltd. NCSJ2018
$*"�
• ���–������–��� ����
• ���–�������–�'!� %�• ������'!� %�• ()&#����������
4directec co.,ltd. NCSJ2018
��
• JavaScript���–������� �����
i.e. JavaScript��������
// ���� � x = 0;y = 0;
// ���� �var a;var b;var m, n;
5directec co.,ltd. NCSJ2018
.-92
• �$.-92– ,8906 �
• 28,54�� ����
– 89*6 �• ��� ���(' �• �)�����'��� $&����• ,8906 �!���$��89*6 �����('
• 89*6 �$���#%�var�)���"�• 18/+736$.-92%"�
6directec co.,ltd. NCSJ2018
&/)%'-
• JavaScript��&/)%'-–������ ���" ����
• 02.,#–&/)%'-����"��� ���–���02.,#�����!��
• (3*-1'+–&/)%'-�$3*+3*"�����������
7directec co.,ltd. NCSJ2018
�
• �–� �� � Array()�����• �� var array = new Array();
–����� � [ ] ����� ��• �� var array = [“Red”, “Green”, “Blue”];
8directec co.,ltd. NCSJ2018
�0&0$"- #*/
• JavaScript�(),�–�������������� ������–%.!+'���������
9directec co.,ltd. NCSJ2018
���
• ����– �� +–�� -–�� *–��� /–��� %–������� ++–������� --
10directec co.,ltd. NCSJ2018
��
• ���–�� <–�� <=–��� ==–�� >=–�� >
11directec co.,ltd. NCSJ2018
���
• ����– AND &&– OR ||– NOT !
12directec co.,ltd. NCSJ2018
���
• �����–��� ��������
– if– while– for– for/in
13directec co.,ltd. NCSJ2018
if
• if–���������"�! �� ����
if( expression ){
����"����expression��#true$����� ���
}
if( expression )������expression��#true$����� ���
14directec co.,ltd. NCSJ2018
if
• if / else if / else– if : ������– else if : # ��������– else : if / else if �� ��������
if( 1st expression ){���������������"!
}else if( 2ndexpression ){
���������������"!}else{
���������"�� ������������"!}
15directec co.,ltd. NCSJ2018
switch
• switch / case–����#���!������"!
switch( x ){case 1:
� x ���$����� �"!break;
case 2:� x ���%����� �"!break;
case 3:� x ���&����� �"!break;
default:� x ��������"������ ������ �"!break;
} 16directec co.,ltd. NCSJ2018
while�
• while–������� #�"!�������
while( expression ){
���#��� expression��$true%����� �������
}
while( expression )����� expression��$true%����� �������
17directec co.,ltd. NCSJ2018
for
• for–���������"!&%�������$&# � ��
– for(initialize ; condition; increment'• initialize ���(�������
• condition ���������
• increment �����������
18directec co.,ltd. NCSJ2018
for/in�
• for / in
– for(variable in object) statement
• variable : ��
• object : �������� �����������
• statement : ���������
var array = [1,2,3,4,5,6,7,8,9,0];for( var x in array){
document.write(“x = ” + x + “<br>”);}
19directec co.,ltd. NCSJ2018
function
• function$�������– function�����������–���� ��"#���������–������ !�������������–����return����
function ���( x, y ){����
return value;}
20directec co.,ltd. NCSJ2018
��
• throw– ��*,/01�������2�(– �##��$���)(– throw expression;
• try/catch/finally– try
• ��*����(���#�(�*�&./-+– catch
• ��') ��* %� !�"���(./-+– finally
• ����)(./-+
21directec co.,ltd. NCSJ2018
with�
• with–�����������
with( document.forms[0] ){// ������� �document.forms[0]�����name.value = “”;addr.value = “”;tel.value = “”;mail.value = “”;
}
22directec co.,ltd. NCSJ2018
�����
• ��������
• ���� �����������
var data = { name:”no-name”, value:0 };
var now = new Date();
23directec co.,ltd. NCSJ2018
�!�����
• �!�����–������ �����• � �����• ������
function Person(name, addr, mail){// ���� �����this.name = name;this.addr = addr;this.mail = mail;// ���������this.print = function() { document.write( this.name ); }
}
24directec co.,ltd. NCSJ2018
�'!� %�()&$�
• ()&$���� #"– var x = {p:0, q:0};– x.p = 100;• ������* . +������()&$����
• ()&$����– in �����()&$����– if( “p” in x ) x.p = 100;
• ()&$����– delete x.p;
25directec co.,ltd. NCSJ2018
"��
• �!�����"�� – # . $���"�� ���������– "�� ������() ��• (�)���������
var bond = new Person(“James Bond”, “London”, “[email protected]”);
bond.print();
26directec co.,ltd. NCSJ2018
��
• ��–���� ���� ����–�� ��������$#"������• [ index ]
–��������#%!������
27directec co.,ltd. NCSJ2018
��*;57:
• ��*;57:– Array3<4*;57:
• join() $,'*��2��)#��$1• reverse() ��*��*��2��"%1• sort() ��25=9$1• concat() ��2��#'��&(��2��$1• slice() �#&��!/��2�0�$• splice() ��*��-&+��2��• push() / pop() 4673*.�) 1• shift() / unshift() ��*8=62�����$1• toString() ��)$1
28directec co.,ltd. NCSJ2018
��
• ����– function������–$'&)!����*��+� ���–%("�����{ �� }� ���–��������return�����
–�����% ��#���
29directec co.,ltd. NCSJ2018
��.0,*$
• length.0,*$–�/)+�� �"���
• prototype.0,*$–������� ��prototype.0,*$����"!• �����constructor��
• .0,*$�� Function&-(%'+�.0,*$#����!���!����� �#���!
30directec co.,ltd. NCSJ2018
��"351/)
• length351/)–�4.0����'��"�• ��#�"�"�(���&�����&• ��"length351/)#������"���&
– ��!������"��#� &• ��6Function+2-*,07"���%$� ��&
31directec co.,ltd. NCSJ2018
���(*&$�
• prototype(*&$�–�����������(*&$�– +"%)�#������������–��������� ��• ����(*&$�����'!��%������
32directec co.,ltd. NCSJ2018
� -.+)$
• -.+)$ ��– Function&,(%'*����� -.+)$#��/���"�����"
–� ��� ����!��#�����r�����"
Person.count = 0;
function Person(){return Person.count++;
}
33directec co.,ltd. NCSJ2018
�������
• apply()����f.apply(obj, [x, y]);
f obj�����obj ���������� ��
[x,y] �����• call()����
f.call(obj, x, y);
34directec co.,ltd. NCSJ2018
����!�
• JavaScript�����!�–����!�• ������!�• ������!�����• ������!���! ������
– ������������ ����
35directec co.,ltd. NCSJ2018
Call-30,/2
• Call-30,/2&��–�����%� )(–��&�412��� )(–��&67.5��'�� )(–��&����*($�Call-30,/2'��(
• ����$!#Call-30,/2+��–��&��+��"(�$�� (
36directec co.,ltd. NCSJ2018
�����
• ������Closure�– ����������� ���� �����
function makeProp(obj, name, func){var value;obj[“get” + name] = function() { return value; };obj[“set” + name] = function( v ){
if(func && func(v)){ throw “set”+name+”:invalid value ”+v; }else{ value = v; }
};}var o = {};makeProp(o,”Name”,function(x){ return typeof x == “string”; });
o.setName(“Naoto”);document.write( o.getName() );
37directec co.,ltd. NCSJ2018
Client Side JavaScript
• �����JavaScript• HTML������• � �����• ��������• �����• ��� ���• �� ���
38directec co.,ltd. NCSJ2018
Client Side JavaScript
• &-� ��JavaScript– Window�&!��$• JavaScript�� ���/#�"$• %�,+/$1HTML��2�������/%�
–�&!��$����• Window�&!��$��������
–�(/$����'.�-*/�• )�"�(/$• �0�(/$
39directec co.,ltd. NCSJ2018
Client Side JavaScript
• HTML��� ���– <script>$#• <script>��</script>�������
<script language=“javascript”>���JavaScript ��
</script>
• <script>$#�src�����archive�����<script src=“sample.js”></script>(!"+������.js
• HTML�"),%',&*�������
40directec co.,ltd. NCSJ2018
Client Side JavaScript
• �������–����� ����• w = window.open();
– URL– ����� ����– ����� ��– � ����� true / false
–����� ����• w.close();
– ������������
41directec co.,ltd. NCSJ2018
Client Side JavaScript
• �������– Location / Window�location���• href���• search ���• protocol ���• host ���
42directec co.,ltd. NCSJ2018
Client Side JavaScript
• ������– History• Window�history����
• back() ��• forward() ��
43directec co.,ltd. NCSJ2018
Client Side JavaScript
• ��������– location����������� �
location = “sample.html”;– reload() ����
location.reload();– replace() ����
location.replace(url)url���� �������������history������
44directec co.,ltd. NCSJ2018
Client Side JavaScript
• �!$���–�!$��$�#• �!$��$�#�������������
– HTML�• �!$��$�#�HTML�����"%����
– #������� �
45directec co.,ltd. NCSJ2018
Client Side JavaScript
• �� ��–���������� ��• onclick• onsubmit• ondblclick• onmousemove• onmouseover• onmouseout• onmousedown• onmouseup
46directec co.,ltd. NCSJ2018
Client Side JavaScript
• ������– onkeydown– onkeypress– onkeyup
47directec co.,ltd. NCSJ2018
)!-,/(���
• DOM– Document Object Model• )!-,/(����� *%�"(�����"'&���1API2• DOM LEVEL 0
– ���*.�$������#+0(�����– Netscape �
• W3C DOM– W3C���– LEVEL 1 � 3��– http://www.w3.org/DOM/
48directec co.,ltd. NCSJ2018
����� ���
• Document���� – ���
• write���• open���
– �����• bgColor• cookie• domain• lastModified• referrer• title• URL
49directec co.,ltd. NCSJ2018
���� ���
• Document���� –�������• anchors[]• applets[]• forms[]• images[]• links[]
50directec co.,ltd. NCSJ2018
"�'&)!���
• Document�$���!–��%(#����������
<html><body><form name=“form1”><input type=“text” value=“Hello!!”></form></body></html>
���� �����document.forms[0]
���%(#��� �����document.forms.form1
����) ���������document.forms[form1]
"�'&)!�%(#��� �document.form1
51directec co.,ltd. NCSJ2018
"�'&)!��
• Document�$���!
–�%)!#)"(• �)�(� �$�����������• "�'&)!���������� �
<form name=“form1” onsubmit=“return check()”>
FIELD1 : <input name=“field1” type=“text” size=20><br>
FIELD2 : <input name=“field2” type=“text” size=20><br>
<input type=“button” value=“PUSH” onclick=“push()”>
<input type=“submit”>
</form>
52directec co.,ltd. NCSJ2018
W3C DOM
• W3C ���DOM–��������–���������• ���• ��
– DOM HTML API– DOM LEVEL
53directec co.,ltd. NCSJ2018
W3C DOM
• ����������
Document
<head>
<body>
<title>
<p>
<h1>
<hr>
<html><head><title>TITLE</title></head><body><h1>DOCUMENT</h1><hr/><p align=“center”>CONTENTS…</p></body></head>
54directec co.,ltd. NCSJ2018
W3C DOM
• ���– ������• Element• Text• Document• Comment• DocumentFragment• Attr
55directec co.,ltd. NCSJ2018
W3C DOM• ���������
Document
Node
CharacterData Element Attr
CommentTextHTMLDocument HTMLElement
HTMLHeadElement HTMLBodyElement HTMLParagraphElement
56directec co.,ltd. NCSJ2018
W3C DOM
• Element��• � �����Element,.+�!%&('��#
–���%&('• �� / getAttribute()-)*+• �� / setAttribute()-)*+• �� / removeAttribute()-)*+
• Attr��"��– getAttributeNode()-)*+$��– "����$�#�����#
57directec co.,ltd. NCSJ2018
W3C DOM
• Attr���• Element������������"�#��#�• �� �"��!#� ����
– Attr�����• getName()
• getSpecified()
• getValue()
• setValue()
• getOwnerElement()
– DOM LEVEL 2
• getSchemaTypeInfo()
– DOM LEVEL 3
• isId()
– DOM LEVEL 3
58directec co.,ltd. NCSJ2018
W3C DOM
• DOM HTML API– DOM��• XML / HTML�������
– Node, Element, Document
• HTML ������– HTMLDocument
» HTML���������– HTMLElement
» HTML����������������
59directec co.,ltd. NCSJ2018
HTTP���
• Ajax• XMLHttpRequest• ������• ���� ��• ����� ��
60directec co.,ltd. NCSJ2018
HTTP���
• Ajax• Asynchronous JavaScript and XML
– Ajax: A New Approach to Web Applications– Jesse James Garrett, FEB/2005
– XMLHttpRequest��� ���JavaScript�������• HTTP�JavaScript����• ��������• � ���� �������
61directec co.,ltd. NCSJ2018
HTTP���
• XMLHttpRequest– Client Side JavaScript ��HTTP�–������������HTTP�������– Ajax��������
62directec co.,ltd. NCSJ2018
HTTP���
• XMLHttpRequest���������–������!�� ������� ��– IE7����������
var request = new XMLHttpRequest();
– IE7��var request = new ActiveXObject(“Msxml2.XMLHTTP”);
var request = new ActiveXObject(“Miscrosoft.XMLHTTP”);
63directec co.,ltd. NCSJ2018
HTTP���
• 2%$(.���–'505����• open()1)+/
request.open(method, url, mode);method : “GET” or “POST”url : ����URLmode : true(=���) or false(=��)
• GET– ���URL� &4-4,"*#435/
• POST– 2%$(.���������"�!�����!
64directec co.,ltd. NCSJ2018
HTTP��
• ��6)38)– ����6)38)
• XMLHttpRequest�open()4*,/�����#����"�����6)38)#���!����!
– 6)38)���• 5&%).#��:send()4*,/�� ;��(909� 6)38)����"!
• 6)38)��5&%).�status271-$– send()4*,/� 5+98�� "��– )-9+)'9/
» 200 : SUCCESS» 404 : NOT FOUND
65directec co.,ltd. NCSJ2018
HTTP��
• ���)#'*#– XMLHttpRequest�open()($%&�����"���!������)#'*#"��� ����
• +�������true"�� • � ������true��
66directec co.,ltd. NCSJ2018
HTTP"�
• ���@0<B0–@0<B0"��• ?/.05����send()=236#9A3/�) �• @0<B0#�status:A84,%135�)(• @0<B0"��#�-;B57B6>!&'�*)(
–@0<B0"-;B57B6>• onreadystatechange+���(
– readyState:A84,"����(�$��)(– readyState:A84,
» HTTP?/.05"��+�����
67directec co.,ltd. NCSJ2018
HTTP��
• XMLHttpRequest– readyState�����0 open()�������!����1 send()�������!����2 &"%'"���������
3 $(#���*IE�FireFox������ � �
4 ���
68directec co.,ltd. NCSJ2018
HTTP���
• HTTP HEAD#��� –����URL�"������
• HTTP�%!%��"��%��� ��
• �$�$�����
– XMLHttpRequest����HTTP HEAD�
XMLHttpRequest request = new XMLHttpRequest();request.open(“HEAD”, url);request.send(null);
69directec co.,ltd. NCSJ2018
HTTP���
• HTTP POST– POST��������������
var request = new XMLHttpRequest();request.onreadystatechange = function(){
if(request.status == 200){// POST�����
}else{
// ���� ���}
}request.open(“POST”, url);request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);request.send( formData );
70directec co.,ltd. NCSJ2018
HTTP���
• JSON����������� ��– JSON : JavaScript Object Notation
{"name": ”Soseki Natsume”,"books": [
”Neko”,”Sanshiro”,“Sorekara”,“Kokoro”
]}
71directec co.,ltd. NCSJ2018
HTTP���
• XML����������� ��
<author><name>Soseki Natsume</name><books>
<book>Neko</book><book>Sanshiro</book><book>Sorekara</book><book>Kokoro</book>
</books></author>
72directec co.,ltd. NCSJ2018
HTTP(��
• 6.;-/8– XMLHttpRequest')�6.;-/8�&�• �(��%�� ���+
– Window2:4038,��!+• Window.setTimeout()<579
– Window'$6.;-/8,�%�+
• Window.clearTimeout()<579– ��� #��)�6.;-/8,3>-!+ ���+– 6.;-/8(��)�XMLHttpRequest.abort(),�*�!
» "(��1=?(���,��
73directec co.,ltd. NCSJ2018
NCSJNovice Class Seminar – Java Programmer
��� ������
JavaScript����