1 / 36

Web Design

Web Design . Introduction to JavaScript - Day 1. JavaScript is a scripting language so it doesn't need to be compiled (or translated into machine codes) It is an interpreted language: instead it is executed directly by the web browser. Introduction. a simple program called "Hello World".

clarkbrian
Télécharger la présentation

Web Design

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. Web Design Introduction to JavaScript - Day 1

  2. JavaScript is a scripting language so it doesn't need to be compiled (or translated into machine codes) • It is an interpreted language: instead it is executed directly by the web browser

  3. Introduction • a simple program called "Hello World". • is designed to output the text "Hello World" • is designed to introduce you to the programming language: • show you how to write, • compile, and • execute programs using that language.

  4. Interpreted languages have their disadvantages: They can’t execute really quickly So they are not ideally suited for complicated work, such as graphics. Also, they require the interpreter (in JavaScript’s case, usually a browser) in order to work.

  5. Introduction JavaScript • Developed by Netscape Communications Corporation • The maker of the Netscape web browser

  6. It is the 1st web scripting language to be supported by browsers, and it is still by far the most popular.

  7. A bit of history • JavaScript was originally called LiveScript and was first introduced in Netscape Navigator 2.0 in 1995. • It was renamed JavaScript to indicate a marketing relationship with Sun’s Java language.

  8. Javascript is easy to learnIt can: • Displays message to user as part of a web page, in the browser’s status line, or in alert boxes

  9. It can: • Validate the contents of a form and make calculations (e.g. an order form can automatically display a running total as you enter item quantities)

  10. Animate images or create images that change when you move the mouse over them

  11. Create ad banners that interact with the user, rather than simply displaying a graphic

  12. Detect the browser in use of or its features and perform advanced functions only on browsers that support them… Netflix sample

  13. Detect installed plug-ins and notify the user if a plug-in is required

  14. Display or interact date retrieved from a remote server

  15. Your First Script • The first thing that we need to do is to add some HTML into the body section of our web page. <script type="text/ javascript"> </script>

  16. <body> <script type="text/ javascript"> 1 </script> </body> • These two lines form a container into which we can place our JavaScript code. • The parameters on the script tag identify • the content surrounded by these tags as JavaScript code to be executed rather than text to be displayed.

  17. Placed between <body> or <head> ? • Where is about in the body section should you place the tags?

  18. “to the <head> xx</head> section” • Immediately affect the HTML document, but can be referred to by other script. <head> <script type="text/ javascript"> </script> </head>

  19. Within HTML tage.g. <form> • Event handlers

  20. In a separate file entirely • It supports the use if files with the .js extension containing scripts

  21. In the Body of the page • Script output is displayed as part of the HTML document when browser loads the page

  22. <body> <script type="text/javascript"> document.write('<b>Hello World</b>'); </script> </body>

  23. document.write • The "document" part of this command identifies the current web page as what we are updating • The "write" is how we are updating it - i.e.. by writing something to the page.

  24. document.write('<b>Hello World</b>'); • You will find the what portion of these commands is usually referred to as an object and the how portion is usually referred to as the method. • The actual value that is to be written out is contained between the parentheses that follow.

  25. surrounded by HTML bold tags • This will result in the text being displayed on the page in bold. • You can easily include HTML code into your JavaScript document.write statements • JavaScript writes its output into the page before the page is processed by the browser, any HTML that is included will be processed exactly the same as if it were statically coded into the page.

  26. document.write('<b>Hello World</b>'); • the line ends with a semi-colon (;) • The semi-colon is what determines where individual JavaScript statements end in the same way that a greater than (>) determines where an HTML tag ends.

  27. Now, try this:

  28. <html> <body> <script type="text/javascript"> document.write('<b>Hello World</b>'); </script> </body> <html>

  29. Try a combination

  30. <body> <script type="text/javascript"> A ="What a very " B ="nice day!" C = ____ + _____ ; document.write(C) </script> </body>

  31. JavaScript Assignment 1

  32. <script type="text/javascript"> Edison = _____; // Edison’s age; Nick = ____; // Nick’s age; Tais = _____; // Tais’age; Total= _______________; // Use only variables’names; C = "Their total age is " + _______; document.write(C); </script>

More Related