1 / 41

Mastering JavaScript Essentials

Learn about JavaScript implementations, error handling, interactivity, and more. Gain skills in creating dynamic web content using JavaScript. Take your coding to the next level.

honer
Download Presentation

Mastering JavaScript Essentials

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Midterm Chapter 2 Multimedia2

  2. History • Developed by Brendan Eich of Netscape, under the name of Mocha, then LiveScript, and finally JavaScript. Review JavaScript Implementations A complete JavaScript implementations is made up of three distinct parts:

  3. CourseObjectivesOn completion of this course we will be able to: • Use JavaScript Error Console • What can a JavaScript do? • Where can you put JavaScript? • What can Java Scripting do? • Your First JavaScript display.

  4. Why slow?

  5. We grew up

  6. Browsers didn't

  7. In the Beginning

  8. What's the problem?

  9. No compilation!*

  10. Browserswon'thelpyourcode!!!!

  11. Didn't Matter Then

  12. Didn't Matter Then • JavaScript used for simple form validation or image hovers • Slow Internet connections – People expected to wait • Click-and-go model • Each page contained very little code

  13. Matters Now• Ajax and Web 2.0• More JavaScript code than ever before• Fast Internet connections– People have come to expect speed• Applications that stay open for a long time– Gmail– Facebook• Download and execute more code as you interact

  14. Who will helpyour code?

  15. M. E. ? NO!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  16. Javascript Error Console

  17. Reminders • JavaScript was designed to add interactivity to HTML pages • Before you start this lesson you should already know HTML

  18. JavaScript is Case Sensitive Unlike HTML, JavaScript is case sensitive! • Therefore watch your capitalization closely • Especially when you write JavaScript for: • statements • create or call variables • objects and functions

  19. JavaScripting and Semicolons •  It is normal to add a semicolon at the end of each executable statement.   ex. document.write("Hello Dolly"); • Most people think this is a good programming practice, and most often you will see this in JavaScript examples on the web.

  20. Java Scripting and Semicolons • The semicolon is optional (according to the JavaScript standard), and the browser is supposed to interpret the end of the line as the end of the statement. • Because of this you will often see examples without the semicolon at the end. • Note: Using semicolons makes it possible to write multiple statements on one line.

  21. What can a JavaScript do? • For example you can write a JavaScript statement like this: document.write("<h1>" + name + "</h1>") • This statement can write a variable text into an HTML page

  22. JavaScripts in a page will be executed immediately while the page loads into the browser. This is not always what we want. • Sometimes we want to execute a script when a page loads, other times when a user triggers an event. Where can you put a JavaScript?

  23. Where can you put a JavaScript? Scripts can go in the <body> • Scripts to be executed when the page loads go in the body section. If you place a script in the body section, it generates the content of a page. Scripts can also go in the in <head> • Scripts to be executed when they are called, or when an event is triggered, go in the head section.If you place a script in the head section, you will ensure that the script is loaded before anyone uses it. Scripts can also be external  • If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file.

  24. Java Scripting Assignment 1 Type the following code into Notepad or Text Editor for Mac.  <html><body> <SCRIPT language = "JavaScript">document.write("Hello World!");</script> </body></html> Save your page as java1.html. When you preview it on the browser it should display: Hello World!

  25. Let's look at that code what does it mean? • We will look at each line of code individually. For example line 1 - 2 are below. These you will remember at the beginning tags of HTML. Note your script starts after the <body> tag in this example. <html>  <body> • The next line tells the page the type of script you will be adding. In this case it is text. <script type="text/javascript"> Or <SCRIPT language = "JavaScript"> alerts a browser that JavaScript code follows

  26. Line 4 document.write("Hello World!"); • Tells the page to write the words "Hello World" on your webpage. •  To write text in your JavaScript you need to put it in between quotes and in parenthesis • The code also states it is a document.write command • This the standard JavaScript command for writing outputto a page. • By entering thedocument.writecommand between the <script> and </script> tags, the browser will recognize it as a JavaScript command and execute the code line. • As I mentioned for this example the browser will write Hello World!on the page More About The Code...

  27. Closing Your Lines Of Code • Line 5 is the ending tag of the script. </script> • You need to just like in HTML close your <script> when you have completed your JavaScript. • Why is it important to close the <script> tag? • Line 6-7 close your HTML tags <body> <html>. </body></html>

  28. JavaScript code (or just JavaScript) is a sequence of JavaScript statements. • Each statement is executed by the browser in the sequence they are written. • In the following example we will write a heading and two paragraphs to a web page.

  29. Java Scripting: Syntax & Rules <script type="text/javascript"> document.write ("<h1>This is a heading</h1>"); document.write ("<p>This is a paragraph.</p>"); document.write ("<p>This is another paragraph.</p>");  </script> Save your page as java-syntax.html.

  30. What Can Java Scripting Do?

  31. What can Javascripting do? • JavaScript can react to events - A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element • JavaScript can read and write HTML elements • A JavaScript can read and change the content of an HTML element •  JavaScript can be used to validate data - A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing

  32. What else can Java Scripting do? • JavaScript can be used to detect the visitor's browser A JavaScript can be used to detect the visitor's browser load another page specifically designed for that browser • JavaScript can be used to create cookies A JavaScript can be used to store and retrieve information on the visitor's computer

  33. Sample

  34. THANK YOU

  35. LABORATORY Create the following in JavaScript • Type the lyrics of your • Favorite Song • Favorite Artist Note: Save the File as Java1.FN.LN.html

  36. LABORATORY Create the following in JavaScript Create a JavaScript program That will ask to input from the user Prelim Grade: Midterm Grade: Final Grade: Using ALERT it will give The total grade and letter equivalent ENTER Your Final Grade is: 4.00 “A” Note: Save the File as Java2.FN.LN.html Submit it on my email account : abricamt@gmail.com Subject : JavaScript2/FN/LN

More Related