Programación web js

JavaScript Basics & HTML DOM

Sang Shin Java Technology Architect Sun Microsystems, Inc. sang.shin@sun.com www.javapassion.com

Disclaimer & Acknowledgments
• Even though Sang Shin is a full-time employee of Sun Microsystems, the contents here are created as his own personal endeavor and thus does not necessarily reflect any official stance of Sun Microsystems on any particular technology •Acknowledgments
> The contents of this presentation was created from JavaScript

tutorial from www.w3cschools.com

2

Topics
• • • • • • • • What is and Why JavaScript? How and Where do you place JavaScript code? JavaScript language JavaScript functions JavaScript events JavaScript objects JavaScript HTML DOM objects Closure (need to be added)
3

What is and Why JavaScript?

Whatis JavaScript?
• Was designed to add interactivity to HTML pages • Is a scripting language (a scripting language is a lightweight programming language) • JavaScript code is usually embedded directly into HTML pages • JavaScript is an interpreted language (means that scripts execute without preliminary compilation)

5

What can a JavaScript do?
• JavaScript gives HTML designers a programmingtool • JavaScript can put dynamic text into an HTML page • JavaScript can react to events • JavaScript can read and write HTML elements • JavaScript can be used to validate input data • JavaScript can be used to detect the visitor's browser • JavaScript can be used to create cookies
6

How and Where Do You Place JavaScript Code?

How to put a JavaScript code into an HTML page?
• Use thetag (also use the type attribute to define the scripting language)
... ...

8

Where Do You Place Scripts?
• Scripts can be in the either section or section • Convention is to place it in the section
.... 9

Referencing External JavaScript File
• Scripts can be provided locally or remotely accessible JavaScript file using src attribute
10

JavaScriptLanguage

JavaScript Variable
• You create a variable with or without the var statement
var strname = some value strname = some value

• When you declare a variable within a function, the variable can only be accessed within that function • If you declare a variable outside a function, all the functions on your page can access it • The lifetime of these variables starts when they are declared, andends when the page is closed
12

JavaScript Popup Boxes
• Alert box
> User will have to click "OK" to proceed > alert("sometext")

• Confirm box
> User will have to click either "OK" or "Cancel" to proceed > confirm("sometext")

• Prompt box
> User will have to click either "OK" or "Cancel" to proceed after

entering an input value > prompt("sometext","defaultvalue")

13JavaScript Language
• Conditional statement
> if, if.. else, switch

• Loop
> for loop, while loop

• try...catch • throw

14

JavaScript Functions (which behave like Java methods) More on Functions in other Presentation

JavaScript Funcitons
• A JavaScript function contains some code that will be executed only by an event or by a call to that function
> To keep the browser fromexecuting a script as soon as the

page is loaded, you can write your script as a function

• You may call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file). • Functions are defined either or section
> As a convention, they are typically defined in the

section

16

Example: JavaScript Function
// If alert("Helloworld!!") below had not been written within a // function, it would have been executed as soon as the page was loaded. function displaymessage() { alert("Hello World!") }

17

JavaScript Events

Events & Event Handlers
• Every element on a web page has certain events which can trigger invocation of event handlers • Attributes are inserted into HTML tags to define events and event...