Scribd
Upload
7 views

JavaScript (1)

This document provides an overview of JavaScript basics and its integration with HTML DOM, covering topics such as JavaScript functions, events, objects, and how to place JavaScript code in HTML pages. It explains the differences between JavaScript and Java objects, as well as the concept of prototypes and event handling. The document serves as a guide for understanding the foundational elements of JavaScript programming.

Uploaded by

thevenardin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

JavaScript (1)

This document provides an overview of JavaScript basics and its integration with HTML DOM, covering topics such as JavaScript functions, events, objects, and how to place JavaScript code in HTML pages. It explains the differences between JavaScript and Java objects, as well as the concept of prototypes and event handling. The document serves as a guide for understanding the foundational elements of JavaScript programming.

Uploaded by

thevenardin
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 67

JavaScript Basics &

HTML DOM

Sang Shin
Java Technology Architect
Sun Microsystems, Inc.
sang.shin@sun.com
www.javapassion.com
Disclaimer & Acknowledgments
Topics
What is and Why
JavaScript?
What is JavaScript?
What can a JavaScript do?
How and Where Do You
Place JavaScript Code?
How to put a JavaScript code into
an HTML page?
Where Do You Place Scripts?
Referencing External JavaScript
File
JavaScript Language
JavaScript Variable
JavaScript Popup Boxes
JavaScript Language
JavaScript Functions
(which behave like
Java methods)

More on Functions
in other Presentation
JavaScript Funcitons
Example: JavaScript Function
JavaScript Events
Events & Event Handlers
Events
Events
Events
onload & onUnload Events
onFocus, onBlur and onChange
Example & Demo: onblur
onSubmit
Example & Demo: onSubmit
onMouseOver and onMouseOut
JavaScript Objects
JavaScript Object
JavaScript Built-in Objects
JavaScript Object vs. Java Object
JavaScript Objects;
3 Different Ways of
Creating JavaScript
Objects
Creating Your Own JavaScript Objects
Option 1: Creating a Direct Instance
of a JavaScript Object
Option 1: Creating a Direct Instance
of a JavaScript Object
Option 2: Creating a template of a
JavaScript Object
Option 2: Creating a template of a
JavaScript Object
Option 3: Creating JavaScript
Object as a Hash Literal
JavaScript Objects:
Hash (Associative Array)
JavaScript Object is an Associative
Array (Hash)
JavaScript Objects:
Classes, Objects,
Inheritance
JavaScript has No built-in concept
of Inheritance
JavaScript Objects:
prototype
prototype
prototype
JavaScript Objects:
Functions Again
A function is a first-class
JavaScript Object
A function can take Variable
arguments
JavaScript Objects:
Context
HTML DOM Objects
HTML DOM
HTML DOM Objects
HTML DOM Objects
Document Object
Document Object: Write text to the
output
Document Object: Write text with
Formatting to the output
Document Object: Use
getElementById()
Document Object: Use
getElementsByName()
Document Object: Return the innerHTML
of the first anchor in a document
Document Object: Access an item in a
collection
Event Object
Event Object: What are the
coordinates of the cursor?
Event Object: What is the unicode
of the key pressed?
Event Object: Which element was
clicked?
Event Object: Which event type
occurred?
JavaScript Basics

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

You might also like