WEB SYSTEMS & TECHNOLOGY

Java Script  JavaScript created by Netscape  It is also client side programming  It can be use for client side checks

script Name of web page...script goes here </head...page body here: text, forms, tables...more JavaScript if needed...onload, onclick, etc. commands here

Writeln   Welcome to JavaScript   document.writeln( " Welcome to ",  "JavaScript Programming! " ); 

Write   Using document.write   document.write ( " Welcome to ");  document.writeln( "JavaScript Programming! " ); 

window.alert   Using window.alert   window.alert( "Welcome to\nJavaScript\nProgramming!" );   Click Refresh (or Reload) to run this script again. 

alert(), confirm(), and prompt() alert("This is an Alert method"); confirm("Are you OK?"); prompt("What is your name?"); prompt("How old are you?","20");

alert() and confirm()  Display a message in a dialog box.  The dialog box will block the browser. alert("Text to be displayed");  Display a message in a dialog box with two buttons: "OK" or "Cancel".  confirm() returns true if the user click "OK". Otherwise it returns false. var answer = confirm("Are you sure?");

prompt()  Display a message and allow the user to enter a value  The second argument is the "default value" to be displayed in the input textfield.  Without the default value, "undefined" is shown in the input textfield.  If the user click the "OK" button, prompt() returns the value in the input textfield as a string.  If the user click the "Cancel" button, prompt() returns null. prompt("What is your student id number?"); prompt("What is your name?”, "No name");

10 User input/output var firstNumber, // first string entered by user secondNumber, // second string entered by user number1, // first number to add number2, // second number to add sum; // sum of number1 and number2 // read in first number from user as a string firstNumber = window.prompt("Enter first integer", "0" ); // read in second number from user as a string secondNumber = window.prompt( "Enter second integer", "0" ); // convert numbers from strings to integers firstNumber = parseInt(firstNumber); secondNumber = parseInt( secondNumber ); // add the numbers sum = firstNumber + secondNumber; // display the results document.writeln( " The sum is " + sum + " " );

  Untitled Document   function warnUser() {  confirm("Are you a student?");  }   <!--  If onClick event handler returns false, the link  is not followed.  -->  Students access only 

Events  onclick="myfun()"  onblur="myfun()"  ondblclick=“myfun()”  onfocus="myfun()"  onkeydown="myfun()“  onkeypress="myfun()“  onmouseout="myfun()“  onmouseover="myfun()"

Events   Java Script:  function myfun()  {  var tf = document.getElementById('i1');  tf.value=“New";  }

INE2720 – Web Application Software Development All copyrights reserved by C.C. Cheung User Events, Form Example Simple JavaScript Button <!-- function dontClick() { alert("I told you not to click!"); } // --> Simple JavaScript Button <input type=“button" value="Don't Click Me" onClick="dontClick()">

Onmousedown/onmouseup   Click the text! The mouseDown() function is triggered when the mouse button is pressed down over this paragraph, and sets the color of the text to red. The mouseUp() function is triggered when the mouse button is released, and sets the color of the text to green.   function mouseDown() {  document.getElementById("myP").style.color = "red";  }  function mouseUp() {  document.getElementById("myP").style.color = "green";  } 

Over/out   The function bigImg() is triggered when the user moves the mouse pointer over the image.  The function normalImg() is triggered when the mouse pointer is moved out of the image.   function bigImg(x) {  x.style.height = "64px";  x.style.width = "64px";  }  function normalImg(x) {  x.style.height = "32px";  x.style.width = "32px";  } 

onfocus   Enter your name:  When the input field gets focus, a function is triggered which changes the background- color.   function myFunction(x) {  x.style.background = "yellow";  } 

onkeydown   A function is triggered when the user is pressing a key in the input field.   function myFunction() {  alert("You pressed a key inside the input field");  } 

onkeypress   A function is triggered when the user is pressing a key in the input field.   function myFunction() {  alert("You pressed a key inside the input field");  } 

 Thanks