What is JavaScript and why is it useful?
- Static versus dynamic HTML
- Static – always the same
- Dynamic – can change depending on user actions and input, create games
- JS runs in the browser – is interpreted
- Full programming language but not Java
- Learning goal – learn programming to add dynamic content to web sites
42 full examples at
Here’s one as a demo.
3 simple examples to get started
Example 1 – Alerts and event handlers
<head>
<script type=”text/javascript”>
function functionOne() { alert(‘You clicked the top text’); }
function functionTwo() { alert(‘You clicked the bottom text’); }
</script>
</head>
<body>
<p><a href=”#” onClick=”functionOne();”>Top Text</a></p>
<p><a href=”javascript:functionTwo();”>Bottom Text</a></p>
</body>
</html>
The next 2 examples are from
Example 2 – Pop Up Window
<head>
<title>Pop up example </title>
<script type=”text/javascript”>
// Popup window code
function newPopup(url) {
popupWindow = window.open(
url,’popUpWindow’,’height=700,width=800,left=10,top=10,resizable=yes,
scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no,status=yes’)
}
</script>
<p>Popup Window:</p>
<p><a href=”JavaScript:newPopup(‘http://www.quackit.com/html/codes/’);”>Get your HTML codes in a popup!</a></p>
<div class=”more-info”>
<p>More info: <a href=”http://www.quackit.com/javascript/popup_windows.cfm”>Popup Windows</a></p>
</div>
Example 3 – Jump Menu
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<title>Jump Menu</title>
<script language=”javascript” type=”text/javascript” >
<!– hide
function jumpto(x){ if (document.form1.jumpmenu.value != “null”) { document.location.href = x } }
// end hide –>
</script>
</head>
<body>
<p>Jump Menu:</p>
<form name=”form1″> <select name=”jumpmenu”
onChange=”jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)”>
<option>Jump to…</option>
<option value=http://www.quackit.com>Quackit Homepage</option>
<option value=http://www.quackit.com/javascript/>JavaScript</option>
<option value=http://www.quackit.com/html/>HTML</option>
<option value=http://www.quackit.com/css/>CSS</option>
<option value=http://www.quackit.com/sql/tutorial/>SQL</option>
<option value=http://www.quackit.com/database/tutorial/>Database Tutorial</option>
<option value=http://www.quackit.com/web_hosting/>Web Hosting Tutorial</option>
</select>
</form>
<div class=”more-info”>
<p>More info:
<a href=”http://www.quackit.com/javascript/javascript_dropdown_menu.cfm”>Jump Menu</a>
</p>
</div>
</body>
</html>
———————————————–
Choose at least one and incorporate into your web site
If finished, choose and modify other examples below.
Example 4 – Description
<HTML>
<head>
<title>Factorial</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<BODY>
<SCRIPT type=”text/JavaScript”>
document.write(“<h2>Factorials</h2>”) ;
for (i=1, fact=1; i!=11; i++, fact *= i) {
document.write ( i + “! =” + fact ) ;
document.write(“<br/>”); }
</SCRIPT>
</BODY>
</HTML>
Example 5 – Description
<HTML>
<head>
<title>Color Changer</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
</head>
<BODY>
<SCRIPT LANGUAGE= “javascript”>
setTimeout(“document.bgColor=’white'”, 1000)
setTimeout(“document.bgColor=’lightpink'”, 1500)
setTimeout(“document.bgColor = ‘pink'”, 2000)
setTimeout(“document.bgColor = ‘deeppink'”, 2500)
setTimeout(“document.bgColor = ‘red'”, 3000)
setTimeout(“document.bgColor = ‘tomato'”, 3500)
setTimeout(“document.bgColor = ‘darkred'”, 4000)
</SCRIPT>
</BODY>
———————————————–
JavaScript color names
Challenges:
- take the factorial example, instead of doing the first 10 factorial
- prompt the user to the number to calculate
- validate the user input for an additional challenge
- program other functions such as the square numbers, cubic numbers, Fibonacci numbers
For more examples:
