javascript scripting language it @ycce 2011-12. what is scripting ? a scripting language, script...
TRANSCRIPT
IT @YCCE 2011-12
JavaScript
Scripting language
IT @YCCE 2011-12
What is Scripting ?
• A scripting language, script language, or extension language is a programming language that allows control of one or more applications.
• Scripts are often interpreted from source code or bytecode, whereas the application is typically first compiled to native machine code.
IT @YCCE 2011-12
What is Client Side Scripting ?
Client Side Scripting:• Client-side scripting generally refers to the
class of computer programs on the web that are executed client-side, by the user's web browser, instead of server-side (on the web server).
IT @YCCE 2011-12
Client-Side Scripting Languages
• Netscape and others– JavaScript
• Internet Explorer– Jscript (MS name for JavaScript)– VBScript– PerlScript
IT @YCCE 2011-12
What is JavaScript• JavaScript was designed to add interactivity to HTML
pages • JavaScript is a scripting language (a scripting language is
a lightweight programming language) • A JavaScript consists of lines of executable computer
code • A JavaScript is usually embedded directly into HTML
pages • JavaScript is an interpreted language (means that scripts
execute without preliminary compilation) • Everyone can use JavaScript without purchasing a license
IT @YCCE 2011-12
Why do we use JavaScript ?
• Add content to a web page dynamically.• Alter a web page in response to user actions.• React to user events.• Interact with frames.• Manipulate HTTP cookies
IT @YCCE 2011-12
Features
• Browser support• Detecting user’s browser and OS• Can be used on Server as well as Client• Performing simple Computation• Support objects
IT @YCCE 2011-12
Structure of JavaScript program
<html><head><title>JavaScript Page</title>
<script language="javascript"> document.write("Hello world!");</script></head><body> Content of the Page </body></html>
IT @YCCE 2011-12
JavaScript andHTML Comments
<SCRIPT><!--document.write(“Hello World");--></SCRIPT>
HTML comment
IT @YCCE 2011-12
Language Elements
• Variables• Literals• Operators• Control Structures• Objects• Arrays
IT @YCCE 2011-12
Variables
• Untyped!• Can be declared with var keyword:
var foo;
• Can be created automatically by assigning a value:foo=1; blah="Hi Dave";
IT @YCCE 2011-12
Variables (cont.)
• Using var to declare a variable results in a local variable (inside a function).
• If you don't use var – the variable is a global variable.
IT @YCCE 2011-12
Literals(Values)
• Values are bits of information. • Values types and some examples include:
– Number: 1, 2, 3, etc.– String: characters enclosed in quotes. “Hi” – Boolean: true or false. – Object: image, form– Function: validate(), doWhatever()
IT @YCCE 2011-12
Expressions
• Expressions are commands that assign values to variables.
• Expressions always use an assignment operator, such as the equals sign. – e.g., var month = May; is an
expression. • Expressions end with a semicolon.
IT @YCCE 2011-12
Operators
• Arithmetic, comparison, assignment, bitwise, boolean (pretty much just like C).
+ - * / % ++ -- == != > < && || ! & | << >>
IT @YCCE 2011-12
Control Structures• Again – pretty much just like C:
if if-else ?: switch
for while do-while
• And a few not in Cfor (var in object)
with (object)
IT @YCCE 2011-12
Function
function functionname (Parameter list){
Commands;return value;
}
• The two parts of a JavaScript function are ✦ Parameter list: Defines any data and their data types that
the function needs to work. If the function doesn’t need to accept any values, the parameter list can be empty.
• ✦ Return: Defines a value to return.
IT @YCCE 2011-12
User-defined functions• function definitions are similar to C++/Java, except:
– no return type for the function (since variables are loosely typed)– no types for parameters (since variables are loosely typed)– by-value parameter passing only (parameter gets copy of argument)
function isPrime(n)// Assumes: n > 0// Returns: true if n is prime, else false{ if (n < 2) { return false; } else if (n == 2) { return true; } else { for (var i = 2; i <= Math.sqrt(n); i++) { if (n % i == 0) { return false; } } return true; }}
can limit variable scope
if the first use of a variable is preceded with var, then that variable is local to the function
for modularity, should make all variables in a function local
IT @YCCE 2011-12
Embedding JavaScript in HTML.
• When specifying a script only the tags <script> and </script> are essential, but complete specification is recommended:
<script language="javascript”
type="text/javascript">
<!-- Begin hiding
window.location=”index.html"
// End hiding script-->
</script>
IT @YCCE 2011-12
Objects
• Objects have attributes and methods.• Many pre-defined objects and object types.• Using objects follows the syntax of C++/Java:
objectname.attributenameobjectname.methodname()
IT @YCCE 2011-12
Array Objects
• Arrays are supported as objects.
• Attribute length
• Methods include:Concat() join() pop() push() reverse() sort()
IT @YCCE 2011-12
Array example code
var a = [8,7,6,5];
for (i=0;i<a.length;i++)a[i] += 2;
b = a.reverse();
IT @YCCE 2011-12
Many other pre-defined object types• String: manipulation methods• Math: trig, log, random numbers• Date: date conversions• RegExp: regular expressions• Number: limits, conversion to string
IT @YCCE 2011-12
Alert Box
• An alert dialog box displays a message on the screen and gives the user the option of closing the dialog box.
• To create an alert dialog box, you need to define the text you want displayed, such as
alert(“Message here”);• An alert dialog box displays an OK button. As
soon as the user clicks this OK button, the alert dialog box goes away.
IT @YCCE 2011-12
Confirmation Box
• A confirmation dialog box displays a message and offers the user two or more choices.
• A confirmation dialog box gives users a choice of OK and Cancel buttons.
• To create a confirmation dialog box, you must display text and include commandsthat do something when the user clicks either OK or Cancel:if (confirm(“Text message”))
command;else
command;
IT @YCCE 2011-12
Prompt Box
• A prompt dialog box gives users a chance to type in data.
• To create a prompt dialog box, you need to display text to appear in the dialog box and then optional text to appear as a default value, such as
• prompt(“Text to display”, optionalvalue);
IT @YCCE 2011-12
Simple program using JavaScript<html><head><script language=javascript><!--
function hello() {document.write("Hello,This is JavaScript Output");
}--></script></head><body onLoad ="hello()"></body></html>
IT @YCCE 2011-12
Queries ??