Introduction to client side scripting, Introduction to Java script.....

1. By : SURBHI SAROHA

2. SYLLABUS
 Introduction to Client Side Scripting.
 Introduction to Java Scripts
 Javascript types
 Variables in JS
 Operators in JS
 Conditions Statements
 Java Script Loops
 JS Popup Boxes
 JS Events
 JS Arrays
 Working with Arrays
 JS Objects
 JS Functions
 Using Java Script in Real time
 Validation of Forms
 Related Examples.

3. Introduction to Client Side
Scripting.
 Scripts in ServiceNow fall into two categories:
 Client-side
 Server-side
 This module is about client-side scripting. Client-side scripts execute
within a user's browser and are used to manage forms and form fields.
Examples of things client-side scripts can do include:
 Place the cursor in a form field on form load
 Generate alerts, confirmations, and messages
 Populate a form field in response to another field's value
 Highlight a form field
 Validate form data
 Modify choice list options
 Hide/Show fields or sections

4. Client-Side Scripting: Javascript
 For a Web page, HTML supplies document content
and structure while CSS provides presentation styling.
In addition, client-side scripts can control browser
actions associated with a Web page.
 Scripts are programs written in a simple and easy-to-
use language to specify control of other programs.
 Client-side scripts are almost always written in the
Javascript language to control browsers actions.

5. Cont….
 Tasks performed with client-side scripts include:
 • Asking the browser to display information
 • Making the Web page different depending on the browser
and browser features
 • Monitoring user events and specifying reactions
 • Generating HTML code for parts of the page
 • Modifying a page in response to events
 • Checking correctness of user input
 • Replacing and updating parts of a page
 • Changing the style and position of displayed elements
dynamically

6. Introduction to Java Scripts
 Javascript is a widely used scripting language originally
developed by Netscape for both client-side and server-side
scripting.
 The language is becoming an international standard,
approved by the European standards body ECMA (ECMA-
262) in 1997 and later by the ISO in 1998.
 Client-side Javascript is used widely and supported well by
major browsers including NN, IE, AOL, MOZILLA, and
Opera.
 We shall present client-side Javascript for adding
dynamism and interactivity to Web pages and will refer to
it simply as Javascript.

7. Cont…
 The host environment also provides a means to
connect scripting code with events such as focus and
mouse actions, page and image loading, form input
and submission, error and abort.
 Scripting code can also perform computation as the
page is loading.
 Thus, the displayed page is the result of a combination
of HTML, CSS, and Javascript actions.

8. Cont….
 JavaScript was initially created to “make web pages
alive”.
 The programs in this language are called scripts. They
can be written right in a web page’s HTML and run
automatically as the page loads.
 Scripts are provided and executed as plain text. They
don’t need special preparation or compilation to run.
 In this aspect, JavaScript is very different from another
language called Java.

9. History of JavaScript:
 It was created in 1995 by Brendan Eich while he was
an engineer at Netscape.
 It was originally going to be named LiveScript but was
renamed. Unlike most programming languages, the
JavaScript language has no concept of input or output.
 It is designed to run as a scripting language in a host
environment, and it is up to the host environment to
provide mechanisms for communicating with the
outside world.
 The most common host environment is the browser.

10. Javascript types
 JavaScript variables can hold many data types:
numbers, strings and objects.
 var length = 16; // Number

var lastName = "Johnson"; // String

var x = {firstName:"John", lastName:"Doe"}; // Object

11. Cnt.
 JavaScript has dynamic types. This means that the same
variable can be used to hold different data types.
 var x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String
 JavaScript Booleans
 Booleans can only have two values: true or false.
 var x = 5;
var y = 5;
var z = 6;
(x == y) // Returns true
(x == z) // Returns false

12. Variables in JS
 JavaScript variables are containers for storing data values.
 In this example, x, y, and z, are variables, declared with
the var keyword:
 var x = 5;
var y = 6;
var z = x + y;
 From the example above, you can expect:
 x stores the value 5
 y stores the value 6
 z stores the value 11

13. Operators in JS
 The assignment operator (=) assigns a value to a variable.
 var x = 10;
 The addition operator (+) adds numbers:
 var x = 5;
var y = 2;
var z = x + y;
 The multiplication operator (*) multiplies numbers.
 var x = 5;
var y = 2;
var z = x * y;

14. JavaScript Arithmetic Operators
 Arithmetic operators are used to perform arithmetic on
numbers:
 Operator Description
 + Addition
 - Subtraction
 * Multiplication
 ** Exponentiation
 / Division
 % Modulus (Division Remainder)
 ++ Increment
 -- Decrement

15. JavaScript String Operators
 The + operator can also be used to add (concatenate)
strings.
 Example
 var txt1 = "John";
var txt2 = "Doe";
var txt3 = txt1 + " " + txt2;
 The result of txt3 will be:
 John Doe

16. JavaScript Comparison Operators
 Operator Description
 == equal to
 === equal value and equal type
 != not equal
 !== not equal value or not equal type
 > greater than
 < less than
 >= greater than or equal to
 <= less than or equal to
 ? ternary operator

17. JavaScript Logical Operators
 Operator Description
 && logical and
 || logical or
 ! logical not
 JavaScript Type Operators
 Operator Description
 Typeof Returns the type of a variable
 Instanceof Returns true if an object is an instance
of an object type

18. JavaScript Bitwise Operators
 Bit operators work on 32 bits numbers.
 Any numeric operand in the operation is converted
into a 32 bit number. The result is converted back to a
JavaScript number.
 &AND
 |OR
 ~NOT
 ^XOR
 <<Zero fill left shift
 >> Zero fill right shift

19. Conditions Statements
 Very often when you write code, you want to perform
different actions for different decisions.
 You can use conditional statements in your code to do this.
 In JavaScript we have the following conditional statements:
 Use if to specify a block of code to be executed, if a
specified condition is true
 Use else to specify a block of code to be executed, if the
same condition is false
 Use else if to specify a new condition to test, if the first
condition is false
 Use switch to specify many alternative blocks of code to be
executed

20. Java Script Loops
 Loops are handy, if you want to run the same code over and
over again, each time with a different value.
 JavaScript supports different kinds of loops:
 for - loops through a block of code a number of times
 for/in - loops through the properties of an object
 for/of - loops through the values of an iterable object
 while - loops through a block of code while a specified
condition is true
 do/while - also loops through a block of code while a
specified condition is true


21. JS Popup Boxes
 avaScript has three kind of popup boxes: Alert box, Confirm box,
and Prompt box.
 Alert Box
 An alert box is often used if you want to make sure information
comes through to the user.
 When an alert box pops up, the user will have to click "OK" to
proceed.
 Syntax
 window.alert("sometext");
 The window.alert() method can be written without the window
prefix.
 Example
 alert("I am an alert box!");

22. Confirm Box
 A confirm box is often used if you want the user to verify or accept something.
 When a confirm box pops up, the user will have to click either "OK" or "Cancel"
to proceed.
 If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box
returns false.
 Syntax
 window.confirm("sometext");
 The window.confirm() method can be written without the window prefix.
 Example
 if (confirm("Press a button!")) {
txt = "You pressed OK!";
} else {
txt = "You pressed Cancel!";
}

23. Prompt Box
 A prompt box is often used if you want the user to input a value before entering
a page.
 When a prompt box pops up, the user will have to click either "OK" or "Cancel"
to proceed after entering an input value.
 If the user clicks "OK" the box returns the input value. If the user clicks
"Cancel" the box returns null.
 Syntax
 window.prompt("sometext","defaultText");
 The window.prompt() method can be written without the window prefix.
 Example
 var person = prompt("Please enter your name", "Harry Potter");
if (person == null || person == "") {
txt = "User cancelled the prompt.";
} else {
txt = "Hello " + person + "! How are you today?";
}

24. JS Events
 An HTML event can be something the browser does, or
something a user does.
 Here are some examples of HTML events:
 An HTML web page has finished loading.
 An HTML input field was changed.
 An HTML button was clicked.
 Often, when events happen, you may want to do
something.
 JavaScript lets you execute code when events are detected.
 HTML allows event handler attributes, with JavaScript
code, to be added to HTML elements.

25. Cont…
 With single quotes:
 <element event='some JavaScript'>
 With double quotes:
 <element event="some JavaScript">

26. JS Arrays
 JavaScript arrays are used to store multiple values in a
single variable.
 Ex: var cars = ["Saab", "Volvo", "BMW"];
 An array is a special variable, which can hold more
than one value at a time.
 If you have a list of items (a list of car names, for
example), storing the cars in single variables could
look like this:
 var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

27. JS Functions
 A JavaScript function is a block of code designed to
perform a particular task.
 A JavaScript function is executed when "something"
invokes it (calls it).
 Ex:
 function myFunction(p1, p2) {
return p1 * p2; // The function returns the product
of p1 and p2
}

28. JavaScript Function Syntax
 A JavaScript function is defined with the function keyword, followed by
a name, followed by parentheses ().
 Function names can contain letters, digits, underscores, and dollar signs (same
rules as variables).
 The parentheses may include parameter names separated by commas:
(parameter1, parameter2, ...)
 The code to be executed, by the function, is placed inside curly brackets: {}
 function name(parameter1, parameter2, parameter3) {
// code to be executed
}
 Function parameters are listed inside the parentheses () in the function
definition.
 Function arguments are the values received by the function when it is
invoked.
 Inside the function, the arguments (the parameters) behave as local variables.
 A Function is much the same as a Procedure or a Subroutine, in other
programming languages.

29. Validation of Forms
 HTML form validation can be done by JavaScript.
 If a form field (fname) is empty, this function alerts a
message, and returns false, to prevent the form from being
submitted:
 JavaScript Example
 function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
}

30. Example
 <!DOCTYPE html>
 <html>
 <body>
 <p>Enter a number and click OK:</p>
 <input id="id1" type="number" min="100" max="300" required>
 <button onclick="myFunction()">OK</button>
 <p>If the number is less than 100 or greater than 300, an error message will be
displayed.</p>
 <p id="demo"></p>
 <script>
 function myFunction() {
 var inpObj = document.getElementById("id1");

31. Cont….
 if (!inpObj.checkValidity()) {
 document.getElementById("demo").innerHTML =
inpObj.validationMessage;
 } else {
 document.getElementById("demo").innerHTML =
"Input OK";
 }
 }
 </script>
 </body>
 </html>

32. Thank you 