Lecture 7
JavaScript (part 1)
Ketan Mayer-Patel
University of North Carolina
Overview
- Interpreted
- Object-oriented
- In the browser
- NOT Java
- Convoluted history and evolution
- Introduced by Netscape
- JScript vs. JavaScript
- ECMA - One script to rule them all
- Microsoft is still a jerk
Hello, World!
- Our first JavaScript program.
- Things to point out in this example:
- Embedding JavaScript
- Prototype
- Object-oriented JavaScript
- Execution environment
- Event-based programming
Embedding JavaScript
- Several ways to get JavaScript in your page.
- Some ways are better than others.
- Use <script> tag to embed JavaScript in separate file.
- Can embed more than one file.
- Must come from the same server as the page.
- Code executed immediately when document is parsed.
Prototype
- A popular JavaScript library
- Official site is here:
www.prototypejs.org
- Class copy of the library lives here:
http://www.cs.unc.edu/Courses/comp
- Very powerful
- To use fully, need to have some decent programming chops.
- We'll use it in a limited way.
- Will help smooth over browser incompatibilities
- Will try to point out when something is prototype-specific.
Object-Oriented JavaScript
- Object is just a piece of structured data
- Data stored as properties
- Access properties through the . operator
- Properties that are functions known as methods
Execution Environment
- Browser predefines some global variables
- document
- Represents the document
- Also known as The DOM
- Provides methods for manipulating the document
- window
- Represents the entire execution environment
- Provides methods for controlling browser
Event-based Programming
- This is what JavaScript is all about
- General pattern of JavaScript code.
- Define functions and do any calculations that you can do immediately
- Set up event handlers
- Functions that are called when something happens.
- This style of programming also called asynchronous
Language Basics
- Case sensitive
- Statements ended by semicolon
- Identifiers
- Names of variables and functions
- First character must be letter, underscore or $
- Rest of name can include digits.
- Commments
- Single-line:
// This style comments out a single line.
- Multi-line:
/* This syle allows
multiple lines to be commented */