alert('First alert.'); alert('Second alert.'); "> alert('First alert.'); alert('Second alert.'); ">

Presentation is loading. Please wait.

Presentation is loading. Please wait.

A little MORE on JavaScript

Published byGordon Barnett Modified over 6 years ago

Similar presentations

Presentation on theme: "A little MORE on JavaScript"— Presentation transcript:

1 A little MORE on JavaScript
EVERYTHING you need to know is here:

2 alert function! <html> <head> <title>Alerts Example</title> </head> <body> <script type="text/javascript"> alert('First alert.'); alert('Second alert.'); </script> </body> </html>

3 variables <html> <head> <title>Arithmetic Example</title> </head> <body id="the_body"> <script type="text/javascript"> var x = 5; var y = 7; var z = x + y; document.write(z); </script> </body> </html>

4 DOM Document Object Model (DOM for short) is a reference for all the objects used to represent a web page is exposed to Javascript by way of the "document" object If you check the DOM, you'll see that the document object contains a property named 'URL' which gives the URL of the page getElementById() method, returns the object which represents the element with the given id

5 DOM stuff Do you think you could GRAB an image from a web page
SWAP it out with another image ??

6 “woah ya”… example <html> <head> <title>Javascript DOM Image Example</title> </head> <body> <img src="neutral_face.png" id=”stoic" /> <script type="text/javascript"> alert('Click when ready'); var x = document.getElementById(’stoic'); x.src = 'smiley_face.png'; </script> </body> </html>

7 What is that code doing? The variable x is actually unnecessary.
document.getElementById() actually returns an object which we could use the . operator on directly. "document.getElementById(’stoic').src" would have worked This sort of . chaining is very common in Javascript. If you move the Javascript above the <img> tag, it will NOT WORK!!! the script is executed before the browser knows that the tag even exists!

8 NICE---”onclick”!!! Most tags support an "onclick" attribute.
The value of this attribute is a snippet of Javascript that is to be run whenever the element is clicked on. The Javascript within this attribute has access to the special "this" keyword which refers to the containing element.

9 example <html> <head> <title>Javascript DOM Image Example</title> </head> <body> <img src="neutral_face.png" onclick="this.src = 'smiley_face.png';" /> </body> </html>

10 <!DOCTYPE html> <html> <head> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> </head> <body> <h1>My First JavaScript</h1> <p id="demo">This is a paragraph.</p> <button type="button" onclick="displayDate()">Display Date</button> </body> </html>

11 Example output (at first!)

12 After click…

13 killer vars! <!DOCTYPE html> <html> <body> <p id="demo"></p> <script> var r=Math.random(); var x=document.getElementById("demo") if (r>0.5) { x.innerHTML="<a href=' W3Schools</a>"; } else { x.innerHTML="<a href=' WWF</a>"; } </script> </body> </html>

14 functions! <!DOCTYPE html> <html> <body> <p>This example calls a function which perfoms a calculation, and returns the result:</p> <p id="demo"></p> <script> function myFunction(a,b) { return a*b; } document.getElementById("demo").innerHTML=myFunction(4,3); </script> </body> </html>

15 example output

16 looping??! <!DOCTYPE html> <html> <body> <p>Click the button to loop through a block of code five times.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var x="",i; for (i=0;i<5;i++) { x=x + "The number is " + i + "<br />"; } document.getElementById("demo").innerHTML=x; </script> </body> </html>

17 example output

18 Writing to a form?!? http://www.google.com try this at the console:
document.forms[0]['q'].value='stackoverflow’; document.forms[0].submit()

Download ppt "A little MORE on JavaScript"

Similar presentations

JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.

JavaScript Part 6. Calling JavaScript functions on an event JavaScript doesn’t have a main function like other programming languages but we can imitate.
JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.

JavaScript 101 Lesson 5: Introduction to Events. Lesson Topics Event driven programming Events and event handlers The onClick event handler for hyperlinks.
Web Programming – Java Script Association of Computing Activities Computer Science and Engineering Indian Institute of Technology Kanpur.

Web Programming – Java Script Association of Computing Activities Computer Science and Engineering Indian Institute of Technology Kanpur.
JavaScript Part 1.

JavaScript Part 1.
CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.

CSS Class 7 Add JavaScript to your page Add event handlers Validate a form Open a new window Hide and show elements Swap images Debug JavaScript.
Event-Driven Programming Chapter 19. 2 Page Section: Section or division of an HTML page Generic block element Example: What's the difference between.

Event-Driven Programming Chapter Page Section: Section or division of an HTML page Generic block element Example: What's the difference between.
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.

1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
Javascript Overview. What is Javascript? May be one of the most popular programming languages ever Runs in the browser, not on the server All modern browsers.

Javascript Overview. What is Javascript? May be one of the most popular programming languages ever Runs in the browser, not on the server All modern browsers.
Understanding JavaScript and Coding Essentials Lesson 8.

Understanding JavaScript and Coding Essentials Lesson 8.
Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.

Document Object Model Nasrullah. DOM When a page is loaded,browser creates a Document Object Model of the Page.
JavaScript Object Model. Biggest Advantage of JavaScript  I can access values of HTML elements using JavaScript  I can modify values of HTML elements.

JavaScript Object Model. Biggest Advantage of JavaScript  I can access values of HTML elements using JavaScript  I can modify values of HTML elements.
JavaScript Introduction inf385t Semantic Web 2/20/2006.

JavaScript Introduction inf385t Semantic Web 2/20/2006.
JAVASCRIPT A quick review. True False ■The DOM is a standardized way of referring to parts of a Web page. ■TRUE ■In the DOM, attributes have their own.

JAVASCRIPT A quick review. True False ■The DOM is a standardized way of referring to parts of a Web page. ■TRUE ■In the DOM, attributes have their own.
4.1. Manage and maintain JavaScript. 4.2. Update the UI by using JavaScript. Understanding JavaScript and Coding Essentials.

4.1. Manage and maintain JavaScript Update the UI by using JavaScript. Understanding JavaScript and Coding Essentials.
JavaScript, Third Edition 1 SELECTION LIST Demo. JavaScript, Third Edition 2 Description This web page will edit the slection to ensure an option was.

JavaScript, Third Edition 1 SELECTION LIST Demo. JavaScript, Third Edition 2 Description This web page will edit the slection to ensure an option was.
Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.

Client-side (JavaScript) Validation. Associating a function with a click event – Part 1 Use the input tag’s onclick attribute to associate a function.
Tarik Booker CS 120 California State University, Los Angeles.

Tarik Booker CS 120 California State University, Los Angeles.
Java Script and the DOM DOM stands for: –The Document Object Model When a browser reads a web page, it converts it’s contents from HTML into a hierarchical.

Java Script and the DOM DOM stands for: –The Document Object Model When a browser reads a web page, it converts it’s contents from HTML into a hierarchical.
1 The Document Object Model. 2 Objectives You will be able to: Describe the structure of the W3C Document Object Model, or DOM. Use JavaScript to access.

1 The Document Object Model. 2 Objectives You will be able to: Describe the structure of the W3C Document Object Model, or DOM. Use JavaScript to access.

Similar presentations

Ads by Google