JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object :...
Transcript of JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object :...
![Page 1: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/1.jpg)
JavaScript
JavaScript����NCSJ2018
��� ������
![Page 2: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/2.jpg)
JavaScript" �
• ��������–��(��� ���
• ��� ��#�C/C++�Java����&• ����'��&– ECMAScript
• )1,2.0,2-/*+!�%�$'����'&
1directec co.,ltd. NCSJ2018
![Page 3: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/3.jpg)
JavaScript���
• JavaScript��
<html><head><title>JavaScript</title></head><body><hr/><script>
document.write(“Hello,JavaScript!!”);</script></body></html>
2directec co.,ltd. NCSJ2018
![Page 4: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/4.jpg)
����
• ��–���������� �
• ��– ‘ ��� “ ���– Unicode�����
• ���– true / false
3directec co.,ltd. NCSJ2018
![Page 5: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/5.jpg)
$*"�
• ���–������–��� ����
• ���–�������–�'!� %�• ������'!� %�• ()&#����������
4directec co.,ltd. NCSJ2018
![Page 6: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/6.jpg)
��
• JavaScript���–������� �����
i.e. JavaScript��������
// ���� � x = 0;y = 0;
// ���� �var a;var b;var m, n;
5directec co.,ltd. NCSJ2018
![Page 7: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/7.jpg)
.-92
• �$.-92– ,8906 �
• 28,54�� ����
– 89*6 �• ��� ���(' �• �)�����'��� $&����• ,8906 �!���$��89*6 �����('
• 89*6 �$���#%�var�)���"�• 18/+736$.-92%"�
6directec co.,ltd. NCSJ2018
![Page 8: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/8.jpg)
&/)%'-
• JavaScript��&/)%'-–������ ���" ����
• 02.,#–&/)%'-����"��� ���–���02.,#�����!��
• (3*-1'+–&/)%'-�$3*+3*"�����������
7directec co.,ltd. NCSJ2018
![Page 9: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/9.jpg)
�
• �–� �� � Array()�����• �� var array = new Array();
–����� � [ ] ����� ��• �� var array = [“Red”, “Green”, “Blue”];
8directec co.,ltd. NCSJ2018
![Page 10: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/10.jpg)
�0&0$"- #*/
• JavaScript�(),�–�������������� ������–%.!+'���������
9directec co.,ltd. NCSJ2018
![Page 11: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/11.jpg)
���
• ����– �� +–�� -–�� *–��� /–��� %–������� ++–������� --
10directec co.,ltd. NCSJ2018
![Page 12: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/12.jpg)
��
• ���–�� <–�� <=–��� ==–�� >=–�� >
11directec co.,ltd. NCSJ2018
![Page 13: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/13.jpg)
���
• ����– AND &&– OR ||– NOT !
12directec co.,ltd. NCSJ2018
![Page 14: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/14.jpg)
���
• �����–��� ��������
– if– while– for– for/in
13directec co.,ltd. NCSJ2018
![Page 15: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/15.jpg)
if
• if–���������"�! �� ����
if( expression ){
����"����expression��#true$����� ���
}
if( expression )������expression��#true$����� ���
14directec co.,ltd. NCSJ2018
![Page 16: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/16.jpg)
if
• if / else if / else– if : ������– else if : # ��������– else : if / else if �� ��������
if( 1st expression ){���������������"!
}else if( 2ndexpression ){
���������������"!}else{
���������"�� ������������"!}
15directec co.,ltd. NCSJ2018
![Page 17: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/17.jpg)
switch
• switch / case–����#���!������"!
switch( x ){case 1:
� x ���$����� �"!break;
case 2:� x ���%����� �"!break;
case 3:� x ���&����� �"!break;
default:� x ��������"������ ������ �"!break;
} 16directec co.,ltd. NCSJ2018
![Page 18: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/18.jpg)
while�
• while–������� #�"!�������
while( expression ){
���#��� expression��$true%����� �������
}
while( expression )����� expression��$true%����� �������
17directec co.,ltd. NCSJ2018
![Page 19: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/19.jpg)
for
• for–���������"!&%�������$&# � ��
– for(initialize ; condition; increment'• initialize ���(�������
• condition ���������
• increment �����������
18directec co.,ltd. NCSJ2018
![Page 20: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/20.jpg)
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
![Page 21: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/21.jpg)
function
• function$�������– function�����������–���� ��"#���������–������ !�������������–����return����
function ���( x, y ){����
return value;}
20directec co.,ltd. NCSJ2018
![Page 22: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/22.jpg)
��
• throw– ��*,/01�������2�(– �##��$���)(– throw expression;
• try/catch/finally– try
• ��*����(���#�(�*�&./-+– catch
• ��') ��* %� !�"���(./-+– finally
• ����)(./-+
21directec co.,ltd. NCSJ2018
![Page 23: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/23.jpg)
with�
• with–�����������
with( document.forms[0] ){// ������� �document.forms[0]�����name.value = “”;addr.value = “”;tel.value = “”;mail.value = “”;
}
22directec co.,ltd. NCSJ2018
![Page 24: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/24.jpg)
�����
• ��������
• ���� �����������
var data = { name:”no-name”, value:0 };
var now = new Date();
23directec co.,ltd. NCSJ2018
![Page 25: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/25.jpg)
�!�����
• �!�����–������ �����• � �����• ������
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
![Page 26: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/26.jpg)
�'!� %�()&$�
• ()&$���� #"– var x = {p:0, q:0};– x.p = 100;• ������* . +������()&$����
• ()&$����– in �����()&$����– if( “p” in x ) x.p = 100;
• ()&$����– delete x.p;
25directec co.,ltd. NCSJ2018
![Page 27: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/27.jpg)
"��
• �!�����"�� – # . $���"�� ���������– "�� ������() ��• (�)���������
var bond = new Person(“James Bond”, “London”, “[email protected]”);
bond.print();
26directec co.,ltd. NCSJ2018
![Page 28: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/28.jpg)
��
• ��–���� ���� ����–�� ��������$#"������• [ index ]
–��������#%!������
27directec co.,ltd. NCSJ2018
![Page 29: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/29.jpg)
��*;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
![Page 30: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/30.jpg)
��
• ����– function������–$'&)!����*��+� ���–%("�����{ �� }� ���–��������return�����
–�����% ��#���
29directec co.,ltd. NCSJ2018
![Page 31: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/31.jpg)
��.0,*$
• length.0,*$–�/)+�� �"���
• prototype.0,*$–������� ��prototype.0,*$����"!• �����constructor��
• .0,*$�� Function&-(%'+�.0,*$#����!���!����� �#���!
30directec co.,ltd. NCSJ2018
![Page 32: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/32.jpg)
��"351/)
• length351/)–�4.0����'��"�• ��#�"�"�(���&�����&• ��"length351/)#������"���&
– ��!������"��#� &• ��6Function+2-*,07"���%$� ��&
31directec co.,ltd. NCSJ2018
![Page 33: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/33.jpg)
���(*&$�
• prototype(*&$�–�����������(*&$�– +"%)�#������������–��������� ��• ����(*&$�����'!��%������
32directec co.,ltd. NCSJ2018
![Page 34: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/34.jpg)
� -.+)$
• -.+)$ ��– Function&,(%'*����� -.+)$#��/���"�����"
–� ��� ����!��#�����r�����"
Person.count = 0;
function Person(){return Person.count++;
}
33directec co.,ltd. NCSJ2018
![Page 35: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/35.jpg)
�������
• apply()����f.apply(obj, [x, y]);
f obj�����obj ���������� ��
[x,y] �����• call()����
f.call(obj, x, y);
34directec co.,ltd. NCSJ2018
![Page 36: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/36.jpg)
����!�
• JavaScript�����!�–����!�• ������!�• ������!�����• ������!���! ������
– ������������ ����
35directec co.,ltd. NCSJ2018
![Page 37: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/37.jpg)
Call-30,/2
• Call-30,/2&��–�����%� )(–��&�412��� )(–��&67.5��'�� )(–��&����*($�Call-30,/2'��(
• ����$!#Call-30,/2+��–��&��+��"(�$�� (
36directec co.,ltd. NCSJ2018
![Page 38: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/38.jpg)
�����
• ������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
![Page 39: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/39.jpg)
Client Side JavaScript
• �����JavaScript• HTML������• � �����• ��������• �����• ��� ���• �� ���
38directec co.,ltd. NCSJ2018
![Page 40: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/40.jpg)
Client Side JavaScript
• &-� ��JavaScript– Window�&!��$• JavaScript�� ���/#�"$• %�,+/$1HTML��2�������/%�
–�&!��$����• Window�&!��$��������
–�(/$����'.�-*/�• )�"�(/$• �0�(/$
39directec co.,ltd. NCSJ2018
![Page 41: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/41.jpg)
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
![Page 42: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/42.jpg)
Client Side JavaScript
• �������–����� ����• w = window.open();
– URL– ����� ����– ����� ��– � ����� true / false
–����� ����• w.close();
– ������������
41directec co.,ltd. NCSJ2018
![Page 43: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/43.jpg)
Client Side JavaScript
• �������– Location / Window�location���• href���• search ���• protocol ���• host ���
42directec co.,ltd. NCSJ2018
![Page 44: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/44.jpg)
Client Side JavaScript
• ������– History• Window�history����
• back() ��• forward() ��
43directec co.,ltd. NCSJ2018
![Page 45: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/45.jpg)
Client Side JavaScript
• ��������– location����������� �
location = “sample.html”;– reload() ����
location.reload();– replace() ����
location.replace(url)url���� �������������history������
44directec co.,ltd. NCSJ2018
![Page 46: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/46.jpg)
Client Side JavaScript
• �!$���–�!$��$�#• �!$��$�#�������������
– HTML�• �!$��$�#�HTML�����"%����
– #������� �
45directec co.,ltd. NCSJ2018
![Page 47: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/47.jpg)
Client Side JavaScript
• �� ��–���������� ��• onclick• onsubmit• ondblclick• onmousemove• onmouseover• onmouseout• onmousedown• onmouseup
46directec co.,ltd. NCSJ2018
![Page 48: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/48.jpg)
Client Side JavaScript
• ������– onkeydown– onkeypress– onkeyup
47directec co.,ltd. NCSJ2018
![Page 49: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/49.jpg)
)!-,/(���
• 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
![Page 50: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/50.jpg)
����� ���
• Document���� – ���
• write���• open���
– �����• bgColor• cookie• domain• lastModified• referrer• title• URL
49directec co.,ltd. NCSJ2018
![Page 51: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/51.jpg)
���� ���
• Document���� –�������• anchors[]• applets[]• forms[]• images[]• links[]
50directec co.,ltd. NCSJ2018
![Page 52: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/52.jpg)
"�'&)!���
• 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
![Page 53: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/53.jpg)
"�'&)!��
• 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
![Page 54: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/54.jpg)
W3C DOM
• W3C ���DOM–��������–���������• ���• ��
– DOM HTML API– DOM LEVEL
53directec co.,ltd. NCSJ2018
![Page 55: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/55.jpg)
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
![Page 56: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/56.jpg)
W3C DOM
• ���– ������• Element• Text• Document• Comment• DocumentFragment• Attr
55directec co.,ltd. NCSJ2018
![Page 57: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/57.jpg)
W3C DOM• ���������
Document
Node
CharacterData Element Attr
CommentTextHTMLDocument HTMLElement
HTMLHeadElement HTMLBodyElement HTMLParagraphElement
56directec co.,ltd. NCSJ2018
![Page 58: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/58.jpg)
W3C DOM
• Element��• � �����Element,.+�!%&('��#
–���%&('• �� / getAttribute()-)*+• �� / setAttribute()-)*+• �� / removeAttribute()-)*+
• Attr��"��– getAttributeNode()-)*+$��– "����$�#�����#
57directec co.,ltd. NCSJ2018
![Page 59: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/59.jpg)
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
![Page 60: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/60.jpg)
W3C DOM
• DOM HTML API– DOM��• XML / HTML�������
– Node, Element, Document
• HTML ������– HTMLDocument
» HTML���������– HTMLElement
» HTML����������������
59directec co.,ltd. NCSJ2018
![Page 61: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/61.jpg)
HTTP���
• Ajax• XMLHttpRequest• ������• ���� ��• ����� ��
60directec co.,ltd. NCSJ2018
![Page 62: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/62.jpg)
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
![Page 63: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/63.jpg)
HTTP���
• XMLHttpRequest– Client Side JavaScript ��HTTP�–������������HTTP�������– Ajax��������
62directec co.,ltd. NCSJ2018
![Page 64: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/64.jpg)
HTTP���
• XMLHttpRequest���������–������!�� ������� ��– IE7����������
var request = new XMLHttpRequest();
– IE7��var request = new ActiveXObject(“Msxml2.XMLHTTP”);
var request = new ActiveXObject(“Miscrosoft.XMLHTTP”);
63directec co.,ltd. NCSJ2018
![Page 65: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/65.jpg)
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
![Page 66: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/66.jpg)
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
![Page 67: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/67.jpg)
HTTP��
• ���)#'*#– XMLHttpRequest�open()($%&�����"���!������)#'*#"��� ����
• +�������true"�� • � ������true��
66directec co.,ltd. NCSJ2018
![Page 68: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/68.jpg)
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
![Page 69: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/69.jpg)
HTTP��
• XMLHttpRequest– readyState�����0 open()�������!����1 send()�������!����2 &"%'"���������
3 $(#���*IE�FireFox������ � �
4 ���
68directec co.,ltd. NCSJ2018
![Page 70: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/70.jpg)
HTTP���
• HTTP HEAD#��� –����URL�"������
• HTTP�%!%��"��%��� ��
• �$�$�����
– XMLHttpRequest����HTTP HEAD�
XMLHttpRequest request = new XMLHttpRequest();request.open(“HEAD”, url);request.send(null);
69directec co.,ltd. NCSJ2018
![Page 71: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/71.jpg)
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
![Page 72: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/72.jpg)
HTTP���
• JSON����������� ��– JSON : JavaScript Object Notation
{"name": ”Soseki Natsume”,"books": [
”Neko”,”Sanshiro”,“Sorekara”,“Kokoro”
]}
71directec co.,ltd. NCSJ2018
![Page 73: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/73.jpg)
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
![Page 74: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/74.jpg)
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
![Page 75: JavaScript - NCSJfor/in •for / in –for(variable in object) statement •variable: •object : •statement : vararray = [1,2,3,4,5,6,7,8,9,0];](https://reader030.fdocuments.net/reader030/viewer/2022041017/5ecab69aef419d3180618c07/html5/thumbnails/75.jpg)
NCSJNovice Class Seminar – Java Programmer
��� ������
JavaScript����