Using JavaScript to Show an Alert Web Design Sec 6-2 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials
Objectives The student will: Understand how a client-side script fits within the context of an HTML page. Know some basic Javascript syntax.
Javascripting Look at this Javascript <script> function showAlert() { alert ("Hello world!"); } </script> This looks similar to the PHP code from the other day, but it has it’s own syntax. Most programming languages look a somewhat similar
Javascripting Before this function can work, we must first call the showAlert() function. JavaScript functions are called in response to events. When the page loads, or when a user clicks on, hovers over, or tabs to a specific link, these are all events. We can instruct JavaScript to watch for these events, and if or when they occur, execute the specified function. Example – Let's say we want to execute the showAlert() function after the body of the web page is fully loaded. One way to do that is to add the onload attribute to the <body> element of our web page, like this: <body onload="showAlert()">
Summary Like HTML and CSS, Javascripts are written in a specific language Different syntax Upper and lower case matters! Javascripts are defined in a <script> section in the <head> section of the HTML file. Javascripts need to be “called” to run Called in response to events (click a button, load a page, etc)
Your Turn… Download the homework for today. You will add a button to your Javascript page and customize it with CSS code. The CSS code can be either in your javascript.html file or your mystyle.css file.
Javascript file:
Javascript file: