Introduction to Programming and JavaScript. Programming.

20
Introduction to Programming and JavaScript

Transcript of Introduction to Programming and JavaScript. Programming.

Page 1: Introduction to Programming and JavaScript. Programming.

Introduction to Programming and JavaScript

Page 2: Introduction to Programming and JavaScript. Programming.

Programming

Page 3: Introduction to Programming and JavaScript. Programming.

What is a Program?

Instructions

ComputerUnderstands

Perform Task

Page 4: Introduction to Programming and JavaScript. Programming.

What is Programming?

Requirements

Process

Code

Test

Page 5: Introduction to Programming and JavaScript. Programming.

Types of Programs

OS/Hardware

ApplicationRuntimeModule

Script Processor

Interpreter

Byte Code

Executable(Machine Code)

Compiler

Compiler

Macro/Script

Applet

Executable

Program

Interpreted Program

SourceCode

SourceCode

SourceCode

SourceCode

Virtual Machi

ne

Page 6: Introduction to Programming and JavaScript. Programming.

Object Oriented Programs

OOP

Page 7: Introduction to Programming and JavaScript. Programming.

Basics of Objects

InterfacePrint this,

Current ink level?,Out of paper!, …

?Properties

Ink level,Paper in tray,

MethodsPrint page, Eject page,

Page 8: Introduction to Programming and JavaScript. Programming.

Algorithms and Programs

Algorithm ProgramEffective

Efficient

Reliable

Understandable

Maintainable

Page 9: Introduction to Programming and JavaScript. Programming.

Control Structures

Sequence Conditional

Open File

Format File

Print File

Save File

Close File

Get Section Status

Section Full?

RegisterStudent

RejectRegistration

No Yes

Page 10: Introduction to Programming and JavaScript. Programming.

Control Structures

Loop

Open Student File

Get Student Record

Print Grade Report

Students Left?

Close Student File

Yes

No

Transfer (GoTo)

Open File

Print File

Format File

Close File

Save File

Spaghetti Code!

Page 11: Introduction to Programming and JavaScript. Programming.

JavaScript

<script type="text/javascript">function shutdown(){

alert('Shutting Down Internet.')}</script>

Page 12: Introduction to Programming and JavaScript. Programming.

JavaScript

• A programming language.

• Executed as a script.

• Object oriented.

• Extensive document object model (DOM).

• No file read/write access (except cookies).

<script type="text/javascript">function shutdown(){

alert('Shutting Down Internet.')}</script>

Page 13: Introduction to Programming and JavaScript. Programming.

<script>

<script type=“text/javascript”>

</script>

Program code written in JavaScript. JavaScript comments. NO HTML!

Page 14: Introduction to Programming and JavaScript. Programming.

Script Locations<html>

</html>

<head>

</head>

<body>

</body>

<script> … </script>Script is reusable.“Call” script to execute it.

<script> … </script>Script is executed as the browser displays the web page.

ExternalScriptFile

Page 15: Introduction to Programming and JavaScript. Programming.

<noscript>

• At start of body.

• Alert users without JavaScript support.

Page 16: Introduction to Programming and JavaScript. Programming.

Objects, Events, & Event Handlers

Object

Click button= Click Event

<body><h1>Shutdown Internet?</h1><input type="button"

value="Shutdown Internet" onclick="shutdown()" />

</body>

<head><script type="text/javascript">function shutdown(){

alert('Shutting Down Internet.')}</script></head>

Page 17: Introduction to Programming and JavaScript. Programming.

Comments Please!JavaScript code … // comment

JavaScript code … /* comment */

JavaScript code … /* commentcontinues on this lineand on this line */

JavaScript code … /* comment starts on this lineand continues on this lineand on this line */

Page 18: Introduction to Programming and JavaScript. Programming.

Bugs – Syntax Errors<html><head><script type="text/javascript">function shutdown(){

do alert('Shutting Down Internet.')}</script></head><body><h1>Shutdown Internet?</h1><input type="button" value="Shutdown Internet" onclick="shutdown()" /></body></html>

line 8

error is here!

Page 19: Introduction to Programming and JavaScript. Programming.

Bugs – Runtime Errors<html><head><script type="text/javascript">function shutdown(){

alert('Shutting Down Internet.')}</script></head><body><h1>Shutdown Internet?</h1><input type="button"

value="Shutdown Internet" onclick="do_onclick()" />

</body></html>

Page 20: Introduction to Programming and JavaScript. Programming.

Bugs – Logic Errors

function compute_gross_pay(hours, rate){

Gross = hours + rate

return Gross

}