2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr

Name: 2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
Uploaded: 2017-09-29T07:45:48+00:00
Duration: PTM18S39
Channel: Cori Flowers
Description: 2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr

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

<Head> <script type=“ text/javascript "> script commands </script> <body> </body> </html> <Head> Tag MR.Mostafa badr Java Script

<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 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

Specifying Counter Values in a For Loop

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

2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr

Similar presentations

Presentation on theme: "2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr

Similar presentations

Presentation on theme: "2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr"— Presentation transcript:

Similar presentations

About project

Feedback