Add to collection(s) Add to saved
  1. Engineering & Technology
  2. Web Design

JavaScript - Welcome To My Course Web Page!

advertisement 
 JavaScript
is a programming language that web
browsers understand. You can use it to make
your web pages interactive by:
• Responding to user actions and changes on
the page
• Manipulating the web page’s contents and
behavior
• Communicating with the user directly
How Are HTML and Javascript Different?
 JavaScript commands are case sensitive, regular HTML
commands are not.
 JavaScript can be embedded into HTML code
 JavaScript is more focused in the user’s interaction with
the website, HTML is more focused on the view.
 JavaScript is a programming code, HTML is not.
Create A Button
 In order to create a button you need to write:
<input type="button" id="hello-world"
value="Hello”>
 This is a standard HTML code and when you click
the button, nothing should take place
 The button is just there for show and you cannot
interact with it
<!--Use this format to ask your end user some
questions about yourself. -->
<input type="button" id="hello" value="My favorite
color is red" onClick="alert('Sorry, this is the
wrong choice.');">
Review
 Intro to Javascript.
 How HTML and JS are different.
 Create A Button
 ONCLICK=“Alert”
Create A Button: Breaking It Down
 The ‘input type’ command lets the browser know what to
show, in this case a button.
 The ‘id’ is for the commander, in this case you, to know
what the intention of the button is (you can change it to
whatever you want and nothing will change).
 The ‘value’ is the actual name that will show on the
button.
 Try changing it to your name and see what happens when
you open it.
 Adding
JavScript commands will allow you to
interact with the webpage and see some
action.
 The easiest way is to write what we want to
happen into the button tag itself is:
<input type="button" id="hello-world2"
value="Hello" onClick="alert('Hello World!');" />
 When you click the button, a small window
should appear showing the text in parenthesis.
Adding Some Action: Breaking It Down
 The ‘onClick=’ is an event handler
 It tells the browser to run whatever’s in the quotes when
the event “click” happens to the button.
 The ‘alert’ lets the browser know that an alert window
will pop up.
 The parenthesis with quotations (“”) let the browser
know what the alert window will say. You can change this
to whatever you want.
<HTML>
<!-- Woo the customer with as many compliments as you can! -->
<HEAD> <SCRIPT LANGUAGE="JavaScript">
function MsgBox (textstring) {
alert (
textstring + " is best person in the world. \n" +
textstring + " has the greatest smile. \n"
)}
</SCRIPT> </HEAD>
<BODY>
<form> First name: <input name="text1" TYPE="text"><br>
<input name="submit" type="button" value="Woo Customer"
onClick="MsgBox(form.text1.value)">
</form></BODY></HTML>
Review
 Create A Button: Breaking It Down
 Adding Some Action
 Adding Some Action: Breaking It Down
 Creating A Function
Changing the Background Color
 This JavaScript will add special buttons on the browser.
These buttons will change the background color of the
web page. You can change the script to add in what ever
colors you desire. During this activity, you will be able to
add as many buttons as you like.
Background Code 1
 Let’s look specifically at this repetition of code that
represents the buttons:
<input type="button" name="Button_"
value=“____" onclick="changecolor(‘___')">
 The ‘name’ command serves the same purpose as the ‘id’
command
 The changecolor command lets the browser know that the
page will change color when the event ‘click’ happens to the
button.
Background Code 2
 The Parenthesis that appear next to the change
color command tells the browser what color to
change the background to.
 In the model JavaScript code, the name of the
button corresponded to the value, but this is not
mandatory. The value can be what ever name you
choose.
 The changecolor can be any color and is not
restricted to just the seven in the rainbow (biege,
tan, peach etc.).
JAVASCRIPT FOR CHANGING THE
BACKGROUND COLOR
<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">
function changeBGC(color){
document.bgColor = color;}
</SCRIPT></HEAD>
<BODY><form>
<!-- Create as many color buttons as possible -->
<input name="button1" type="button" value="RED"
onClick="changeBGC('red')">
<input name="button1" type="button" value="YELLOW"
onClick="changeBGC('yellow')">
</form></BODY></HTML>
 Changing
the Background Color
 Background Code 1
 Background Code 2
 Javascript for Changing the Background Code
Using a Programming Loop
 Some times it can be helpful to have the computer do a
task over and over again. Computers never get bored
so they are good at monotonous tasks. In computer
science, this is called a loop because the program will
go around in circles. The computer gets to an end of a
section of code and then starts over at the beginning of
the code. It is important to understand how to create
loops.
The for loop
 One way to make a loop is to use a for loop. In this
kind of loop, you have to tell the computer a few
important variables. You have to tell it what number
to start on. You have to tell it what number to
increment or count by. You have to tell it when to
stop. By carefully specifying the variables, a
programmer can create a successful loop.
A
loop can repeat many things. A loop can
ask several questions using the same code. A
loop can spit out huge amounts of text. A
loop can input lines from a file. Anything
that a programmer wants to do over and over
again can be done with a loop.
<!DOCTYPE html>
<html><body>
<!– Add some functions that will repeat statements -->
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>function myFunction(){var x="",i;for
(i=0;i<15;i++) { x=x + "The number is " + i + "<br>"; }
document.getElementById("demo").innerHTML=x;}
</script></body></html>
 Using
Programming Loop
 The For Loop
 What a Loop Can Do
 Code
 Parts of the Web Page
Parts of the Web Page
 Each .html document should have two main parts.
The first part is the heading section. This heading
section starts with <head> and ends with </head>.
The body starts with <body> and ends with
</body>. In summary, the html document should
start with this:
 <html>
 <head> </head>
 <body>
Merging With Proper Placement
 Start with your largest program code. Then,
implement the body and head section of each page at a
time. Be sure to test each part of the puzzle to make
sure it fits right before moving on to the next piece.
Try to do the whole puzzle at once makes it harder
than necessary.
Step by Step Programming
 Each time a student adds a part to their web page or
JavaScript they should test it out in their web page.
Place the code and the browser side by side. You can
use shortcuts to make it go faster. <alt> + <f> + <s>
will bring down the file menu and save quickly in
notepad and most applications. <f5> will reload the
web browser. With practice, a programmer and save
and check code in a second.

Slide 4: Does the page contain 5 questions about
the student? 20pts

Slide 9: Does the page woo with 5 or more lines
of poetry? 20pts

Slide 14: Does the page give options with 5 more
color buttons? 20pts

Slide 19: Does the page examples of loops that
enhance the page? 20pts

Overall aesthetics: Does the page look
professional? 20pts
 Using
Programming Loop
 Merging With Proper Placement
 Step by Step Programming
 Rubric and Checklist
Download
advertisement