INTRODUCTION TO JAVASCRIPT

1. INTRODUCTION TO JAVASCRIPT

2. JAVASCRIPT • JavaScript is used in millions of Web pages to improve the design, validate forms, detect browsers, create cookies, and much more. • JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Mozilla, Firefox, Netscape, Opera.

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

4. What is JavaScript? (cont) • Object based (not object oriented) programming language • very limited object creation • a set of pre-defined objects associated with • HTML document structure • many HTML tags constitute JS Objects • Browser functionality • provides a limited API to Browser functionality

5. Where did it come from • Originally called LiveScript at Netscape • started out to be a server side scripting language for providing database connectivity and dynamic HTML generation on Netscape Web Servers • Netscape decided it would be a good thing for their browsers and servers to speak the same language so it got included in Navigator • Netscape in alliance w/Sun jointly announced the language and its new name Java Script • Because of rapid acceptance by the web community Microsoft forced to include in IE Browser

6. Browser compatibility • For the most part Java Script runs the same way in all popular browsers • There are many areas where there are slight differences in how Java Script will run • there will be a separate set of slides addressing these differences.

7. JavaScript…Java ? • There is no relationship other than the fact that Java and JavaScript resemble each other (and C++) syntactically • JavaScript is pretty much the de-facto standard for client-side scripting (Internet Explorer also provides VBScript & JScript) • In Netscape browsers there is an API that allows JavaScript and Java applets embedded in the same page to converse

8. What can it be used for • Some pretty amazing things…. • Text animation • graphic animation • simple browser based application • HTML forms submission • client-side forms data validation (relieving the server of this task) • web site navigation

9. What do I need to get started • A web browser • Netscape Navigator 4.x or later • MS Internet Explorer 3.x or later • A text Editor • Wordpad/Notepad • Vi, Emacs

10. Putting JavaScript into your HTML • in an external file • collect commonly used functions together into external function libraries on the server • added benefit of privacy from curious users • in-line with your HTML • as an expression for an HTML tag attribute • within some HTML tags as Event Handlers

11. Process • Open your text editor • create a file containing html and Javascript • save as text file with file type .htm or .html • open your browser • click on file, open file • locate the file you just created • open file in browser

12. <SCRIPT>…</SCRIPT> • <SCRIPT language=…. src=……></SCRIPT> • The <SCRIPT> tag indicates to the browser the beginning of an embedded script; </SCRIPT> indicates the end of an embedded script. • the “language” attribute indicates the script processor to be used • the “src” attribute indicates the URL of a file on the server containing the script to be embedded

13. Scripts • Since scripts are placed in line with with HTML older browsers will attempt to submit them as text. • To prevent this hide them in side of an HTML comment . <!-- --> • for JavaScript comments use // or /* */

14. <SCRIPT> • <SCRIPT LANGUAGE=“JavaScript”> • <!-- start hiding code from old browsers> • Script • Code • Goes • Here • // Stop Hiding code --> • </SCRIPT>

15. Document Object model (DOM) • Java Script enabled browsers are capable of recognizing individual objects in HTML page, after the page has been submitted in the browsers, because the java script enabled browsers recognizes and uses DOM. • Using the DOM , java script enabled browsers identify the collection of web page objects. • Java script objects hierarchy is mapped to the Dom, which in turns mapped to web page elements in the browsers window.

16. Object Hierarchy window history document location link link anchor layer form applet image area text radio button fileUpload select textarea checkbox reset option password submit

17. The Object Model • It is very important to understand the object model • each object has its own properties, some of which are read only some of which you can set directly by assignment (as location) • each object also has a set of behaviors called methods

18. 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 - in the same category as C and C++.

19. How to Put a JavaScript Into an HTML Page? <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html>

20. OUTPUT

21. Ending Statements With a Semicolon? • With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon (;). • Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line.

22. 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)

23. JavaScript Operators Arithmetic Operators

24. JavaScript Operators – 2 Assignment Operators

25. JavaScript Operators - 3 Comparison Operators

26. JavaScript Operators - 4 Logical Operators

27. JavaScript Basic Examples <script> document.write("Hello World!") </script> format text with HTML code - heading <script> alert("Hello World!") </script>

28. Example <html> <body> <script> x="Hello World!" document.write(x) document.write("<br>") </script> <script> x="GOOD BYE" document.write("CLASS" +x) </script> </body> </html>

29. OUTPUT

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

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

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

33. Prompt Box Example <script> x=prompt (“WELCOME”, “ ”) document.write(“CLASS <br>”,+x) </script>

34. OUTPUT

35. OUTPUT

36. OUTPUT

37. JS Examples -1 Y=20x+12 ;where x=3 <script> x=3 y=20*x+12 alert(y) </script>

38. OUTPUT

39. Examples -2 <script> s1=12 s2=28 toplam=s1+s2 document.write("Sayıların toplamı: "+toplam) </script>

40. Examples -3 s1=12, s2=28 <script> s1=12 s2=6 add=s1+s2 sub=s1-s2 mul=s1*s2 divl=s1/s2 document.write(add+"<br>") document.write(sub+"<br>") document.write(mul+"<br>") document.write(divl+"<br>") alert("CACULATION COMPLETED") </script ></script >

41. OUTPUT

42. 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 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 • if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed • switch statement - use this statement if you want to select one of many blocks of code to be executed

43. Conditional Statements - 2 if (condition) { code to be executed if condition is true } if (condition) { code to be executed if condition is true } else { code to be executed if condition is not true }

44. Conditional Statements Examples <script> x=3 if(x<0) { alert ("negative") } else { alert ("pozitive") } </script>

45. OUTPUT

46. Conditional Statements Examples - 2 <script> c=confirm(“IS 25 divisible by 5 ?”) if(c) { alert (“Correct answer”) } else { alert (“wrong answer”) } </script>

47. OUTPUT

48. OUTPUT

49. Conditional Statements Examples - 3 <script> p=prompt(“ENTER THE MARKS?", " ") if(p>=“50") { alert(“PASS") } else { alert(“FAIL") } </script>

50. OUTPUT