1. Introducing JavaScript

2. Server-Side and Client-Side Programming
Server-side programming
Program placed on server that hosts Web site
Program then used to modify contents and structure of Web pages

3. Server-Side and Client-Side Programming
Runs programs on user’s computer
Programs likely to be more responsive to users
complement server-side programming

4. Server-Side Programming

5. Client-Side Programming

6. Combining Client-Side and Server-Side Programming

7. Introducing JavaScript
Server-side Programs pose problems
Client-side Programs were developed to run programs and scripts on the client side of a Web browser

8. The Development of JavaScript
Developed by Sun Microsystems
Programs designed to be run within Java interpreters
An example of a compiled language
JavaScript
Developed by NETSCAPE,
An interpreted language
Internet Explorer supports a version called JScript

9. Comparing Java and JavaScript

10. Versions of JavaScript

11. The Development of JavaScript
Jscript is a version of JavaScript supported by Internet Explorer
The European Computer Manufacturers Association (ECMA) develops scripting standards
The standard is called ECMAScript but browsers still generally call is JavaScript

12. Inserting JavaScript into a Web Page File
Outline the main tasks you want the program to perform first
A JavaScript program can either be placed directly in a Web page file or saved in an external text file

13. Inserting JavaScript into a Web Page File
Insert a client-side script in a Web page when using the script element
Comments are useful for hiding scripts from older browsers
Specify alternative content using the nonscript element for browsers that don’t support scripts (or have their script support disabled)

14. Writing Output to the Web Page
An object-based programming language writes the output by manipulating tasks
An action you perform on an object is called a method

15. Writing Output to the Web Page
To write text to a Web page, use the following JavaScript commands:
document.write(“text”); or
document.writeln(“text”)’
Where text is the content to be written to the page. The
doucment.write() and document.writeln() methods are identical,
except that the document.writeln() method preserves any line breaks in the text string.

16. Working with the Script Element
Used to enter scripts into an HTML or XHTML file
Syntax
<script type="mime-type">
script commands
</script>

17. Writing Output to a Web Document
Inserting in a Web document
<script type="text/javascript">
</script>

18. The document.write() Method
One way to send output to the Web document
Object
Can be any item, including mouse pointer or window scrollbars
Method
Process by which JavaScript manipulates the features of an object

19. Understanding JavaScript Rules and the Use of White Space
Is case sensitive
Ignores most occurrences of extra white space
Line breaks occurring within a statement can cause error
Good practice to not break a statement into several lines

20. Supporting Non-JavaScript Browsers
noscript element
Used by browsers that do not support scripts
Syntax
<noscript>
alternative content
</noscript>

21. Working with Variables
A named item in a program that stores information
Used to represent values and text strings
Values can change as the program runs

22. Working with Variables and Data
JavaScript variable types:
Numeric variables
String variables
Boolean variables
Null variables
You declare a variable before using it

23. Working with Variables and Data
Numeric variable- any number, such as 13, 22.5, etc
Can also be expressed in scientific notation
String variable- any group of text characters, such as “Hello” or “Happy Holidays!”
Must be enclosed within either double or single quotations (but not both)
Boolean variable- accepts only true and false values
Null variable- has no value at all

24. Declaring a Variable
Tells JavaScript interpreter to reserve memory space for the variable
Statement to declare a variable
var variable;
Declaring three variables
var emLink, userName, emServer;

25. Declaring a JavaScript Variable
You can declare variables with any of the following JavaScript commands:
var variable;
var variable = value;
variable = value;
Where variable is the name of the variable and value is the initial value of the variable. The first command creates the variable without assigning it a value; the second and third commands both create the variable and assign it a value.

26. Declaring a Variable Limits on variable names
First character must be either a letter or an underscore character ( _ )
Remaining characters can be letters, numbers, or underscore characters
Variable names cannot contain spaces
Reserved words cannot be used

27. Writing a Variable Value to a Web Document
Can be used in place of value it contains
Writing a text string to a Web page
var libName = ”Duston Public Library";
document.write(libName);
Plus symbol ( + )
Can be used to combine variable with text string

28. Working with Dates Create a date object to store date information
Date Methods

29. Working with Expressions and Operators
Expressions are JavaScript commands that assign values and variables
Operators are elements that perform actions within expressions
Arithmetic operators: perform simple mathematical calculations
Binary operators: work on two elements in an expression
Unary operators: work on only one variable
Increment operators: can be used to increase the value of a variable by 1
Assignment operators: used to assign values in expressions

30. Working with Expressions and Operators
The Math object is a JavaScript object used for calculations other than simple math

31. Creating a Function to Perform an Action
Functions
Collection of commands that perform an action or return a value
Include a function name
Include a set of commands that run when function is called
Some require parameters

32. Creating a Function to Perform an Action
Syntax of a JavaScript function
function function_name(parameters){
JavaScript commands }
Calling a function
function_name(parameter values)

33. Functions and Variable Scope
Indicates where and how the variable can be used in your application
Can be local or global

34. Functions and Variable Scope
Local scope
Variable created within a JavaScript function
Global scope
Variables not declared within functions

35. Creating a Function to Return a Value
For a function to return a value
It must include a return statement
Syntax of a function that returns a value
function function_name(parameters) {
JavaScript commands
return value; }

36. Commenting JavaScript Code
Comments
Explain what your programs are designed to do and how they work
Multiline comment /*
The showEM() function displays a link to the user’s address.
The username and server name are entered in reverse order */

37. Using Comments to Hide JavaScript Code
Syntax for hiding script
<script type="text/javascript">
<!-- Hide from non-JavaScript browsers
JavaScript commands
// Stop hiding from older browsers -->
</script>

38. Accessing an External JavaScript File
Common practice to
Create libraries of functions located in external files
Script elements that point to external files are
Placed in a document’s head section
Extension “.js”
Used by external files containing JavaScript commands and functions

39. Using an External Script

40. Debugging Your JavaScript Programs
Three types of errors:
Load-time errors (occurs when the script is loading)
Run-time errors (occurs when the being executed)
Logical errors (free from syntax and structural mistakes, but result in incorrect results)

41. Common Mistakes You need to debug your program to fix the mistakes
Common mistakes include:
Misspelling a variable name
Mismatched parentheses or braces
Mismatched quotes
Missing quotes
Using ( instead of [
Using = in place of ==

42. Debugging Tools and Techniques
To avoid making mistakes and quickly located those you do make:
Write modular code
Use the Microsoft Script Debugger to debug (for use with Internet Explorer)
Use the JavaScript Console to debug (for use with Netscape and Mozilla family of browsers)

43. Microsoft Debugger Window

44. Tips for Writing Good JavaScript Code
Use good layout to make your code more readable. Indent command blocks to make them easier to read and to set them off from other code
Use descriptive variable names to indicate the purpose of your variables
Be careful how you use uppercase and lowercase letters in your code, because JavaScript commands and names are case-sensitive

45. Tips for Writing Good JavaScript Code
Add comments to your code to document the purpose of each script
Initialize all variables at the top of your script and insert comments describing the purpose and nature of your variables
Create customized functions that can be reused in different scripts. Place your customized functions in external files to make them available to your entire Web site