WEB150 » Lecture 01: Intro to JavaScript

Update: November 15th, 2011

Assignment - Create Assignment Page

  1. Download the HTML Site Template
  2. Review the HTML5 Template (you will be copying this as your page template for every assignment)

Required Reading

Lecture Notes

Class Project

All the lessons of this course will be aimed at building and enhancing a timeline of events, filterable by categories. You can see a demo here. You will be provided necessary html and css, though we will eventually be creating the html in javascript. You will be allowed to add your own css styling and change this project however you like so long as it retains the basic functional requirements of the original (spec to come).

What is JavaScript?

  • Not Java (Java is to JavaScript what Car is to Carpet)
  • A scripting language (interpreted not compiled--though there are ways of compiling it, see Google V8)
  • Almost a full object oriented programming language.
  • A client side language, running in the web browser (though there are ways to run it server-side)

The Parts:

  • BOM - Browser Object Model
  • DOM - Document Object Model
  • Core - JavaScript Core Language
  • Events - Events such as clicking of mice and pressing on keys
  • Libraries - Extensions on the base JavaScript language: jQuery, ExtJS, YUI, MooTools, etc...

JavaScript History & Future (briefly described)

Syntax

Crockford's Code Conventions
Wikipidia: JavaScript Syntax

Comments

JavaScript recognizes two types of comments:

 // single line comment
 /* block of commented text
  spanning multiple
  lines */

Logging

A lot of JavaScript tutorials and courses will have you use document.write() a built in method that prints out text to the page. We will NOT be using document.write(). Instead we will use console.log(), which will print out debugging information into the Firebug, Safari and IE development consoles. This is better for a number of reasons but most of all because it allows you to create logging events in live code without destroying your page. There are some situations where some people think document.write() is still useful but I assure you that document.write will lead you down a dark path in JavaScript. Don't follow it.

A Sample JavaScript Program (Alerts)

It is a time honored tradition (at least since January 1, 1970, known in the UNIX™ world as "the beginning of time", that the first program used to introduce a programming language displays the greeting "Hello World!" JavaScript is no exception. The following example does just that:

Paste the following into the address bar of your browser:

javascript:alert( "Hello World!" );

Yep, you can run arbitrary JavaScript code right in the URL of the browser. Since JavaScript is client-side code, it's a hackers dream.

Try this:

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+ "px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+" px"}R++}setInterval('A()',5); void(0);

Where does JavaScript code get placed in the HTML file?

JavaScript can be placed in a web page in three different ways (notice that this is similar to CSS):

  • In-line
  • Embedded
  • External

In-line:

There are many built in events that JavaScript code can hook into on the page. JavaScript code can be placed as text values assigned to these events, which are given attribute names in HTML; e.g.,

<body onload="alert( 'This page has finished loading.' );">

When the page has finished loading in the web browser, a JavaScript function will show an alert.

<a onclick="alert( 'You clicked me!' );">

When the user clicks the anchor tag, it fires the onclick event.

<div onmouseover="alert( 'You hovered!' );"></div>

When the user hovers over the div, the onmouseover event is triggered.

Note: Generally, this is bad practice because it leads to duplicate code, difficult to manage HTML markup and fails to take advantage of external caching.

Embedded:

JavaScript can be placed within <script> / </script> tags either in the head or body elements of an HTML page.

For example, the modification date and time for an HTML file could be written into the body by placing the following just before your closing body tag:

<script type="text/javascript">document.write( document.lastModified );</script>

However, if you place this in the head element of you page, it will output in the head element where it won't be rendered to the visible portion of the page. This is one reason why document.write is a problematic method.

External:

Generally, you want to link JavaScript files as external resources rather than embedding it in the page. We will cover this more later but consider that different files are cached on the browser independently. This means that if you externalize your JavaScript code, you won't have to reload copies of the same code on multiple pages.

Here's an example of an external JavaScript file include, placed right before the closing body tag of your page:

    <script type="text/javascript" src="js/helloworld.js"></script>

These files, just like externally linked css files, can be referenced in the following ways:

  • Absolute reference: "http://ipirates.net/js/jsfile.js"
  • Relative reference (to the html document loading it): "js/jsfile.js"
  • Absolute Site Path: "/js/jsfile.js" (the initial / means it will look at the root of the web url)
  • Absolute reference to an external server: "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

Additional Tutorials

No comments yet.
You must be logged in to post a comment.
TOP