CSIS 138 Javascript Class1

Post on 06-May-2015

1,324 views 0 download

description

Instructor Teresa Pelkie at Palomar College - Introduction to JavaScript

transcript

1

JavaScript – Class 1Overview of the Basics

Objects• Properties• Methods• Events

2

JavaScript Syntax

document.bgColor = “red”;

document.write( );

// change color to red

/* change color to red and write to the page */

3

JavaScript Objects

Built in JavaScript ObjectsNavigator Object Date Object Math Object String Object Array Object

4

JavaScript Objects

Browser Objects

5

Where is JavaScript code placed?

<head>

<script type=”text/JavaScript” language="JavaScript">  <!- -

statements go here ; //-->

</script>

</head>

6

Where is JavaScript code placed?

<head>

<script type=”text/JavaScript”> 

statements go here ;

</script>

</head>

7

Where is JavaScript code placed?

<head>

<script type=”text/JavaScript” src=”file.js”>

</script>

</head>

8

Where is JavaScript code placed?

<head>

<script type=”text/JavaScript”>  statements go here ;

</script>

<script type=”text/JavaScript” src=”file.js”>

</script>

</head>

9

Where is JavaScript code placed?

<body>

<a href="#" onmouseover=“showPic();">click</a>

<a href=”javascript:openWin();”>click</a>

</body>

10

<noscript>

You need JavaScript to see this page!

</noscript>

11

Data and Types

Information that we process and displayCan be in many forms or types

Numeric String Boolean

12

Variables

Hold information or dataCan hold these types of data

Numeric String Boolean

13

How we create or declare a variable

var myName;

14

Initializing a variable

var myName;

myName = “Teresa”;

_______________________

var myName = “Teresa”;

15

Initializing a variable

var myAge;

myAge = 21;

_______________________

var zipCode;

zipCode = “92082”;

16

The alert() method

alert();

window.alert();

17

The alert() method

<head>

<script language="JavaScript"> alert ("This is an alert()"); </script>

</head>

18

The alert() method

19

The alert() method

<script language=”JavaScript”> var myFirstVariable; myFirstVariable = “Hello!”;

alert(myFirstVariable);

</script>

20

The alert() method

21

The write() method

<body>

<script language=”JavaScript”> document.write ("Hello World");</script>

</body>

22

The write() method

23

The write() method

<body>

<script language=”JavaScript”> document.write (‘Hello “Big” World’);</script>

</body>

24

The write() method

25

The write() method

<script language="JavaScript">var firstVar;var secondVar

firstVar = "Hello";secondVar = "World!";

document.write(firstVar + “ “ + secondVar);

</script>

26

The write() method

27

The write() method

<script language="JavaScript">var first;var last;

first = “Teresa";last = “Pelkie";

document.write(“<b>Hello “ + first + “ “ + last + “</b>”);

</script>

28

The write() method

29

JavaScript – Class 1

Assignment 1