Scribd
Upload
9 views31 pages

Intro to Javascript-1

JavaScript is a crucial programming language for web development, enabling dynamic and interactive features on web pages. It allows for the manipulation of HTML and CSS, and is essential alongside HTML and CSS for defining content and layout. The document covers JavaScript basics, including variables, operators, functions, and methods of embedding JavaScript in HTML.

Uploaded by

zennn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
9 views31 pages

Intro to Javascript-1

JavaScript is a crucial programming language for web development, enabling dynamic and interactive features on web pages. It allows for the manipulation of HTML and CSS, and is essential alongside HTML and CSS for defining content and layout. The document covers JavaScript basics, including variables, operators, functions, and methods of embedding JavaScript in HTML.

Uploaded by

zennn
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 31

JavaScript Basics

• JavaScript is the programming language of the


web.

• It can update and change both HTML and CSS.

• It can calculate, manipulate and validate data.

CIS 233
Why Use JavaScript?

• JavaScript enhances Web pages with dynamic and


interactive features.

• JavaScript runs in client software.

• JavaScript 1.3 works with version 4.0 browsers.

CIS 233
Why Study JavaScript?

JavaScript is one of the 3 languages all web


developers must learn:

1. HTML to define the content of web pages

2. CSS to specify the layout of web pages

3. JavaScript to program the behavior of web


pages

CIS 233
How to Create Variables

CIS 233
Line Comments

Block Comments

CIS 233
Data Types

CIS 233
JavaScript Assignment

• The Assignment Operator (=) assigns a value


to a variable:

CIS 233
Types of Operators

CIS 233
Arithmetic Operators

CIS 233
Comparison Operators

CIS 233
Logical Operators

• && - and

• || - or

• ! - Not

• & —— > Checks both sides of the operation.


&& —— > First left condition is evaluated and
if it comes out to be true then the
second(right-hand) condition is evaluated
otherwise it won't evaluate the right-hand side
expression
CIS 233
Bitwise Operators
Bit operators work on 32 bits numbers.
Any numeric operand in the operation is converted into a 32 bit number. The result is
converted back to a JavaScript number.

CIS 233
What Can JavaScript Do?

• Common JavaScript tasks can replace server-


side scripting.

• JavaScript enables shopping carts, form


validation, calculations, special graphic and
text effects, image swapping, image mapping,
clocks, and more.

CIS 233
JavaScript Syntax.

• Unlike HTML, JavaScript is case sensitive.

• Dot Syntax is used to combine terms.


• e.g., document.write("Hello World")

• Certain characters and terms are reserved.

• JavaScript is simple text (ASCII).

CIS 233
JavaScript Terminology.

• JavaScript programming uses specialized


terminology.

• Understanding JavaScript terms is fundamental


to understanding the script.
• Objects, Properties, Methods, Events, Functions,
Values, Variables, Expressions, Operators.

CIS 233
Objects

• Objects refers to windows, documents, images,


tables, forms, buttons or links, etc.

• Objects should be named.

• Objects have properties that act as modifiers.

CIS 233
Properties

• Properties are object attributes.

• Object properties are defined by using the


object's name, a period, and the property
name.
• e.g., background color is expressed by:
document.bgcolor .
• document is the object.
• bgcolor is the property.

CIS 233
Methods

• Methods are actions applied to particular


objects. Methods are what objects can do.
• e.g., document.write(”Hello World")
• document is the object.
• write is the method.

CIS 233
Events

• Events associate an object with an action.


• e.g., the OnMouseover event handler action can
change an image.
• e.g., the onSubmit event handler sends a form.

• User actions trigger events.

CIS 233
Functions

• Functions are named statements that performs


tasks.
• e.g., function doWhatever () {statement here}
• The curly braces contain the statements of the
function.

• JavaScript has built-in functions, and you can


write your own.

CIS 233
Values

• Values are bits of information.

• Values types and some examples include:


• Number: 1, 2, 3, etc.
• String: characters enclosed in quotes.
• Boolean: true or false.
• Object: image, form
• Function: validate, doWhatever

CIS 233
Variables

• Variables contain values and use the equal


sign to specify their value.

• Variables are created by declaration using


the var command with or without an initial
value state.
• e.g. var month;
• e.g. var month = April;

CIS 233
Expressions

• Expressions are commands that assign


values to variables.

• Expressions always use an assignment


operator, such as the equals sign.
• e.g., var month = May; is an expression.

• Expressions end with a semicolon.

CIS 233
Operators

• Operators are used to handle variables.

• Types of operators with examples:


• Arithmetic operators, such as plus.
• Comparisons operators, such as equals.
• Logical operators, such as and.
• Control operators, such as if.
• Assignment and String operators.

CIS 233
Methods of Using JavaScript.

1. JavaScripts can reside in a separate page.

2. JavaScript can be embedded in HTML


documents -- in the <head>, in the <body>,
or in both.

3. JavaScript object attributes can be placed


in HTML element tags.
e.g., <body onLoad="alert('WELCOME')">

CIS 233
1. Using Separate JavaScript Files.

• Linking can be advantageous if many pages use


the same script.

• Use the source element to link to the script file.

<script src="myjavascript.js”
language="JavaScript1.2”
type="text/javascript">
</script>

CIS 233
2. Embedding JavaScript in HTML.

• When specifying a script only the tags


<script> and </script> are essential, but
complete specification is recommended:

<script language="javascript”
type="text/javascript">
<!-- Begin hiding
window.location=”index.html"
// End hiding script-->
</script>

CIS 233
Using Comment Tags

• HTML comment tags should bracket any script.

• The <!-- script here --> tags hide scripts


in HTML and prevent scripts from displaying in
browsers that do not interpret JavaScript.

• Double slashes // are the signal characters


for a JavaScript single-line comment.

CIS 233
3. Using JavaScript in HTML Tags.

• Event handlers like onMouseover are a perfect


example of an easy to add tag script.

<a href=”index.html”
onMouseover="document.logo.src='js2.gif'"
onMouseout="document.logo.src='js.gif'">
<img src="js.gif" name="logo">
</a>

CIS 233
Creating an Alert Message

• The following script in the <body> tag uses the


onLoad event to display an Alert window

• The message is specified within parenthesis.

<body onLoad="alert('WELCOME. Enjoy


your visit. Your feedback can improve
cyberspace. Please let me know if you
detect any problems. Thank you.')">

CIS 233
• End

CIS 233

You might also like