Download presentation
Presentation is loading. Please wait.
1
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
2
How Are They 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.
3
Create A Button In order to create a button you need to write: 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
4
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.
5
Review
6
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: When you click the button, a small window should appear showing the text in parenthesis
7
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
8
Adding A Message Box This is an interactive command, it will allow the user to interact with the page Adding a message box will allow you to write a text and see it pop up in an alert window
9
JavaScript For Adding A Message Box <HTML <!-- Beginning of JavaScript - function MsgBox (textstring) { alert (textstring) } // - End of JavaScript - -->
10
Review
11
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.
12
JavaScript for Changing the Background Color <!-- Beginning of JavaScript - function changecolor(code) { document.bgColor=code}// - End of JavaScript - -->
13
Changing the Background Color: Breaking It Down Let’s look specifically at this repetition of code that represents the buuttons: 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. 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.).
Similar presentations
