2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr MR.Mostafa badr Java Script
Get Trained for a Better Future Lesson 1: What is Javascript? Lesson 2 JavaScript Syntax Lesson 3 Writing a JavaScript Program MR.Mostafa badr Java Script
What is Javascript? 1 MR.Mostafa badr Java Script
Classifications of Languages High-Level vs Low Level Compiled vs Interpreted Structured vs Object Oriented Scripting vs Programming MR.Mostafa badr Java Script
What is Javascript? JavaScript is used to improve the design designed to add interactivity to HTML pages used to create web pages that respond dynamically to user action. JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, Opera. Embedded in most web browsers. MR.Mostafa badr Java Script
Scripted Programming Language. JavaScript is an interpreted language (means that scripts execute without preliminary compilation) JavaScript is a scripting language (a scripting language is a lightweight programming language) A JavaScript consists of lines of executable computer code Cannot run standalone. A JavaScript is usually embedded directly into HTML pages Everyone can use JavaScript without purchasing a license MR.Mostafa badr Java Script
JavaScript Syntax Issues JavaScript commands and names are case-sensitive. JavaScript command lines end with a semicolon (;) to separate it from the next command line in the program. Semicolons (;) are useful to make your code easier to follow and interpret With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon (;). but in J.S, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line. MR.Mostafa badr Java Script
History First developed by Netscape 1996. Later purchased by Sun. Not related to the Java Programming Language. Not quite the same as Microsoft’s JScript. MR.Mostafa badr Java Script
Are Java and JavaScript the Same? NO! Java and JavaScript are two completely different languages in both concept and design! Java (developed by Sun Microsystems) is a powerful and much more complex programming language . MR.Mostafa badr Java Script
Java vs. JavaScript JAVA JavaScript Requires the JDK to create the applet Requires a text editor Requires a Java virtual machine to run the applet Required a browser that can interpret JavaScript code Source code is hidden from the user Source code is made accessible to the user Programs run on the server side Programs run on the client side MR.Mostafa badr Java Script
Writing a JavaScript Program The Web browser runs a JavaScript program when the Web page is first loaded, or in response to an event. JavaScript programs can either be placed directly into the HTML file or they can be saved in external files. placing a program in an external file allows you to hide the program code from the user source code placed directly in the HTML file can be viewed by anyone MR.Mostafa badr Java Script
Writing a JavaScript Program A JavaScript program can be placed anywhere within the HTML file. Many programmers favor placing their programs between <head> tags in order to separate the programming code from the Web page content and layout. Some programmers prefer placing programs within the <body> of the Web page at the location where the program output is generated and displayed. MR.Mostafa badr Java Script
Using the <script> Tag To embed a client-side script in a Web page, use the element: <script type= “ text/javascript ” > script commands and comments </script> To access an external script, use: < script type = “ text/javascript ” src=“url” > script commands and comments </script> MR.Mostafa badr Java Script
How to Put a JavaScript Into an HTML Page 1? <body> <script type=“ text/javascript "> script commands </script> </body> </html> <Body> Tag MR.Mostafa badr Java Script
How to Put a JavaScript Into an HTML Page 2? <Head> <script type=“ text/javascript "> script commands </script> <body> </body> </html> <Head> Tag MR.Mostafa badr Java Script
How to Put a JavaScript Into an HTML Page 3? <Head> < script type = “ text/javascript ” src=“Filename.JS” > </script> <body> </body> </html> Script Commands External File MR.Mostafa badr Java Script
Writing Output to a Web Page JavaScript provides methods to write text to a Web page: document.write(“text”); document.write (“ Welcome !"); document.write ("<h3> News Flash!</h3><br />"); MR.Mostafa badr Java Script
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> MR.Mostafa badr Java Script
JavaScript Input Boxes 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. <script> prompt (“This is a Prompt”, “Defualt Value ”) </script> MR.Mostafa badr Java Script
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. <script> Confirm ("Hello World!") </script> MR.Mostafa badr Java Script
JavaScript Basic Examples <script> document.write("Hello World!") </script> alert("Hello World!") MR.Mostafa badr Java Script
Working with Variables A variable is a named element in a program that stores information. 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. MR.Mostafa badr Java Script
JavaScript Variables The following restrictions apply to variable names: the first character must be either a letter or an underscore character ( _ ) the remaining characters can be letters, numbers, or underscore characters variable names cannot contain spaces Variable names are case-sensitive. strname ≠ STRNAME (not same) MR.Mostafa badr Java Script
Types of Variables JavaScript supports four different types of variables: numeric variables can be a number, such as 13, 22.5, or -3.14159 string variables is any group of characters, such as “Hello” or “Happy Holidays!” Boolean variables are variables that accept one of two values, either true or false null variables Is a variable that has no value at all MR.Mostafa badr Java Script
Declaring a Variable Before you can use a variable in your program, you need to declare a variable using the var command or by assigning ( = ) the variable a value. Any of the following commands is a legitimate way of creating a variable named “Month”: var Month; var Month = “December”; Month = “December”; MR.Mostafa badr Java Script
Example x=prompt (“This is a Prompt”, “Defualt Value ”) <script> x=“Hello World!” document.write(x) </script> x=prompt (“This is a Prompt”, “Defualt Value ”) document.write(“Welcome” +x) MR.Mostafa badr Java Script
Comparison, Logical, and Conditional Operators To create a condition, you need one of three types of operators: a comparison operator compares the value of one element with that of another, which creates a Boolean expression that is either true or false a logical operator connects two or more Boolean expressions a conditional operator tests whether a specific condition is true and returns one value if the condition is true and a different value if the condition is false MR.Mostafa badr Java Script
MR.Mostafa badr comparison operator Java Script
Assignment Operators MR.Mostafa badr Java Script
Assignment Operators Expressions assign values using assignment operators. “=” is the most common one. Additional includes the += operator The following create the same results: x = x + y; x += y Either of the following increase the value of the x variable by 2: x = x + 2; x += 2 MR.Mostafa badr Java Script
Comparison Operators MR.Mostafa badr Java Script
An Example of Boolean Expressions if x is less than 100, this expression returns the value true; however, if x is 100 or greater, the expression is false y == 20; the y variable must have an exact value of 20 for the expression to be true comparison operator uses a double equal sign (==) MR.Mostafa badr Java Script
A Logical Operator The logical operator && returns a value of true only if all of the Boolean expressions are true. MR.Mostafa badr Java Script
Conditional Statements In JavaScript we have the following conditional statements: if statement - use this statement if you want to execute some code only if a specified condition is true if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false switch statement - use this statement if you want to select one of many blocks of code to be executed MR.Mostafa badr Java Script
Working with Conditional Statements if (condition) { JavaScript Commands } condition is an expression that is either true or false if the condition is true , the JavaScript Commands in the command block are executed if the condition is False, then no action is taken MR.Mostafa badr Java Script
Using an If...Else Statement if (condition) { JavaScript Commands if true } else JavaScript Commands if false } condition is an expression that is either true or false, and one set of commands is run if the expression is true, and another is run if the expression is false MR.Mostafa badr Java Script
Conditional Statements - 2 if (condition) { code to be executed if condition is true } else code to be executed if condition is False MR.Mostafa badr Java Script
Conditional Statements Examples <script> x=3 if(x<0) { alert (“negative”) } else alert (“positive”) </script> MR.Mostafa badr Java Script
Conditional Statements Examples - 3 <script> P =prompt (“Your Name?", " Enter Your Name") If (p==“Mostafa") { Alert (“Welcome“ +p ) } else Alert (“Wrong Name") </script> MR.Mostafa badr Java Script
Working with Program Loops A program loop is a set of instructions that is executed repeatedly. There are two types of loops: loops that repeat a set number of times before quitting loops that repeat as long as a certain condition is met (True) MR.Mostafa badr Java Script
The For Loop The For loop allows you to create a group of commands to be executed a set number (1) of times through the use of a counter that tracks the number of times the command block has been run. Set an initial value for the counter, and each time the command block is executed, the counter changes in value. When the counter reaches a value above or below a certain stopping value, the loop ends. MR.Mostafa badr Java Script
The For Loop Continued for (start ; condition ; update) { JavaScript Commands } start is the starting value of the counter condition is a Boolean expression that must be true for the loop to continue update specifies how the counter changes in value each time the command block is executed MR.Mostafa badr Java Script
MR.Mostafa badr Java Script
MR.Mostafa badr Java Script
Specifying Counter Values in a For Loop MR.Mostafa badr Java Script
The While Loop The While loop runs a command group as long as a specific condition is met (2) , but it does not employ any counters. The general syntax of the While loop is: while (condition) { JavaScript Commands } condition is a Boolean expression that can be either true or false MR.Mostafa badr Java Script
MR.Mostafa badr Java Script
MR.Mostafa badr Java Script