intro to javascript
DESCRIPTION
Intro to javascript. 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. - PowerPoint PPT PresentationTRANSCRIPT
INTRO TO JAVASCRIPT 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 codeJavaScript 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
ONCLICK="ALERT<!--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.');">
ReviewIntro to Javascript.How HTML and JS are different.Create A ButtonONCLICK=“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 SOME ACTION 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 DownThe ‘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.
CREATING A FUNCTION<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>
ReviewCreate A Button: Breaking It DownAdding Some ActionAdding Some Action: Breaking It DownCreating 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 1Let’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>
REVIEW Changing the Background Color Background Code 1 Background Code 2 Javascript for Changing the Background
Code
Using a Programming LoopSome 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.
WHAT A LOOP CAN DO 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>
REVIEW
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 PlacementStart 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.
RUBRIC AND CHECKLIST 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
REVIEW
Using Programming Loop Merging With Proper Placement Step by Step Programming Rubric and Checklist