Introduction to JavaScript

tacitmarigoldInternet και Εφαρμογές Web

25 Ιαν 2014 (πριν από 3 χρόνια και 6 μήνες)

484 εμφανίσεις

Introduction to JavaScript

LIS390W1A

Web Technologies and Techniques

24 Oct. 2007

M. Cameron Jones

What is JavaScript?


What is HTML?


Programming language for controlling the
content, presentation, or behavior of a
webpage (HTML document, DOM) in the
user’s browser.


Server Land

Client Land

Internet

HTML

+

JavaScript

JavaScript
Interpreter

What can you do with JavaScript?


Manipulate the DOM


Create, Remove, and Move nodes


Modify styles and other attributes


Interact with the user


Listen for keyboard + mouse events


Process user input


Send messages to user


Communicate with the server


Send and Retrieve data


Interact with the browser


Detect browser version and settings


Firefox extensions are written in JavaScript

Examples


http://www.google.com/webhp?complete=1


http://maps.google.com/maps


http://www.walterzorn.com/dragdrop/dragdrop_e.htm


http://script.aculo.us/


http://dojotoolkit.org/demos


http://jsmsxdemo.googlepages.com/jsmsx.html


How do we create JavaScript?

<script type=“text/javascript”>


<!
--

// Java Script Goes Here
--
>

</script>


In the <HEAD>


Inline with other elements


In URL’s with
javascript:

scheme


Various event attributes added to elements


My First JavaScript


Create a new folder in your I
-
Drive
courseweb_html folder called “javascript”


Open TextWrangler and create a new HTML
file called “helloworld.html” and save it in
your javascript folder


Block out a basic HTML document with a
<head>

and
<body>
.


Add a
<h1>

heading in the
<body>

with
some message


My First JavaScript

<html>


<head>



<title>Hello world!</title>


</head>


<body>



<h1>Hello World</h1>



<script type="text/javascript">




alert("Hello World");



</script>


</body>

</html>

My Second JavaScript


Move the <script> element into the <head>


Save the file and Refresh your browser


What happened?


The browser interprets the HTML in a “top
-
down” fashion.


The Javascript executes before the body has
been parsed, so the <h1> headline hasn’t
been displayed yet.

Some cooler JavaScript


Save your file with a different name,
“domexample.html” and close
“helloworld.html”


Popups are annoying, so let’s write our
message dynamically into the webpage


Delete the
<h1>

headline


Move the
<script>

element back into the
body

Improved Hello World

<html>


<head>



<title>Hello world!</title>


</head>


<body>



<script type="text/javascript">



var hello = document.createElement("h1");



var msg = document.createTextNode("Hello World");



hello.appendChild(msg);



document.body.appendChild(hello);



</script>


</body>

</html>

Helloworld Autopsy

Let’s read this from right to left

var hello = document.createElement("h1");


Create a new element on type “
h1



Store that new element in a variable named
hello

var msg = document.createTextNode("Hello World");


Create a new text node with value “Hello World”

hello.appendChild(msg);


Add the text node to the h1 node we created

document.body.appendChild(hello);


Add the h1 node to the body of the document

General Concepts


Variables


document

(predefined)


hello

(we defined it with
var
)


msg
(we defined it with
var
)


Strings



h1




Hello World



Functions


createElement


createTextNode


appendChild



Getting more advanced


Save your file with a new name
“domexample2.html” and close the old one.


Move the <script> into the <head>


Add a hyperlink in the body

<a href=“#”>Say Hello</a>


Getting tougher

<html>


<head>



<title>Hello world!</title>



<script type="text/
javascript
">



function
sayHello
() {



var

hello =
document.createElement
("h1");



var

msg

=
document.createTextNode
("Hi");



hello.appendChild
(
msg
);



document.body.appendChild
(hello);



}



</script>


</head>


<body>



<a
href
="#"
onClick
="
sayHello
()"
>Say Hello</a>


</body>

</html>

Say Hello!


Click the link

What happened?


Click the link a bunch of times

What happened?


The
onClick

attribute of the
<a>

tag allows
us to execute some JavaScript every time the
link is clicked


We are calling our “
sayHello
” function
defined above in the
<head>