JavaScript Overview for Beginners: CS 22 at Stanford University, Assignments of Designs and Groups

An introduction to JavaScript, a programming language used to enhance web page functionality. It covers the basics of JavaScript, including why it's used, its placement in HTML, and general terms and concepts. Students will learn about actions, event handlers, functions, objects, properties, scripts, and more.

Typology: Assignments

2021/2022

Uploaded on 07/05/2022

tanya_go
tanya_go 🇦🇺

4.7

(73)

1K documents

1 / 12

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
J
Ja
av
va
aS
Sc
cr
ri
ip
pt
t:
:
A
A
Q
Qu
ui
ic
ck
k
a
an
nd
d
D
Di
ir
rt
ty
y
O
Ov
ve
er
rv
vi
ie
ew
w
Stanford University Continuing Studies CS 22
Enhanced Web Site Design
pf3
pf4
pf5
pf8
pf9
pfa

Partial preview of the text

Download JavaScript Overview for Beginners: CS 22 at Stanford University and more Assignments Designs and Groups in PDF only on Docsity!

JaJavvaaSSccrriipptt::

A “A “QQuuiicckk aanndd DDiirrttyy””

OvOveerrvviieeww

Stanford University Continuing Studies CS 22

Enhanced Web Site Design

S TANFORD UNIVERSITY C ONTINUING S TUDIES CS 22 JAVASCRIPT

  • Table of Contents.......................................................... Table of Contents
  • Introduction to JavaScript
    • Why use JavaScript?
    • Scope
    • Next Steps
  • Overview
  • General Terms..............................................................
  • Object Terms
  • Statement Terms
  • Resources

S TANFORD UNIVERSITY C ONTINUING S TUDIES CS 22 JAVASCRIPT

Overview

JavaScript can be placed anywhere in the HTML as long as it stays within its tags:

However, to ensure that functions aren’t accidentally called before the JavaScript is loaded, the script should go within the and tags.

The comment tag () indicates the actual JavaScript. Everything between the will be ignored by browsers that cannot process the script.

The code // tells the browser to ignore the following text and to exclude it from the JavaScript.

The following code is used to indicate a function:

function someFunction ()

{JavaScript statements }

This is where the actual JavaScript goes. The brackets {} separate the statements in the function.

To end a JavaScript, the following code is used:

//-->

S TANFORD UNIVERSITY C ONTINUING S TUDIES CS 22 JAVASCRIPT

General Terms

Action: This property is a reflection of the action attribute in an HTML tag, including the forms destination URL.

Cookie: An object containing client information that can be accessed by the server

Event Handler: Attributes of HTML tags embedded in documents. The attribute assigns a JavaScript command or function to execute when the event occurs

Function: A user-defined or built-in set of statements that perform a task. It can also return a value when used with the return statement.

Java: An object-oriented, platform-independent programming language developed by Sun Microsystems used to provide additional functionality to Web pages. Programming in Java requires a Java Development Kit with compiler and core classes.

Literal: An absolute value not defined by a variable. Examples: 1, 3.1415927, “Bob”, false, true.

Method: A function assigned to an object. For example, bigStringtoUpperCase(); returns an uppercase version of the string contained in bigString.

Object: A construct with properties that are JavaScript variables or other objects. Functions associated with an object are known as the object’s methods.

Property: Describes an object. A property is defined by assigning it a value. There are several properties in JavaScript that contain constants (values that never change).

Protocol: Returns a string with the initial portion of the URL, which indicates the access method (http://, ftp://, mailto:, etc.).

Script: One or more JavaScript commands enclosed in a
S TANFORD UNIVERSITY C ONTINUING S TUDIES CS 22 JAVASCRIPT

Submit: Causes the form to be sent to the CGI program specified in the ACTION attribute.

Text: A one-line input field.

Textarea: Similar to a text object, with the addition of multiple lines. A textarea object can also be updated by assigning new contents to its value.

Window: Created by the browser when a web page is loaded containing properties that apply to the whole page. It is the top-level object for each document, location, and history object. Because its existence is assumed, you do not have to reference the name of the window when referring its objects, properties, or methods.

S TANFORD UNIVERSITY C ONTINUING S TUDIES CS 22 JAVASCRIPT

Statement Terms

Break: Terminates the current for or while loop and passes control to the first statement after the loop.

For: Creates a loop with three optional expressions enclosed in parentheses and separated by semicolons, followed by a set of statements to be executed during the loop:

for(initialExpression; condition; updatedExpression)

{

statements

}

The first expression is used to initialize the counter variable, which can be a new variable declared with the var (see Var , below). The condition expression is evaluated on each pass through the loop. If the condition is true, the loop statements are executed. The update expression is used to increment the counter variable.

for(variable in object)

{

statements

}

For each property, the statement block is executed.

S TANFORD UNIVERSITY C ONTINUING S TUDIES CS 22 JAVASCRIPT

Var: Declares a variable and optionally initializes it to a value. The scope of a variable is the current function, or, when declared outside a function, the current document.

Var variableName=value, variableName2=value

While: Repeats a loop as long as an expression is true.

while (condition)

{

statements

}

With: Establishes a default object for a set of statements. Any property references without an object are assumed to use the default object.

with (object)

{

statements

}

S TANFORD UNIVERSITY C ONTINUING S TUDIES CS 22 JAVASCRIPT

The with statement is useful when applied to the Math object for a set of calculations. For example:

with (Math)

{

var Value1 = cos(angle);

var Value2 = sin(angle);

}

would replace:

var Value1 = Math.cos(angle);

var Value2 = Math.sin(angle);

}