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?
HTML and CSS are used to construct simple web pages
but we haven't yet programmed !
JavaScript will give us a way to express
behaviour for pages

What is JavaScript?

a programming language
incorporated into web browsers
used to describe the behaviour of the web pages

What is a programming language?

a way to describe to a computer some behaviour;
some calculation or other action that you want to computer to do for you (a program)
all of the programming languages do the same job
of letting the programmer express instructions
for some behaviour in a precise-enough way
that the computer can actually follow them
what is the difference between
a programming language and a markup/style language ?

What can we do using JavaScript?

  • modify the current HTML page
    (adding, removing, or changing content)

  • respond to user events
    (like entering some text, or clicking somewhere)

  • express the logic of an intended action by putting the two points above together

JavaScript Basics

<script> tag

links a JavaScript file to the HTML codes

<head>
    <meta charset="UTF-8" />
    <title>Page with a style sheet</title>
    <script src="first-code.js" />
</head>

let's take a look at an HTML page linked to first-code.js
containing an alert function call here

<script> tag

you can also put a JavaScript code in the <script> tag

<head>
    <meta charset="UTF-8" />
    <title>Page with a style sheet</title>
    <script>
        alert('Hello world!');
    </script>
</head>

JavaScript Function

a function represents some logic that we can run
by calling the function
(mentioning a function by name with parenthesis after it)

the alert function is built into JavaScript
we can have our own defined functions as well

JavaScript Function Arguments

arguments are the values that the function needs to be able to do its work

we put whatever arguments the function needs to run inside the parenthesis while calling the function

Controlling Execution

do we really want all of the behavioural code be executed while the page loads ?

what should we do if we want to respond to a user action after the page loads ?

JavaScript Function Declaration

a way of preparing whatever needs to be done in a ready-to-execute package !

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

onclick attribute

a HTML attribute which guides the browser to call a JavaScript code upon click event! lets try this code here
Any Questions?