Introduction to JavaScript (1).ppt
12,048 views
16 slides
Sep 26, 2022
Slide 1 of 16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
About This Presentation
Javascript for Dummies
Slide Content
Introduction to JavaScript
Introduction
What is it?
How does it work?
What is Java?
Learning JavaScript
JavaScript Statements
JavaScript and HTML forms
What is it?
How does it work?
What is Java?
Learning JavaScript
JavaScript Statements
JavaScript and HTML forms
What is JavaScript?
Browsers have limited functionality
Text, images, tables, frames
JavaScript allows for interactivity
Browser/page manipulation
Reacting to user actions
A type of programming language
Easy to learn
Developed by Netscape
Now a standard exists –
www.ecma-international.org/publications/
standards/ECMA-262.HTM
Browsers have limited functionality
Text, images, tables, frames
JavaScript allows for interactivity
Browser/page manipulation
Reacting to user actions
A type of programming language
Easy to learn
Developed by Netscape
Now a standard exists –
www.ecma-international.org/publications/
standards/ECMA-262.HTM
JavaScript Allows Interactivity
Improve appearance
Especially graphics
Visual feedback
Site navigation
Perform calculations
Validation of input
Other technologies
javascript.internet.com
Improve appearance
Especially graphics
Visual feedback
Site navigation
Perform calculations
Validation of input
Other technologies
javascript.internet.com
How Does It Work?
Embedded within HTML page
View source
Executes on client
Fast, no connection needed once loaded
Simple programming statements combined with
HTML tags
Interpreted (not compiled)
No special tools required
Embedded within HTML page
View source
Executes on client
Fast, no connection needed once loaded
Simple programming statements combined with
HTML tags
Interpreted (not compiled)
No special tools required
What is Java?
Totally different
A full programming language
Much harder!
A compiled language
Independent of the web
Sometimes used together
Totally different
A full programming language
Much harder!
A compiled language
Independent of the web
Sometimes used together
Learning JavaScript
Special syntax to learn
Learn the basics and then use other people's
(lots of free sites)
Write it in a text editor, view results in browser
You need to revise your HTML
You need patience and good eyesight!
Special syntax to learn
Learn the basics and then use other people's
(lots of free sites)
Write it in a text editor, view results in browser
You need to revise your HTML
You need patience and good eyesight!
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('This is my first
JavaScript Page');
</script>
</body>
</html>
Note the symbol for
line continuation
<html>
<head><title>My Page</title></head>
<body>
<script language="JavaScript">
document.write('This is my first
JavaScript Page');
</script>
</body>
</html>
Note the symbol for
line continuation
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<script language=“JavaScript">
document.write('<h1>This is my first
JavaScript Page</h1>');
</script>
</body>
</html>
HTML written
inside JavaScript
<html>
<head><title>My Page</title></head>
<body>
<script language=“JavaScript">
document.write('<h1>This is my first
JavaScript Page</h1>');
</script>
</body>
</html>
HTML written
inside JavaScript
JavaScript Statements
<html>
<head><title>My Page</title></head>
<body>
<p>
<a href="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');" >
My Page</A>
</p>
</body>
</html>
JavaScript written
inside HTML
An Event
<html>
<head><title>My Page</title></head>
<body>
<p>
<a href="myfile.html">My Page</a>
<br />
<a href="myfile.html"
onMouseover="window.alert('Hello');" >
My Page</A>
</p>
</body>
</html>
JavaScript written
inside HTML
An Event
Example Statements
<script language="JavaScript">
window.prompt('Enter your name:','');
</script>
<form>
<input type="button" Value="Press"
onClick="window.alert('Hello');">
</form>
Another event
Note quotes: " and '
<script language="JavaScript">
window.prompt('Enter your name:','');
</script>
<form>
<input type="button" Value="Press"
onClick="window.alert('Hello');">
</form>
Another event
Note quotes: " and '
HTML Forms and JavaScript
JavaScript is very good at processing user input
in the web browser
HTML<form> elements receive input
Forms and form elements have unique names
Each unique element can be identified
Uses JavaScript Document Object Model (DOM)
JavaScript is very good at processing user input
in the web browser
HTML<form> elements receive input
Forms and form elements have unique names
Each unique element can be identified
Uses JavaScript Document Object Model (DOM)
Naming Form Elements in HTML
<form name="addressform">
Name: <input name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>
<form name="addressform">
Name: <input name="yourname"><br />
Phone: <input name="phone"><br />
Email: <input name="email"><br />
</form>
Forms and JavaScript
document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value
document.formname.elementname.value
Thus:
document.addressform.yourname.value
document.addressform.phone.value
document.addressform.email.value
Using Form Data
Personalising an alert box
<form name="alertform">
Enter your name:
<input type="text" name= "yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' +
document.alertform.yourname.value );">
</form>
Personalising an alert box
<form name="alertform">
Enter your name:
<input type="text" name= "yourname">
<input type="button" value= "Go"
onClick="window.alert('Hello ' +
document.alertform.yourname.value );">
</form>
Tips
Check your statements are on one line
Check your " and ' quotes match
Take care with capitalisation
Lay it out neatly -use tabs
Remember in the workbook denotes a
continuing line
Be patient
Presentation slides adapted from scom.hud.ac.uk/scomsjw/Web%20Authoring%20Module/Lecture%20Slides/introjs.ppt
Check your statements are on one line
Check your " and ' quotes match
Take care with capitalisation
Lay it out neatly -use tabs
Remember in the workbook denotes a
continuing line
Be patient
Presentation slides adapted from scom.hud.ac.uk/scomsjw/Web%20Authoring%20Module/Lecture%20Slides/introjs.ppt
Tags
Categories
EducationDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 12,048
- Slides 16
- Age 1164 days
Related Slideshows
11
TLE-9-Prepare-Salad-and-Dressing.pptxkkk
MaAngelicaCanceran
32 views
12
LESSON 1 ABOUT MEDIA AND INFORMATION.pptx
JojitGueta
27 views
60
GRADE-8-AQUACULTURE-WEEKQ1.pdfdfawgwyrsewru
MaAngelicaCanceran
42 views
26
Feelings PP Game FOR CHILDREN IN ELEMENTARY SCHOOL.pptx
KaistaGlow
41 views
![Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx](https://slidepub.com/thumb/5828/284015828.jpg)
54
Jeopardy_Figures_of_Speech_Template.pptx [Autosaved].pptx
acecamero20
25 views
7
Jeopardy_Figures_of_Speech.pptxvdsvdsvsdvsd
acecamero20
25 views