CMPT 165

Introduction to the Internet
and the World Wide Web

By Hassan S. Shavarani

Unit4: Intro to JavaScript

Topics

  1. Programming and Web Pages
  2. JavaScript Basics
  3. Variables and Functions
  4. The jQuery Library
  5. Working with jQuery
  6. Events and Behaviour
  7. Why doesn't my code work?

JavaScript Functions


say_hello = function() {
    alert('Hello world!');
}

this code creates a variable named say_hello, this variable holds a function

JavaScript Functions

a function contains some logic
  • it could be a particular calculation
  • code you want to execute as the result of an event
  • or any other sensible collection of logic

function_name = function(optional arguments list) {
    ...
}

Variable Assignment Statement

a variable is a way to store a value in our program

the = is used to assign to the variable

it takes the value on the right and stores it in the variable named on the left

when a variable assignment statement runs
the value is stored in the computer's memory
and the variable name can be used to refer back to that value later

JavaScript Variable Types

in JavaScript, any type of value can be stored in any variable,
and there are many types the language supports

Variable Types - Numbers

Numbers can be stored and calculated on in probably the obvious ways


count = 7
pi = 3.1416
more = count + 1
twice_as_much = count * 2

Variable Types - Strings

strings are sequences of characters (text)


greeting = 'Hello'
name = "Becky B Barrington"
personal_greeting = greeting + ' ' + name

Variable Types - Functions

as we have seen, functions can be stored in variables

Variable Types

Let's take a look at this important points [*] regarding the variables in JavaScript

Javascript Objects

an object is a value in JavaScript that can contain other things:
numbers, strings, functions, other objects, ...

the two important types of the objects we are interested in are arrays and JSON objects

Javascript Objects

the type of information you're dealing with obviously affects what you can do with it
For example, this code makes sense if a and b are both numbers:
it will subtract the two values

result = a - b

The Browser Object Model (BOM)

the Browser Object Model (BOM) allows JavaScript to "talk to" the browser

it is served through the window object

window object

here are the most important elements of
the window object

The HTML DOM document Object

the object which represents your webpage parsed model

lets look at its use cases here

console Object

The Console object provides access to the browser's debugging console

lets look at its use cases here

Commenting On The Code

you may leave comments on your code while developing using JavaScript
You can learn about commenting syntax over here

Any Questions?