Presentation is loading. Please wait.

Presentation is loading. Please wait.

آموزش طراحی وب سایت جلسه دهم – جاوا اسکریپت 1 تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: 09125773990 09371410986 پست الکترونیک :

Similar presentations


Presentation on theme: "آموزش طراحی وب سایت جلسه دهم – جاوا اسکریپت 1 تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: 09125773990 09371410986 پست الکترونیک :"— Presentation transcript:

1 آموزش طراحی وب سایت جلسه دهم – جاوا اسکریپت 1 تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: 09125773990 09371410986 پست الکترونیک : TargetLearning@gmail.com

2 Java Scripts #1 Part 10 Author :Babak Tavatav

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

4 Put a JavaScript into an HTML page Like CSS

5 document.write("Hello World!");

6 document.write(" Hello World! ");

7 Scripts in function message() { alert("This alert box was called with the onload event"); }

8 Scripts in document.write("This message is written by JavaScript");

9 Using an External JavaScript The actual script is in an external script file called "xxx.js".

10 JavaScript Comments // Write a heading document.write(" This is a heading "); // Write two paragraphs: document.write(" This is a paragraph. "); document.write(" This is another paragraph. ");

11 JavaScript Multi-Line Comments /* The code below will write one heading and two paragraphs */ document.write(" This is a heading "); document.write(" This is a paragraph. "); document.write(" This is another paragraph. ");

12 JavaScript Variables

13 JavaScript Arithmetic Operators OperatorDescriptionExampleResult +Additionx=y+2x=7 -Subtractionx=y-2x=3 *Multiplicationx=y*2x=10 /Divisionx=y/2x=2.5 %Modulus (division remainder) x=y%2x=1 ++Incrementx=++yx=6 --Decrementx=--yx=4

14 JavaScript Assignment Operators OperatorExampleSame AsResult =x=y x=5 +=x+=yx=x+yx=15 -=x-=yx=x-yx=5 *=x*=yx=x*yx=50 /=x/=yx=x/yx=2 %=x%=yx=x%yx=0

15 Example x=5+5; document.write(x); document.write(" "); x="5"+"5"; document.write(x); document.write(" "); x=5+"5"; document.write(x); document.write(" "); x="5"+5; document.write(x); document.write(" "); The rule is: If you add a number and a string, the result will be a string.

16 Comparison Operators Given that x=5 OperatorDescriptionExample ==is equal tox==8 is false ===is exactly equal to (value and type) x===5 is true x==="5" is false !=is not equalx!=8 is true >is greater thanx>8 is false <is less thanx<8 is true >=is greater than or equal to x>=8 is false <=is less than or equal tox<=8 is true

17 Logical Operators x=6 and y=3 OperatorDescriptionExample &&and(x 1) is true ||or(x==5 || y==5) is false !not!(x==y) is true

18 Conditional Operator variablename=(condition)?value1:value2 greeting=(visitor=="PRES")?"Dear President ":"Dear ";

19 Conditional 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: if statement - use this statement to execute some code only if a specified condition is true if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false if...else if....else statement - use this statement to select one of many blocks of code to be executed switch statement - use this statement to select one of many blocks of code to be executed

20 If...else Statement Syntax if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true }

21 var d = new Date(); var time = d.getHours(); if (time < 10) { document.write(" Good morning "); } else { document.write(" Good day "); } This example demonstrates the If...Else statement. If the time on your browser is less than 10, you will get a "Good morning" greeting. Otherwise you will get a "Good day" greeting.

22 if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if condition1 and condition2 are not true }

23 var d = new Date(); var time = d.getHours(); if (time<10) { document.write(" Good morning "); } else if (time>=10 && time<16) { document.write(" Good day "); } else { document.write(" Hello World! "); } This example demonstrates the if..else if...else statement.

24 The JavaScript Switch Statement switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }

25 var d = new Date(); theDay=d.getDay(); switch (theDay) { case 5: document.write(" Finally Friday "); break; case 6: document.write(" Super Saturday "); break; case 0: document.write(" Sleepy Sunday "); break; default: document.write(" I'm really looking forward to this weekend! "); } This JavaScript will generate a different greeting based on what day it is. Note that Sunday=0, Monday=1, Tuesday=2, etc.

26 Alert Box alert("sometext");

27 function show_alert() { alert("Hello! I am an alert box!"); }

28 Confirm Box

29 function show_confirm() { var r=confirm("Press a button!"); if (r==true) { alert("You pressed OK!"); } else { alert("You pressed Cancel!"); }

30 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 prompt("sometext","defaultvalue");

31 function show_prompt() { var name=prompt("Please enter your name","Harry Potter"); if (name!=null && name!="") { document.write("Hello " + name + "! How are you today?"); }

32 JavaScript Functions To keep the browser from executing a script when the page loads, you can put your script into a function. A function contains code that will be executed by an event or by a call to the function. You may call a function from anywhere within a page (or even from other pages if the function is embedded in an external.js file). Functions can be defined both in the and in the section of a document. However, to assure that a function is read/loaded by the browser before it is called, it could be wise to put functions in the section.

33 How to Define a Function function functionname(var1,var2,...,varX) { some code }

34 function displaymessage() { alert("Hello World!"); } By pressing the button above, a function will be called. The function will alert a message.

35 The return Statement

36 function product(a,b) { return a*b; } document.write(product(4,3)); The script in the body section calls a function with two parameters (4 and 3). The function will return the product of these two parameters.

37 The END


Download ppt "آموزش طراحی وب سایت جلسه دهم – جاوا اسکریپت 1 تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: 09125773990 09371410986 پست الکترونیک :"

Similar presentations


Ads by Google