Intro to A452 HTML and JavaScript

Transcript Intro to A452 HTML and JavaScript

HTML & JavaScript
Introducing HTML and JavaScript – Creating Interactive Web Pages
Ray Tomlinson, a scientist
from Cambridge, introduced
electronic mail in 1972. He
used the @ to distinguish
between the sender's name
more: en.wikipedia.org/wiki/Email
and Read
network
name in the email address.
A typical fibre-optic cable
five-thousandths of an inch
thick can carry up to 2.5
Read more: http://en.wikipedia.org/wiki/Optical_fiber_cable
billion
bits of data per
You use it everyday, but what IS the Internet?
 The Internet is a
worldwide collection of
computer networks,
cooperating with each
other to exchange data
using a common software
standard.
*It comes from two words …
Does anyone “own” the Internet?
 Interestingly, the
Internet lacks a central
authority—so there is no
"Internet, Inc." that has
supreme control of the
Internet.
 Beyond the various
governing boards that
work to establish policies
and standards, the
Internet is bound by few
rules and answers to no
single organization.
Strange Theories
 One conspiracy theorist wrote this:
 We all use the Internet - and most
web pages start with "www", right?
 Since there is no "W" in Hebrew,
And this brings us to
what WWW stands
for…..
the closest letter is a "V", and V or
Vav has the value of 6.
Thus VVV is like writing the number
6 three times, thus 666.
WWW
 Stands for the WORLD WIDE WEB
 The world wide web is not the same thing as the Internet
 The World Wide Web (abbreviated as WWW or W3,[2]
commonly known as the Web, or the "Information
Superhighway"), is a system of interlinked hypertext
documents accessed via the Internet. With a web browser, one
can view web pages that may contain text, images, videos, and
other multimedia, and navigate between them via hyperlinks
(WIKIPEDIA)
Read more about the history of the web
Click to go to this website
Any idea what this is?
The first ever
web page!
Let’s look closely at pages on the
WEB
Open any
webpage
and go to
VIEW SOURCE
You’ll see a bunch of gobbledygook
that looks like this ….
Look closely and notice the tag
HTML
So what is HTML?
 HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language
 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 The purpose of the tags are to DESCRIBE OR CREATE PAGE
CONTENT
In the next few slides you will learn
how to create your very own web
page from SCRATCH!
http://www.w3schools.com is a great place to start learning how to use HTML
1
Open up a blank NOTEPAD document and type out the code below
Exactly as it is.
The heading or
header would go inbetween these tags
The main part of
the website or
would go in the
body
Closing tags
have the “/”
2
You can now add a little content - like shown below. Feel free to
Customise it and add what you want to say!
3
Now save the FILE by going to FILE – SAVE AS – and call it
MYWEBSITE.HTML (the file extension must be HTML in order
For it to be converted to a web page)
4
Go back to wherever you saved it and you should find a WEBPAGE.
Double click to open!
*It won’t look terribly impressive.
Look at the example below.
5
Go to www.javascriptkit.com click on FREE JAVASCRIPTS 
Go to Javascript games  Scroll down to the Love Game.
Cut and paste this
into the “body” part
of the HTML page
6
You should come up with a webpage with an embedded JavaScript
Game in it. See screenshot below.
6
Analyse the code more carefully. Think about how JAVSCRIPT differs
From VB.Net
Introducing JavaScript
 JavaScript is THE scripting language of the Web.
 JavaScript is used in billions of Web pages to add
functionality, validate forms, communicate with the
server, and much more.
 JavaScript is easy to learn. You will enjoy it.
From: http://www.w3schools.com/js/default.asp
Visit (above site) for tutorials and more information for independent learning
What is JavaScript?
 JavaScript was designed to add interactivity to HTML pages
 JavaScript is a scripting language
 A scripting language is a lightweight programming language
 JavaScript is usually embedded directly into HTML pages
 JavaScript is an interpreted language (means that scripts execute
without preliminary compilation)
 Everyone can use JavaScript without purchasing a license
Are Java and JavaScript the same?
 NO!
 Java and JavaScript are two completely different languages in both
concept and design!
 Java (developed by Sun Microsystems) is a powerful and much more
complex programming language - in the same category as C and
C++.
Mozilla CTO, Brendan Eich
created JavaScript
in a mind-blowing 10 days while
working for Netscape in 1995.
According to Eich,
"I was under marketing orders
to make it [JavaScript] look like
Java but not make it too big for
its britches … [it] needed to be a
silly little brother language."
“Var” used instead of DIM. This is
declaring a variable called
“LoveCount” and initialising it’s
value to “0”
Here we have a bit of String
Manipulation. Finding the LENGTH
of a string, converting to upper
case etc.
Here is an example of SELECTION.
In this case, the IF STATEMENT
This is a FOR LOOP. It starts at Count = 0
and the condition says that if it is less
than the variable firstlength count up
(increment by 1)
Count++ means go up by 1
Use of OPEN AND
CLOSED curly
brackets – to denote
opening /closing a
function
Notice the semicolon after each line.
WHAT ELSE IS DIFFERENT?
A few more Javascript examples
 1. A simple login and password interface and script
 2. Validating user input (checking the validity of a
number)
 3. Email validation.
Simple Login Screen
1. Create a basic HTML page with a HEAD and BODY
2. Cut and paste the below code into the BODY section
<script language="javascript">

</script>
<center>
<table bgcolor="white" cellpadding="12" border="1">
<tr><td colspan="2"><center><h1><i><b>Login
Area</b></i></h1></center></td></tr>
<tr><td><h1><i><b>UserID:</b></i></h1></td><td><form name="login"><input
name="id" type="text"></td></tr>
<tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"
type="password"></td></tr>
<tr><td><center><input type="button" value="Login"
onClick="pasuser(this.form)"></center></td><td><center><br><input
type="Reset"></form></td></tr></table></center>
Check a
number
(Validation)
1. Create a basic HTML page with a
HEAD and BODY
2. Cut and paste the below code
into the BODY section
<form name="checknum" onSubmit="return checkban()">
Please enter your age:<br>
<input type="text" name="pnum">
<input type="submit" value="Submit">
</form>
<script language="JavaScript1.2">
/*Number check scriptBy JavaScript Kit (www.javascriptkit.com)
Over 200 free scripts here!
*/
function checknumber(){
var x=document.checknum.pnum.value
var anum=/(^\d+$)|(^\d+\.\d+$)/
if (anum.test(x))
testresult=true
else{
alert("Please input a valid number!")
testresult=false
}
return (testresult)
}
</script>
<script>
function checkban(){
if (document.layers||document.all||document.getElementById)
return checknumber()
else
return true
}
</script>
<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
Kit</a></font></p>
Email Validation in Javascript
Often times in a form, the single
most important field is the email
address field. If a user inadvertently
enters an incorrect address, the
method of contact between you and
the user is cut off. Here's a script
that forces the user to double check
whether a valid email is entered
before submitting the form. It alerts
a box with the entered address
upon form submission, and asks the
user whether this information is
correct or not. Crude yet highly
effective way to enforce a valid
email entry!
User enters email
and clicks submit.
It checks format of
email.
Find out how
Step 1: Cut and paste the below script into the <head>
section of your page:
<script>
/*
Manual email check script
By JavaScript Kit (http://javascriptkit.com)
Over 400+ free scripts here!
*/
function alertemail(which){
if (confirm("You entered \""+which.value+"\" as your email address. Is that correct?"))
return true
else{
which.focus()
return false
}
}
</script>
Step 2: Inside the text box that holds the email address, give it a
name using the "name" attribute (ie: useremail). For example:
<form>
"
<input type="text" value="Enter your email here!"
name="useremail">
</form>
Step 2: Inside the text box that holds the email address, give it a name
using the "name" attribute (ie: useremail). For example:
<form onSubmit="return
alertemail(useremail)">
"
<input type="text" value="Enter your email
here!" name="useremail">
</form>
Note that the name value specified in step 2 ("useremail") is used also as the parameter inside onSubmit.
You're done!
What do you think the output
of this little snippet of
JavaScript code will be?
Recap on the “For Loop”
 We could use one hundred lines of code to PRINT the
word “Hi” one hundred times - this would be
inefficient, time consuming and silly …..
 The FOR LOOP solves this problem.
 It provides a more elegant solution.
RECAP
The above FOR LOOP in JavaScript contains three main
components:
1. y=0 //The starting point of a for loop
2. y<=99 //The ending boundary of a for loop
3. y++ //How the "for" loop is incremented. y++ means
increment it by one step each time until the
boundary.
Plenary: (DISCUSSION)
How do you think the Internet started? Think about
where it is now? Visit the WAYBACKARCHIVE and see
the first ever websites. Where do you think the
Internet and WWW will be in a few years?
http://archive.org/web/web.php
And for the Record ….
 Google isn’t the
only Search
Engine around –
there are others.
Check out the
Search Engine
List at:
http://www.thes
earchenginelist.c
om/
What do you think?
http://www.youtube.com/watch?v=oNofb-OlZyQ

Intro to A452 HTML and JavaScript

Transcript Intro to A452 HTML and JavaScript

Directory