1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا...
-
Upload
lambert-harris -
Category
Documents
-
view
220 -
download
3
Transcript of 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا...
![Page 1: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/1.jpg)
1
HTML Documents and JavaScriptHTMLجاوا اسکریپت و
بخش هایی از جاوا اسکریپت نوشته شده توسطTom Horton & Alfred C. Weaver
2تکمیل ، ویرایش و ترجمه : گروه طایفی ، نوری ، پژاوند ، طیبی، )
(اسدزاده
![Page 2: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/2.jpg)
2
HTMLپیش زمینه ای درباره Many “markup” languages in the
past SGML: Standard Generalized
Markup Language HTML (Hypertext Markup Language)
based on SGML XML (eXtensible Markup Language)
“replaces” SGML XHTML is replacing HTML
![Page 3: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/3.jpg)
3
تگ ها و اجزای آنها Example of an element:
<name attr1=“attrval”>content</name>
Begin and end tags set off a section of a document Has a semantic property by tag-name Modified by attributes
“content” can contain other elements Empty-elements: no end tag
<br /> <img … /> Note space before />
![Page 4: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/4.jpg)
4
htmlمقدمات ساختاری Comments:
<!-- … --> Example:
<html> <head> … </head>
<body> …. </body> </html>
<--- title, meta-tags, etc. (not displayed)
<--- main content (displayed)
![Page 5: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/5.jpg)
5
یک مثال کامل<html><head><title>An Example</title></head><body><h3><hr>An Example</h3><p align="left"> <font face="Comic Sans MS"
size="4"><b> Hello World!</b></font></p><p align="right"><font size="5"><u>I am
21.</u></font></p> <!-- see next column -->
<p> <ol type="I" start=7> <li><font
color=#00FF00>Green</font></li>
<li>Yellow</li> <ul type=square> <li>John</li> <li>Mike</li> </ul> </ol></p></body></html>
![Page 6: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/6.jpg)
6
خروجی مثال
![Page 7: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/7.jpg)
7
مقدمات Text display:
<em>, <strong>, <em> Structure:
<h1>, <h2>, <h3> <p> <ul>, <ol>, <blockquote>
Attributes: Align, text, bgcolor, etc.
![Page 8: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/8.jpg)
8
مقدمات تگ ها Links:
<a href=“…”>…</a> Images:
<img src=“…”> an empty tag Tables
Use an editor! Forms: later
![Page 9: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/9.jpg)
9
زبان برنامه نویسی شی گرا An model for describing HTML
documents (and XML documents) A standard (ok, standards) Independent of browser, language
(ok, mostly)
APIs in JavaScript, for Java, etc.
![Page 10: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/10.jpg)
10
DOM
You getanything youwant from…
More info: http://en.wikipedia.org/wiki/Document_Object_Model
![Page 11: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/11.jpg)
11
W3C استاندارهای XML, XHTML CSS, XSL XSLT DOM ECMAScript etc
![Page 12: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/12.jpg)
12
جاواسکریپت An example of a “scripting”
langauge that is embedded in HTML documents The browser’s display engine must
distinguish from HTML and Script statements
Others like this: PHP (later in the course)
![Page 13: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/13.jpg)
13
تاریخچه JavaScript created by Netscape JScript created by Microsoft IE and Netscape renderings are slightly
different Standardized by European Computer
Manufacturers Association (ECMA) http://www.ecma-international.
org/publications /standards/Ecma-262.htm
![Page 14: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/14.jpg)
14
قالب عمومی <!doctype ...> <html> <Head> <Title> Name of web page </title> <script type="text/javascript"> ...script goes here </script> </head <body> ...page body here: text, forms, tables ...more JavaScript if needed ...onload, onclick, etc. commands here </body> </html>
![Page 15: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/15.jpg)
15
ساختار زبانی Case sensitive Object oriented Produces an HTML document Dynamically typed Standard operator precedence Overloaded operators Reserved words
![Page 16: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/16.jpg)
16
ساختار زبانی Division with / is not integer division Modulus (%) is not an integer operator 5 / 2 yields 2.5 5.1 / 2.1 yields 2.4285714285714284 5 % 2 yields 1 5.1 % 2.1 yields 0.8999999999999995
![Page 17: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/17.jpg)
17
ساختار زبانی " and ' can be used in pairs Scope rules for variables Strings are very common data types Rich set of methods available Arrays have dynamic length Array elements have dynamic type Arrays are passed by reference Array elements are passed by value
![Page 18: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/18.jpg)
18
دستورات مهم در جاوا اسکریپت code placement document.writeln document tags window.alert user input/output parseInt and
parseFloat arithmetic arithmetic comparisons for loops
while loops do-while loops if-else variable values in
tags math library switch break labeled break continue Booleans
![Page 19: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/19.jpg)
19
دستورات مهم در جاوا اسکریپت functions random numbers rolling dice form input form output submit buttons games
arrays searching strings substrings string conversions markup methods
![Page 20: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/20.jpg)
20
فراخوانی جاوا اسکریپت Create functions (non-OO style)
Define in header Or load a .js file in header:
<script type="text/javascript" language="javascript" src="mylib.js">
Functions called in <BODY> Often in response to events, e.g.
<input type="button"… onclick="myFunc(…);"> Global variables
![Page 21: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/21.jpg)
21
document.writeln
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><!– Welcome to JavaScript --><HEAD><TITLE> Welcome to JavaScript </TITLE> <SCRIPT TYPE="text/javascript">
document.writeln( "<FONT COLOR='magenta'><H1>Welcome to ",
"JavaScript Programming!</H1></FONT>" );</SCRIPT></HEAD><BODY></BODY></HTML>
![Page 22: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/22.jpg)
22
document.write
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD> <TITLE> Using document.write </TITLE><SCRIPT TYPE="text/javascript">
document.write ( "<H1>Welcome to ");document.writeln( "JavaScript Programming!</H1>" );
</SCRIPT></HEAD><BODY></BODY></HTML>
![Page 23: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/23.jpg)
23
window.alert
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> Using window.alert </TITLE><SCRIPT TYPE="text/javascript">
window.alert( "Welcome to\nJavaScript\nProgramming!" );</SCRIPT></HEAD><BODY><P>Click Refresh (or Reload) to run this script again.</P></BODY></HTML>
![Page 24: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/24.jpg)
24
input/output<SCRIPT TYPE="text/javascript">
var firstNumber, // first string entered by usersecondNumber, // second string entered by usernumber1, // first number to addnumber2, // second number to addsum; // sum of number1 and number2// read in first number from user as a stringfirstNumber = window.prompt("Enter first integer", "0" ); // read in second number from user as a stringsecondNumber = window.prompt( "Enter second integer",
"0" );// convert numbers from strings to integersfirstNumber = parseInt(firstNumber);number2 = parseInt( secondNumber );// add the numberssum = firstNumber + number2;// display the resultsdocument.writeln( "<H1>The sum is " + sum + "</H1>" );
</SCRIPT>
![Page 25: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/25.jpg)
25
Functions<SCRIPT TYPE = "text/javascript">
var input1 = window.prompt( "Enter first number", "0" );
var input2 = window.prompt( "Enter second number", "0" );
var input3 = window.prompt( "Enter third number", "0" );
var value1 = parseFloat( input1 );var value2 = parseFloat( input2 );var value3 = parseFloat( input3 );var maxValue = maximum( value1, value2, value3 );document.writeln( "First number: " + value1 +
"<BR>Second number: " + value2 +
"<BR>Third number: " + value3 + "<BR>Maximum is: " + maxValue );
// maximum method definition (called from above)function maximum( x, y, z ) {
return Math.max( x, Math.max( y, z ) ); }</SCRIPT>
![Page 26: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/26.jpg)
26
Random Numbers<SCRIPT TYPE="text/javascript">
var value;document.writeln( "<H1>Random Numbers</H1>" + "<TABLE BORDER = '1' WIDTH = '50%'><TR>" );for ( var i = 1; i <= 20; i++ ) { value = Math.floor( 1 + Math.random() * 6 );
document.writeln( "<TD>" + value + "</TD>" ); if ( i % 5 == 0 && i != 20 ) document.writeln( "</TR><TR>" );}document.writeln( "</TR></TABLE>" );
</SCRIPT>
![Page 27: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/27.jpg)
27
Roll the Die<SCRIPT TYPE="text/javascript">
var frequency1 = 0, frequency2 = 0,frequency3 = 0, frequency4 = 0,frequency5 = 0, frequency6 = 0, face;// summarize resultsfor ( var roll = 1; roll <= 6000; ++roll ) { face = Math.floor( 1 + Math.random() * 6 ); switch ( face ) { case 1: ++frequency1; break; case 2: ++frequency2; break; case 3: ++frequency3; break; case 4: ++frequency4; break; case 5: ++frequency5; break; case 6: ++frequency6; break; }}document.writeln( "<TABLE BORDER = '1' WIDTH = '50%'>" ); .....
![Page 28: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/28.jpg)
28
Rules of Craps First roll:
7 or 11 is a win 2, 3, or 12 is a lose otherwise, roll becomes your point
Subsequent rolls: rolling your point is a win 7 or 11 is a lose otherwise continue to roll
![Page 29: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/29.jpg)
29
Craps
<SCRIPT TYPE="text/javascript">// variables used to test the state of the game var WON = 0, LOST = 1, CONTINUE_ROLLING = 2;// other variables used in programvar firstRoll = true, // true if first rollsumOfDice = 0, // sum of the dicemyPoint = 0, // point if no win/loss on first rollgameStatus = CONTINUE_ROLLING; // game not over yet
![Page 30: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/30.jpg)
30
Craps// process one roll of the dicefunction play() { if ( firstRoll ) { // first roll of the dice sumOfDice = rollDice(); switch ( sumOfDice ) { case 7: case 11: // win on first roll gameStatus = WON; document.craps.point.value = ""; // clear point field break; case 2: case 3: case 12: // lose on first roll gameStatus = LOST; document.craps.point.value = ""; // clear point field break;
![Page 31: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/31.jpg)
31
Crapsdefault: // remember point gameStatus = CONTINUE_ROLLING; myPoint = sumOfDice; document.craps.point.value = myPoint; firstRoll = false; } } else { sumOfDice = rollDice(); if ( sumOfDice == myPoint ) gameStatus = WON; else if ( sumOfDice == 7 ) gameStatus = LOST; }
![Page 32: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/32.jpg)
32
Crapsif ( gameStatus == CONTINUE_ROLLING ) window.alert ("Roll again"); else { if ( gameStatus == WON ) { window.alert ("Player wins. " + "Click Roll Dice to play again."); document.craps.point.value = " "; } else { window.alert ("Player loses. " + "Click Roll Dice to play again."); document.craps.point.value = " "; } firstRoll = true; }}
![Page 33: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/33.jpg)
33
Craps
// roll the dicefunction rollDice() { var die1, die2, workSum; die1 = Math.floor( 1 + Math.random() * 6 ); die2 = Math.floor( 1 + Math.random() * 6 ); workSum = die1 + die2; document.craps.firstDie.value = die1; document.craps.secondDie.value = die2; document.craps.sum.value = workSum; return workSum;}</SCRIPT>
![Page 34: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/34.jpg)
34
Poker Hand
<SCRIPT TYPE="text/javascript">function rand1toN(N) { return Math.floor( 1+Math.random()*N ); }function dealcard(card) { var rank = new Array(0,"A","2","3","4","5","6","7", "8","9","T","J","Q","K"); var suit = new Array(0, "Spades", "Hearts", "Diamonds", "Clubs"); card[0] = rank[rand1toN(13)]; card[1] = suit[rand1toN(4)];}
![Page 35: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/35.jpg)
35
Poker Hand
var card = new Array(2);var player = new Array(10);var dealer = new Array(10);for (var i=0; i<=4; i++) { dealcard(card); player[i*2] = card[0]; player[i*2+1] = card[1]; dealcard(card); dealer[i*2] = card[0]; dealer[i*2+1] = card[1];}
![Page 36: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/36.jpg)
36
Poker Handdocument.writeln("<H1> PLAYER </H1>");document.writeln("<TABLE BORDER='1' >");for (var i=0; i<=4; i++) { document.writeln("<TR><TD><P>" + player[i*2] + "</TD>" + "<TD><P>" + player[i*2+1] + "</TD></TR>");}document.writeln("</TABLE> </HTML>"); </SCRIPT>
![Page 37: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/37.jpg)
37
Character Processing
<SCRIPT TYPE="text/javascript">var s = "ZEBRA";var s2 = "AbCdEfG";document.writeln( "<P> Character at index 0 in '"+ s + '" is " + s.charAt( 0 ) );document.writeln( "<BR>Character code at index 0 in '" + s + "' is " + s.charCodeAt( 0 ) + "</P>" ); document.writeln( "<P>'" + String.fromCharCode( 87, 79, 82, 68 ) + "' contains character codes 87, 79, 82 and 68</P>" );document.writeln( "<P>'" + s2 + "' in lowercase is '" + s2.toLowerCase() + "'" );document.writeln( "<BR>'" + s2 + "' in uppercase is '" + s2.toUpperCase() + "'</P>" );</SCRIPT>
![Page 38: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/38.jpg)
38
Dates and Times<SCRIPT LANGUAGE = "JavaScript">var current = new Date();document.writeln(current);document.writeln( "<H1>String representations and valueOf</H1>" );document.writeln( "toString: " + current.toString() + "<BR>toLocaleString: " + current.toLocaleString() + "<BR>toUTCString: " + current.toUTCString() + "<BR>valueOf: " + current.valueOf() ); document.writeln( "<H1>Get methods for local time zone</H1>" );document.writeln( "getDate: " + current.getDate() + "<BR>getDay: " + current.getDay() + "<BR>getMonth: " + current.getMonth() + "<BR>getFullYear: " + current.getFullYear() + "<BR>getTime: " + current.getTime() + "<BR>getHours: " + current.getHours() + "<BR>getMinutes: " + current.getMinutes() + "<BR>getSeconds: " + current.getSeconds() + "<BR>getMilliseconds: " + current.getMilliseconds() + "<BR>getTimezoneOffset: " + current.getTimezoneOffset() );
![Page 39: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/39.jpg)
39
Dates and Timesdocument.writeln( "<H1>Specifying arguments for a new Date</H1>" ); var anotherDate = new Date( 1999, 2, 18, 1, 5, 3, 9 );document.writeln( "Date: " + anotherDate );document.writeln( "<H1>Set methods for local time zone</H1>" ); anotherDate.setDate( 31 );anotherDate.setMonth( 11 );anotherDate.setFullYear( 1999 );anotherDate.setHours( 23 ); anotherDate.setMinutes( 59 );anotherDate.setSeconds( 59 );document.writeln( "Modified date: " + anotherDate );</SCRIPT>
![Page 40: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/40.jpg)
40
Events
JavaScript can execute a statement (typically, call a function) when an event occurs
<… oneventname="javascript stmt;"> <BODY … ONLOAD="func();"> <INPUT TYPE="submit" …
ONSUBMIT="f();">
![Page 41: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/41.jpg)
41
Events onsubmit - call when submit button is clicked onclick - call when this button is clicked onreset - call when the reset button is clicked onload - call after page loads onmouseover - call when mouse pointer enters image area onmouseout - call when mouse pointer leaves image area onfocus - call when control receives focus onblur - call when a control loses focus onchange - call when a control loses focus and the value of its
contents has changed many more
![Page 42: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/42.jpg)
HTML Control JavaScript can change attr of Dom
getElementById getElementsByClassName getElementsByName
document.getElementById(‘pId’).innerHTML=“My Name Is Masoud Tayefi”;
document.getElementById(‘inputId’).value;
42
![Page 43: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/43.jpg)
HTML Control
43
name description
getElementById returns array of descendents with the given tag, such as "div"
getElementsByTagName returns array of descendents with the given tag, such as "div"
getElementsByName returns array of descendents with the given name attribute (mostly useful for accessing form controls)
querySelector * returns the first element that would be matched by the given CSS selector string
querySelectorAll * returns an array of all elements that would be matched by the given CSS selector string
![Page 44: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/44.jpg)
jQuery jQuery is a cross-platform
JavaScript library designed to simplify the client-side scripting of HTML
44
![Page 45: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/45.jpg)
jQuery Include <script src =
"https://code.jquery.com/jquery-latest.min.js"> </script>
45
![Page 46: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/46.jpg)
We cannot use the DOM before the page has been constructed. jQuery gives us a more compatibile way to do this. The DOM way
The direct jQuery translation
The jQuery way
window.onload = function() { // do stuff with the DOM }
$(document).ready(function() { // do stuff with the DOM });
$(function() { // do stuff with the DOM });
![Page 47: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/47.jpg)
Dom Tree
47
![Page 48: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/48.jpg)
jQuery Control
48
// id selector var elem = $("#myid");
// group selector var elems = $("#myid, p");
// context selector var elems = $("#myid < div p"); •
// complex selector var elems = $("#myid < h1.special:not(.classy)");
![Page 49: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/49.jpg)
jQuery Selector
49
DOM method jQuery equivalent
getElementById("id") $("#id")
getElementsByTagName("tag")
$("tag")
getElementsByName("somename")
$("[name='somename']")
querySelector("selector") $("selector")
querySelectorAll("selector") $("selector")
![Page 50: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/50.jpg)
The jQuery object
50
The $ function always (even for ID selectors) returns an array-like object called a jQuery object.
The jQuery object wraps the originally selected DOM objects.
You can access the actual DOM object by accessing the elements of the jQuery object.// false
document.getElementById("id") == $("#myid"); document.querySelectorAll("p") == $("p"); // true document.getElementById("id") == $("#myid")[0]; document.getElementById("id") == $("#myid").get(0); document.querySelectorAll("p")[0] == $("p")[0];
![Page 51: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/51.jpg)
51
You can use querySelectorAll() and querySelector() on any DOM object.
When you do this, it simply searches from that part of the DOM tree downward.
Programmatic equivalent of a CSS context selectorvar list = document.getElementsByTagName("ul")[0]; var specials = list.querySelectorAll('li.special');
DOM context identification
![Page 52: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/52.jpg)
find / context parameter
52
jQuery gives two identical ways to do contextual element identificationvar elem = $("#myid");
// These are identical var specials = $("li.special", elem); var specials = elem.find("li.special");
![Page 53: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/53.jpg)
Types of DOM nodes
53
<p>
This is a paragraph of text with a
<a href="/path/page.html">link in it</a>. </p>
![Page 54: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/54.jpg)
Traversing the DOM tree
54
![Page 55: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/55.jpg)
Scriptingvar x,y;if (self.innerHeight) { // all except Explorer x = self.innerWidth; y = self.innerHeight;}else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode x = document.documentElement.clientWidth; y = document.documentElement.clientHeight;}else if (document.body) { // other Explorers x = document.body.clientWidth; y = document.body.clientHeight;}
55
var x = $(window).width();var y = $(window).height();
![Page 56: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/56.jpg)
jQuery CSS Selectors element {} #id {} .class {} selector1, selector2
{} ancestor descendant
{} parent > child {} :nth-child() {}
56
$('element') $('#id') $('.class') $('selector1, selector2') $('ancestor descendant') $('parent > child') $(':nth-child(n)')
![Page 57: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/57.jpg)
CSS Attribute Selectors
57
$('input[name=firstname\\[\\]]') $('[title]') has the attribute $('[attr="val"]') attr equals val $('[attr!="val"]') attr does not equal val $('[attr~="val"]') attr has val as one of
space-sep. vals $('[attr^="val"]') attr begins with val $('[attr$="val"]') attr ends with val $('[attr*="val"]') attr has val anywhere
within
![Page 58: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/58.jpg)
Custom Form Selectors $('div.myclass :checkbox') $(':input') <input>, <textarea>,
<select>, <button> $(':text') <input type="text"> $(':radio') <input type="radio"> $(':button') <input type="button">,
<button> $(':selected') <option selected="selected"> etc.
58
![Page 59: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/59.jpg)
Chaining
59
$('a').parent('li').siblings().find('a')
$('a').removeClass('old').addClass('new');$('a').addClass('foo').parent('li').removeClass('foo')
var lis = $('.container li:first').addClass('first-li') .next() .addClass('second-li').end() .nextAll() .addClass('not-first-li').end(); // unnecessary; added for symmetry
![Page 60: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/60.jpg)
Looping
60
$('li').removeClass('myclass'); //implicit
$('li').each(function(index) { //explicit $(this).append( ' #' + (index+1) );});
![Page 61: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/61.jpg)
jQuery Samples
$('#textbox').hide();
var h1 = document.CreateElement("h1"); h1.innerHTML = "my text"; document.getElementsByTagName('body')[0].appendChild(h1); $('body').append( $("<h1/>").html("my text") ;
$(document).ready(function(){ //Script goes here });
$("h1.mainTitle") $("h1.mainTitle#firstHeading")
61
![Page 62: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/62.jpg)
jQuery Samples
62
![Page 63: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/63.jpg)
jQuery Samples
63
![Page 64: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/64.jpg)
jQuery Event
64
![Page 65: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/65.jpg)
jQuery Event
65
![Page 66: 1 HTML Documents and JavaScript جاوا اسکریپت و HTML بخش هایی از جاوا اسکریپت نوشته شده توسط Tom Horton & Alfred C. Weaver تکمیل ،](https://reader035.fdocuments.us/reader035/viewer/2022062519/5697c0201a28abf838cd1f3c/html5/thumbnails/66.jpg)
با تشکر از حوصله و تحمل شماوالسالم
66