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
HTML and CSS - 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: HTML and CSS, History, Extracting Data, Original Html, Variables, Conditional Statements, Javascript Functions
Typology: Slides
2013/2014
1 / 62
Related documents
Partial preview of the text
Download HTML and CSS - Introduction to Java Script - Lecture Slides and more Slides Javascript programming in PDF only on Docsity! HTML/JavaScript/CSS docsity.com History • What is the relationship between: • SGML • HTML • XHTML • CSS • JavaScript docsity.com History • Sample HTML File • <FONT SIZE=14 FACE=Swing> • <B>Bryan Moore</B><BR> • </FONT> • <FONT SIZE=12 FACE=Textile> • 1234 Sunset Ave. <BR> • Walla Walla, WA 12345 <BR> • (123)123.4567<BR> • </FONT> Web Applications and Real World Design - Knuckles docsity.com History Web Applications and Real World Design - Knuckles Browser parse tree docsity.com History • Problems with extracting data • Need to write a computer program to extract the names and addresses by selecting text strings following font tags • Content and structure of document become intertwined • Not the intention of SGML and original HTML • Cascading Style Sheets • Attempt to separate content and style docsity.com History • Extensible Markup Language XML • Extensible- can create own tags • Complete separation of content and style Web Applications and Real World Design - Knuckles docsity.com History • Releases • HTML 4.0 1997 • XML 1.0 1998 • XML and HTML need to better cooperate • XHTML 1.0 2000 • XHTML • Contains elements and attributes of HTML • Elements must have closing tags • Lowercase • Attributes must have values • Attributes in single or double quotes • http://www.w3schools.com/xhtml/default.asp docsity.com HTML Forms and JavaScript • http://www.sis.pitt.edu/~perkoski/is10/forms.html • http://www.w3schools.com/html/html_forms.asp • Client Server Model • Client Side Processing • JavaScript downloaded from web page and processed by the client – typically form checking • JavaScript can interact directly with form data • Server Side processing • Information from a form sent to server for processing • PHP Perl C++ • Server can interact directly with the form data docsity.com What is JavaScript • Syntax is similar to Java, but it’s not Java per se • Usually JavaScript code is embedded within HTML code using the script tag: • Can have more than one pair of script tags in a page • Semicolons: C++ and JAVA require them but in JavaScript it’s optional docsity.com What is JavaScript • HelloWorld example program… • <html> • <head><title>JavaScript HelloWorld!</title></head> • <body> • <script language="JavaScript"> • • document.write('Javascript says "Hello World!"') • • </script> • </body> • </html> • Let’s open it in the browser docsity.com What is JavaScript • Javascript can be located in the head, body or external file • Head section • Ensures script is loaded before trigger event • Body section • Script executes when body loads • External • Allows scripts to run on several pages • Examples: • http://www.w3schools.com/js/js_whereto.asp docsity.com What is JavaScript • Now, let JavaScript generate HTML for us… • <html> • <head><title>JavaScript HelloWorld!</title></head> • <body> • <script laguage="JavaScript"> • • document.write("<h2>Javascript-Generated output:</h2> <p>This paragraph generated by JavaScript</p> • <p>It can even insert an image</p> • <img src='../assigns/RayWeb/images/cathedral.jpg' />") • • </script> • </body> • </html> • Let’s open it in the browser docsity.com Identifier Etiquette • Identifier– The name of a variable (or function) • Starts with a letter, can contains digits & underscores • Case Sensitive!! • Should be meaningful to someone reading your code • Good: accountBalance, amountDue • Bad: bal, due, • Just plain wrong: 2bOrNotToBe, +var, total-value docsity.com Variables • Must declare variables before they’re used in the program • Declare at the top of the program & terminate each statement with ‘;’ • Intialize variables when appropriate • Local variables (declared within a function) destroyed after function exit. • Can only be accessed within the function • Example – Note Assignments • var candyBarPrice = 2.50; • var taxRate = .075; • var candyBarsPurchased; docsity.com Conditional Statements--if if (some boolean expression is true){ execute the statements within the curly braces, otherwise skip to the first statement after the closing brace } Resume execution here in either case docsity.com Conditional Statements– if/else if (some boolean expression is true){ execute these statements, otherwise skip to ‘else’ clause } else { execute these statements if boolean expression is false } Resume execution here in either case docsity.com Conditional Test Program • Diagnostic messages indicate flow of control 1. var variable1 = 1; var variable2 = 2; 2. 3. if(variable1 >= 0){ 4. document.write(“<p> 1 is greater than 0 </p>"); 5. } 6. document.write(“<p>Resuming execution after 'if' 7. statement</p>"); 8. 9. if(variable1 > variable2){ 10. document.write(“<p>1 is greater than 2</p>"); 11. } 12. else { 13. document.write(“<p>2 is greater than 1</p>"); 14. } 15. document.write("Resuming execution after 'if/else‘ 16. statement</p>"); docsity.com JavaScript Functions – Basic Principles • Encapsulation • Functions encapsulate a specific capability or feature • Function name allows us to access a function in our program • Parameterization • We can customize the function’s result by passing in different values each time we use it • Must use functions to write serious software! docsity.com JavaScript Functions – Basic Principles • Reasons to use functions • Ease of communication • Problem simplification • Easier construction • Code readability • Reusability • Maintainability • In JS, functions are the primary encapsulation mechanism docsity.com JavaScript Functions – Syntax • JS function syntax function myFunctionName (list of parameters) { ….JS code here… } docsity.com JavaScript Functions -- Parameters • Passing parameters to the function • Parameters provide functions with input • Implicitly declared variables that can be accessed by code within function body • You provide actual input values when you call the function • Parameters are named variables separated by commas • Example, function findMaxValue(num1, num2, num3) docsity.com JavaScript Functions – Where to put? • Put functions within <script>….</script> tags within the <head> section of the web page <head> <script language=“JavaScript”> declare functions here…. </script> </head> docsity.com JavaScript Functions – Local Variables • If needed, you can declare local variables within a function • local variable is visible only within the function body after it’s declared • Commonly used to store results of an intermediate calculation docsity.com JavaScript Functions -- Return • Return keyword tells function to return some value and exit immediately • Function can have multiple return statements but only 1 can be executed in any given function call • Normally used to return the final result of a calculation to the calling program • For an example, see findMaxValue function docsity.com JavaScript Functions -- Return • Good Example • Uses var maxNumber in calling program • Function’s return value is assigned to maxNumber • Display of maxNumber has correct value for inputs • Code snippet • var x = 1, y = 4, z = 2; var maxNumber = findMaxNumber(x, y, z); document.write(“The maximum is: “ + maxNumber); docsity.com JavaScript Functions -- Return • The return must be handled properly or it will be ‘lost’ • Usually, you want to assign the result of a function to a variable • Bad Example1, • Declares var maxNumber in calling program, then displays it • Value is ‘undefined’ because maxNumber is never initialized & the return value is never assigned to it docsity.com JavaScript Functions – Global Variables • Global variables are those declared outside of functions • Global variables are ‘visible’ from anywhere in the program, including inside functions var globalHello = “Hello!”; function writeHello() { document.write(globalHello); } // outputs “Hello!” Example program docsity.com JavaScript Functions – Testing • Test each function thoroughly before proceeding with next programming task • Using multiple sets of inputs, be sure to test all possible outcomes • For each test, be sure calling program is properly handling return values docsity.com JavaScript Functions – Debugging • Use diagnostic output statements to trace program execution • Good places for diagnostic outputs • Just before entering function • Immediately upon entering function • Before/In/After complex logic or computation • Just before function return statement • Immediately after function returns to calling program docsity.com JavaScript and HTML Forms • Object Model for the Browser Window • Compound object structure is created when a web page loads into a browser • Hierarchy • Window is an object, the HTML document is an object and its elements are objects • These objects have primitives associated with them docsity.com JavaScript and HTML Forms • window [closed, location] • history [length] • document [bgColor, fgColor, URL, lastmodified,linkColor, vlinkColor] • images [properties] • links [properties] • frames [properties] • forms [properties] docsity.com JavaScript and HTML Forms • Window object is parent of structure • window.closed is primitive that is Boolean • window.location primitive contains string of the URL of the HTML file • window.document object is primary focus • When web page is loaded the HTML elements assign values to most of these window.document primitives • Often the word window is excluded as in document.write but need it if referring to multiple open windows • Properties can also be objects docsity.com JavaScript and HTML Forms • Methods • Behavior associated with an object • Essentially functions that perform an action • Some are built in and others user made • Built-In Methods of the window object • Confirm • Alert • Prompt docsity.com JavaScript and HTML Forms • User Events • An event occurs when a user makes a change to a form element • Ex. Click a button, mouseover an image • Detection of an event done by event handlers • Event handler is an attribute of the HTML button • <form> • <input type=button value=“please click” onclick=“function name()”> • </form> docsity.com JavaScript and HTML Forms • <HTML> • <HEAD> • <SCRIPT LANGUAGE=JavaScript><!-- • function changecolor(){ • document.bgColor="#ff0000"; • } • //--></SCRIPT> • </HEAD> • <BODY> • <P><FORM > • <P><INPUT TYPE=button VALUE="Click Me" onclick="changecolor()"> • </FORM> • </BODY> • </HTML> Interactive Programming on the Internet ,Knuckles docsity.com JavaScript and HTML Forms • <HTML> • <HEAD> • <SCRIPT LANGUAGE=JavaScript><!-- • function plus(){ • var n1; • var n2; • n1=document.addmult.num1.value; • n2=document.addmult.num2.value; • • n1=parseFloat(n1); • n2=parseFloat(n2); • • document.addmult.result.value=n1+n2; • } • function times(){ • var n1; • var n2; • n1=document.addmult.num1.value; • n2=document.addmult.num2.value; • • n1=parseFloat(n1); • n2=parseFloat(n2); • • document.addmult.result.value=n1*n2; • } • //--></SCRIPT> • </HEAD> • <BODY BGCOLOR="#FFFFCC"> • <P><FORM name=addmult> • <P>Enter a number in each field: • <INPUT TYPE=text NAME=num1 VALUE="" SIZE=5> • <INPUT TYPE=text NAME=num2 VALUE="" SIZE=5><BR> • <INPUT TYPE=button VALUE="+" onclick="plus()"> • <INPUT TYPE=button VALUE="*" onclick="times()"><BR> • <INPUT TYPE=reset VALUE="Reset Form"><BR> • <TEXTAREA NAME=result ROWS=3 COLS=27 WRAP=virtual></TEXTAREA> • </FORM> • </BODY> • </HTML> Interactive Programming on the Internet ,Knuckles docsity.com JavaScript and HTML Forms Form for submitting info for server side processing In te ra c ti v e P ro g ra m m in g o n t h e In te rn e t ,K n u c k le s docsity.com JavaScript and HTML Forms • <HTML> • <HEAD> • <SCRIPT LANGUAGE=JavaScript><!-- • function verify(){ • with(document.infoform){ • if((fullname.value=="")||(address.value=="")||(email.value=="")){ • alert("You have left one or more fields blank. Please supply the necessary information, and re-submit the form."); • } • else { • display.value="The following information has been added to our guestbook:\r"+fullname.value+"\r"+ address.value +"\r" +email.value; • } • } • } • //--></SCRIPT> • </HEAD> • <BODY BGCOLOR="#FFFFCC"> • <P><FORM name=infoform> • <P><TABLE BORDER=0> • <TR> • <TD WIDTH=83> • <P>Name: • </TD> • <TD> • <P><INPUT TYPE=text NAME=fullname VALUE="" SIZE=32> • </TD> • </TR> • <TR> • <TD WIDTH=83> • <P>Address: • </TD> • <TD> • <P><INPUT TYPE=text NAME=address VALUE="" SIZE=32> • </TD> • </TR> • <TR> • <TD WIDTH=83> • <P>E-mail: • </TD> • <TD> • <P><INPUT TYPE=text NAME=email VALUE="" SIZE=32> • </TD> • </TR> • <TR> • <TD WIDTH=83> • <P><INPUT TYPE=button VALUE="Submit" onclick="verify()"> • </TD> • <TD> • <P><INPUT TYPE=reset VALUE="Clear Your Information"> • </TD> • </TR> • <TR> • <TD COLSPAN=2> • <P><TEXTAREA NAME=display ROWS=5 COLS=41 WRAP=virtual></TEXTAREA> • </TD> • </TR> • </TABLE> • </FORM> • </BODY> • </HTML> docsity.com