introduction to programming and javascript. programming
TRANSCRIPT
Introduction to Programming and JavaScript
Programming
What is a Program?
Instructions
ComputerUnderstands
Perform Task
What is Programming?
Requirements
Process
Code
Test
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
Object Oriented Programs
OOP
Basics of Objects
InterfacePrint this,
Current ink level?,Out of paper!, …
?Properties
Ink level,Paper in tray,
…
MethodsPrint page, Eject page,
…
Algorithms and Programs
Algorithm ProgramEffective
Efficient
Reliable
Understandable
Maintainable
Control Structures
Sequence Conditional
Open File
Format File
Print File
Save File
Close File
Get Section Status
Section Full?
RegisterStudent
RejectRegistration
No Yes
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!
JavaScript
<script type="text/javascript">function shutdown(){
alert('Shutting Down Internet.')}</script>
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>
<script>
<script type=“text/javascript”>
</script>
Program code written in JavaScript. JavaScript comments. NO HTML!
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
<noscript>
• At start of body.
• Alert users without JavaScript support.
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>
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 */
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!
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>
Bugs – Logic Errors
function compute_gross_pay(hours, rate){
Gross = hours + rate
return Gross
}