Java script

CS 299 – Web Programming and Design Javascript Basics With Coding Standards

CS 299 – Web Programming and Design Introduction to JavaScript What is JavaScript? – It is designed to add interactivity to HTML pages – It is a scripting language (a lightweight programming language) – It is an interpreted language (it executes without preliminary compilation) – Usually embedded directly into HTML pages – And, Java and JavaScript are different – Loosely typed language. JavaScript is an object-based scripting language which is lightweight and cross-platform –

CS 299 – Web Programming and Design What can a JavaScript Do? • JavaScript gives HTML designers a programming tool: – simple syntax • JavaScript can put dynamic text into an HTML page • JavaScript can react to events • JavaScript can read and write HTML elements • JavaScript can be used to validate data • JavaScript can be used to detect the visitor’s browser • JavaScript can be used to create cookies – Store and retrieve information on the visitor’s computer

CS 299 – Web Programming and Design JS How To & JS Where To

CS 299 – Web Programming and Design JavaScript where to & How to • The HTML <script> tag is used to insert a JavaScript into an HTML page <script type=“text/javascript”> document.write(“Hello World!”) </script> • Ending statements with a semicolon? – Optional; required when you want to put multiple statements on a single line • JavaScript can be inserted within the head, the body, or use external JavaScript file • How to handle older browsers? <script type=“text/javascript”> <!— document.write(“Hello World!”) // --> </script>

CS 299 – Web Programming and Design JavaScript Where To • You can include JavaScripts in head, body, or simply use external JavaScript file (.js) • JavaScripts in the body section will be executed while the page loads • JavaScripts in the head section will be executed when called • Examples: •

CS 299 – Web Programming and Design JS Statements

CS 299 – Web Programming and Design JS Statements •  JavaScript statements are commands to the browser  JavaScript code is a sequence of statements  JavaScript statements are separated with semicolon  Multiple statement on one line is allowed  JavaScript statements can be grouped together in code blocks  You can break a code line after an operator or a comma. 

CS 299 – Web Programming and Design JS Comments

CS 299 – Web Programming and Design JavaScript Comments Single-line Comment  Single line comments start with //. Multi-line Comment  Multi-line comments start with /* and end with */.

CS 299 – Web Programming and Design JS Variables

CS 299 – Web Programming and Design  JavaScript Variables  Variables are used to store data.  A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value.  Rules for variable names:  Variable names are case sensitive  They must begin with a letter or the underscore character  strname – STRNAME (not same)

CS 299 – Web Programming and Design  JavaScript Variables Declartion  Names can contain letters, digits, underscores, and dollar signs.  Names must begin with a letter  Names can also begin with $ and _  Names are case sensitive (y and Y are different variables)  Reserved words (like JavaScript keywords) cannot be used as names  var x = 5;  var y = 6;  var z = x + y;

CS 299 – Web Programming and Design .The scope of a variable is the region of your program in which it is defined. JavaScript variables have only two scopes. Global Variables − A global variable has global scope which means it can be defined anywhere in your JavaScript code. Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that functionJavaScript allows you to work with three primitive data types − JavaScript Variable Scope

CS 299 – Web Programming and Design .Global variable Declartion:Ouside the Function <script> var value=50;//global variable function a(){ alert(value); } function b(){ alert(value); } </script> Global Variable Declaration:outside Function

CS 299 – Web Programming and Design .Global Varible Declaration inside function: function m(){ window.value=100;//declaring global variable by window object } function n(){ alert(window.value);//accessing global variable from other function } Global Variable Declaration:inside Function

CS 299 – Web Programming and Design JS Operators

CS 299 – Web Programming and Design  JavadScript Operators(Arithematic Operator) Arithmetic Operators Operator Description Example Result + x+y Addition x=2 4 y=2 - y=2 x-y Subtraction x=5 3 * y=4 x*y Multiplication x=5 20 / 5/2 Division 2,5 15/5 3 % 10%8 10%2 Modulus (division remainder) 2 0 5%2 1

CS 299 – Web Programming and Design  Assignment Operators Assignment Operators Operator Example Is The Same As = x=y x=y += x+=y x=x+y -= x-=y x=x-y *= x*=y x=x*y /= x/=y x=x/y %= x%=y x=x%y

CS 299 – Web Programming and Design  Comparison Operators Comparison Operators Operator Description Example == is equal to 5==8 returns false === x==y return s true x===y return s false is equal to (checks for both value and type) x=5 y="5" != is not equal 5!=8 returns true > is greater than 5>8 returns false < is less than 5<8 returns true >= is greater than or equal to 5>=8 returns false <= is less than or equal to 5<=8 returns true

CS 299 – Web Programming and Design  Logical Operators - Logical Operators Operator Description Example && (x < 10 && y > 1) returns true and x=6 y=3 || y=3 (x==5 || y==5) returns false or x=6 ! y=3 !(x==y) returns true not x=6

CS 299 – Web Programming and Design JS Comparisons

Control Structures  There are three basic types of control structures in JavaScript: the if statement, the while loop, and the for loop  Each control structure manipulates a block of JavaScript expressions beginning with { and ending with }

CS 299 – Web Programming and Design  Conditional Statements if statement if...else statement if...else if... statement.

CS 299 – Web Programming and Design  Loop Statements While Statement Do ... While statement For statement.

CS 299 – Web Programming and Design  Loop Control Statements Break Statement. Continue Statement.

CS 299 – Web Programming and Design JS Popup Boxes

CS 299 – Web Programming and Design  JavaScript Popup Boxes  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. <script> alert("Hello World!") </script>

CS 299 – Web Programming and Design  JavaScript Popup Boxes - 2  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.

CS 299 – Web Programming and Design  JavaScript Popup Boxes - 3  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.

CS 299 – Web Programming and Design  Prompt Box Example <!DOCTYPE html> <html> <body> <h2>JavaScript Alert</h2> <button onclick="myFunction()">Try it</button> <script> function myFunction() { alert("I am an alert box!"); }

CS 299 – Web Programming and Design JS Function

CS 299 – Web Programming and Design  function <script type = "text/javascript">  </script>.

CS 299 – Web Programming and Design JS Events

CS 299 – Web Programming and Design  Window.print() <html> <head> <script type = "text/javascript">  </script> </head> <body> <form> <input type = "button" value = "Print" onclick = "window.print()" /> </form> </body> <html>.

Java script

More Related Content

What's hot

Similar to Java script

More from Sanjay Gunjal

Recently uploaded

Java script