javascript

C G S 2 8 3 5 Web Dev


Programming Languages

• All have…– Variables, data types, assignment– Arithmetic, relational, and logical operators, and

expressions– Control structure: if-then, while, loops, iteration– Program structure: functions, objects, methods– Arrays and strings– Input and Output


What is JavaScript?

• JavaScript is a programming/scripting language designed for the Web

• Javascript is interpreted not compiled• JavaScript is not Java• JavaScript provides interactivity for Web pages• JavaScript may be embedded in HTML or

referenced from HTML (like CSS)• JavaScript is forgiving and easy to use


JavaScript is Object-Oriented

• JavaScript uses objects that have attributes and methods

The DOM (Document Object Model)

bgColor is an attribute of the document objectdocument.bgColor=“#888888”;

write is a method in the document objectdocument.write(“Hello Earl!”);


JavaScript is typically used to enhance a Web interface

http://pic.fsu.edu/courses/wdp/current/tutorials/javascript/examples/mouseover2.html

http://pic.fsu.edu/courses/wdp/current/tutorials/javascript/coolmenu/

http://javascript.internet.com/toc.html

http://sixrevisions.com/rapid-development/10_ajax_effects_website_fanciness/

Javascript is a key element in the popular AJAX programming methodology.Javascript code can reference Javascript libraries such as jQuery.


JavaScript Embedded in HTML• In the html <body>


JavaScript Embedded in HTML• In the html <body>

http://www.pic.fsu.edu/courses/wad/tutorials/javascript/examples/doc_write.html


JavaScript Embedded in HTML• In the html <head>

http://www.pic.fsu.edu/courses/wad/tutorials/javascript/examples/function.html


Working with Variables

http://www.pic.fsu.edu/courses/wad/tutorials/javascript/examples/variables.html


Working with Variables

http://www.pic.fsu.edu/courses/wad/tutorials/javascript/examples/variables2.html


HTML Forms

• Javascript can collect user input through HTML forms.

http://www.pic.fsu.edu/courses/wad/tutorials/javascript/examples/form_objects.html

http://www.pic.fsu.edu/courses/wad/tutorials/javascript/examples/change_background.html

http://www.w3schools.com/html/html_forms.asp


http://www.pic.fsu.edu/courses/wad/tutorials/javascript/examples/form_adder.html http://www.pic.fsu.edu/courses/wad/tutorials/javascript/examples/form_adder2.html

Calling a function from a form

v1 and v2 are two variables being passed into function add

this.form.v1.value gets the value the user typed in the v1 textbox on the form in this document

The button calls the function add when it is clicked (onclick)


if – elseif - else

http://www.pic.fsu.edu/courses/wad/tutorials/javascript/examples/if_else.html

javascript

Technology

html http

web javascript

html forms javascript

fa javascript

java javascript

javascript code

javascript libraries

css javascript