Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Guidelines and tips
Prepare for your exams
Study with the several resources on Docsity
Earn points to download
Earn points by helping other students or get them with a premium plan
Community
Ask the community
Ask the community for help and clear up your study doubts
University Rankings
Discover the best universities in your country according to Docsity users
Free resources
Our save-the-student-ebooks!
Download our free guides on studying techniques, anxiety management strategies, and thesis advice from Docsity tutors
Exploring Java Script - Introduction to Java Script - Lecture Slides, Slides of Javascript programming
Here is my collection on JavaScript lectures. It includes tutorials as well as general concepts explanations. Particularly these slides contain: Exploring Java Script, Low-Level Print, Document, Html Tag, Syntax Errors, Seeing the Error, Console Logging, Variable Names, Assignment Operators, Determining Type
Typology: Slides
2013/2014
1 / 48
Related documents
Partial preview of the text
Download Exploring Java Script - Introduction to Java Script - Lecture Slides and more Slides Javascript programming in PDF only on Docsity! Exploring JavaScript docsity.com <html> <head><title>Hello World</title></head><body><p>One Paragraph</p><script type="text/javascript"> document.write("<p>Hello World</p>")</script> <noscript>Your browser doesn't support or has disabled JavaScript.</noscript><p>Second Paragraph</p></body> </html> js-01.htm docsity.com Including JavaScript • Three Patterns • As part of an event (i.e. onclick) in an HTML tag • Inline within the document • From a file docsity.com <html> <head><title>Hello World</title></head><body><p>One Paragraph</p><p><a href="js-01.htm" onclick="alert('Hi'); return false;">Click Me</a></p><p>Third Paragraph</p></body> </html> JavaScript on a tag js-03.htm docsity.com <html> <head><title>Hello World</title></head><body><p>One Paragraph</p><script type="text/javascript"> <!-- document.write("<p>Hello World</p>") // --></script> <p>Second Paragraph</p></body> </html> JavaScript inline that will pass validation docsity.com <p>One Paragraph</p><script type="text/javascript"> alert("I am broken'); alert("I am good");</script> <p>Two Paragraph</p><script type="text/javascript"> alert("Second time");</script> <p>Three Paragraph</p> js-05.htm docsity.com Seeing the Error • Since the end-user really cannot take any action to fix the JavaScript coming as part of a web page, the browser eats the errors. • As a developer, we need to look for the errors - sometimes it takes a minute to even remember to check for a JS error docsity.com http:/ /localhost/si$72/php-14/js-O5.htm
Web Inspector
| Gay it
sz! — 7s =e » a
Search Console
Elements Resources Network Scripts
bal Errors Warnings Logs
@ SyntaxError: Unexpected EOF js-85.htm:3
Mozilla Firefox
4) 7 ate ft Ce http: //localhost/si572/php-14/js—05.htm Gr
@ Disable » J Cookies + Y C55 + [2 Forms + [EY Images ~ Information + C4 Miscellaneous + 4” Outline + [q) Resize + 2 Tools ~ View Soured
os
f) http:/ /localhost...hp-14/js-O05.htm + _
One Paragraph
Two Paragraph
Three Paragraph
a ae *| Consoles | HTML CSS Script DOM Net YSlow
le Clear Persist Profile : @ ) Errors Warnings Info Debug Info
eo unterminated string litera
alert("I am broken");
(O 3% MB YSlow 3.175s €9 1 Error
docsity.com
Console is Not Always There • Some browsers only define the console if a debugger is running window.console && console.log(...) if (typeof console == "undefined") { this.console = {log: function() {} } http://stackoverflow.com/questions/3326650/console-is-undefined-error-for-internet- explorer docsity.com Using the Debugger • Add the FireBug FireFox Extension • Enable FireBug, reload • Set Breakpoint, and reload again docsity.com aoe Hello World
|
OD. C2) C20) (te) C60 nutp:/slocathost/si572 /php-14/js-01.htm
a Disable + § Cookies + CSS + = Forms + [J Images ~ (Qj Information + {4 Miscellaneous + 7 Outline ~ || Resize + 2 Tools + =) View Source
(=) Hello World
One Paragraph
| Hello World
| Second Paragraph
1 Pa *| Console HTML CSS Scripte DOM Net YS5ilow
static - js-Ol.ptm * ep ™ 1 Watch | Stack Breakpoints
<html> New watch expression...
<head>
<titlesHe —focalhost/siS72/php-14
</head>
<body>
<p>One Paragraph</p> - -
<script type="text/javascript"> http:/ flocalhost/si572/php-14/js-Ol.htm
document .write("<p>Hello World</p>"3
</script>
Type any key to filter list
2 5% WB Slow 23.9275 ay
docsity.com
Hello World
<4 | ane ft Cf http: //localhost/si572/php-14/js—O1.htm (2a,
@ Disable » QF Cookies + Y CSS + | Forms + [Ey Images + Information + £4 Miscellaneous » 4” Outline + (iq) Resize + %° Tools ~ View Source *
f) Hello World + =
One Paragraph
Hello World
Second Paragraph
*) Console HTML CSS Script+ | DOM Net
static * js-Ol.htm * js-O1.htm Watch~+ | Stack Breakpoints
<html> New watch expression...
<head>
LesHello World</title>
«</head>
<body>
<p>One Paragraph</p>
<script type="text/javascript”>
document .write("<p>Hello World</p>"}
</script>
(0 92 We Slow 36.825 #
docsity.com
JavaScript Language docsity.com Comments in JavaScript = Awesome // This is a comment /* This is a section of multiline comments that will not be interpreted */ docsity.com Variable Names • Valid Characters: a-z, A-Z, 0-9, _ and $ • Must not start with a number • Names are case sensitive • Starting with a dollar sign is considered "tacky" docsity.com String Constants • Double or Single Quotes - Single quotes are used typically in JavaScript and we let HTML use double quotes to keep our minds a little sane. • Escaping - done using the back-slash character <script type="text/javascript"> alert('One line\nTwoLine');</script> js-08.htm docsity.com Numeric Constants • As you would expect docsity.com Table 14-3. Assignment operators
Operator Example Equivalent to
j=99 j = 99
jt=2 j=j+2
jt= ‘string’ j=jt
‘string’
j-=12 =j- 12
j *=2 j=j*2
j/=6 j= j/6
j 4=7 j=j27
docsity.com
Table 14-4. Comparison operators
Operator
Description
ls equal to
ls not equal to
ls greater than
Is less than
ls greater than or equal to
|s less than or equal to
Is equal to (and of the same type)
Is not equal to (and of the same type)
Example
j == 42
j!=17
j>o
j<100
j>=23
docsity.com
Logical Operators
Table 14-5. Logical operators
Operator Description Example
And j == 1&&k ==
Or j < 100||j > 0
Not | (j ==k)
docsity.com
Variable Conversion • If a string cannot be converted to a number you end up with "Not a Number" or "NaN" - it is a value but all operations with NaN as a operand end up with NaN (i.e. it is sticky) docsity.com Determining Type • JasvScript provides a unary typeof operator that returns the type of a variable or constant as a string docsity.com Functions • Functions use a typical syntax and are indicated using the function keyword • The return keyword functions as expected js-09.htm docsity.com DOM Document Object Model docsity.com Document Object Model • JavaScript can manipulate the current HTML docment • The “Document Object Model” tells us the syntax to use to access various “bits” of the current screen to read and/or manipulate • You can even find pieces of the model by id attribute and change them • We can read and write the DOM from JavaScript http://en.wikipedia.org/wiki/Document_Object_Model docsity.com docsity.com Using getElementById() • In order not to have to traverse each unique DOM, we use a function call that all browsers support that allows us to bypass the DOM structure and jump to a particular tag within the DOM and manipulate that tag docsity.com <p>Hello <b><span id="person">Chuck</span></b> there.</p> <script type="text/javascript">st = document.getElementById('person').innerHTML;window.console && console.log("ST = "+st); alert("Waiting...");document.getElementById('person').innerH TML = 'Joseph';window.console && console.dir(document.getElementById('person'));</script> js-12.htm docsity.com Updating the Browser Document <p> <a href="#" onclick="document.getElementById('stuff').innerHTML = 'BACK';">BACK</a> <a href="#" onclick="document.getElementById('stuff').innerHTML = 'FORTH';">FORTH</a> </p> <p> Hello <b><span id="stuff">Stuff</span></b> there. </p> This is one reason why you can only have one id per document. http://www.dr-chuck.com/javascript/four.htm docsity.com