What is Java Script? An extension to HTML. An extension to HTML. Allows authors to incorporate some functionality in their web pages. (without using CGI.

Slides:



Advertisements
Similar presentations
1 What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight.
Advertisements

JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Introduction to JavaScript
Lesson 12- Unit L Programming Web Pages with JavaScript.
The Web Warrior Guide to Web Design Technologies
Tutorial 10 Programming with JavaScript
Web Page Behavior IS 373—Web Standards Todd Will.
XP Tutorial 1 New Perspectives on JavaScript, Comprehensive1 Introducing JavaScript Hiding Addresses from Spammers.
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
Introduction to JavaScript. Aim To enable you to write you first JavaScript.
آموزش طراحی وب سایت جلسه دهم – جاوا اسکریپت 1 تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: پست الکترونیک :
Lecture 7 Introduction to Java Script Presented By Dr. Shazzad Hosain Asst. Prof. EECS, NSU.
JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
Bridges To Computing General Information: This document was created for use in the "Bridges to Computing" project of Brooklyn College. You are invited.
DHTML: Dynamic HTML Internet Technology1. What is DHTML? A collection of enhancements to HTML ► To create dynamic and interactive websites Combination.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize,
Javascript. Outline Introduction Fundamental of JavaScript Javascript events management DOM and Dynamic HTML (DHTML)
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
1 JavaScript in Context. Server-Side Programming.
TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT Session 2: What is JavaScript?
Tutorial 10 Programming with JavaScript. XP Objectives Learn the history of JavaScript Create a script element Understand basic JavaScript syntax Write.
Tutorial 10 Programming with JavaScript
Introduction to JavaScript Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan. 1.
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,
Introduction.  The scripting language most often used for client-side web development.  Influenced by many programming languages, easier for nonprogrammers.
JavaScript - A Web Script Language Fred Durao
LOGO Introduction to Client-Side Scripting and JavaScript CHAPTER 9 Eastern Mediterranean University School of Computing and Technology Department of Information.
1 JavaScript
JavaScript Syntax, how to use it in a HTML document
Overview of Form and Javascript fundamentals. Brief matching exercise 1. This is the software that allows a user to access and view HTML documents 2.
JavaScript Scripting language What is Scripting ? A scripting language, script language, or extension language is a programming language.
Sahar Mosleh California State University San MarcosPage 1 JavaScript Basic.
Chapter 2: Variables, Functions, Objects, and Events JavaScript - Introductory.
By Tharith Sriv. To write a web page you use: HHTML (HyperText Markup Language), AASP (Active Server Page), PPHP (HyperText Preprocessor), JJavaScript,
JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted.
COMP403 Web Design JAVA SCRİPTS Tolgay KARANFİLLER.
4. Javascript M. Udin Harun Al Rasyid, S.Kom, Ph.D Lab Jaringan Komputer (C-307) Desain.
HTML Overview Part 5 – JavaScript 1. Scripts 2  Scripts are used to add dynamic content to a web page.  Scripts consist of a list of commands that execute.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
Pertemuan 5 IT133 Pengembangan Web JavaScript. What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting.
CIS 3.5 Lecture 2.3 "Introduction to JavaScript".
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
Web Programming Overview. Introduction HTML is limited - it cannot manipulate data How Web pages are extended (include): –Java: an object-oriented programming.
JavaScript. JavaScript Introduction JavaScript is the world's most popular programming language. It is the language for HTML and the web, for servers,
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.
Javascript Basic Concepts Presentation By: Er. Sunny Chanday Lecturer CSE/IT RBIENT.
Introduction to JavaScript MIS 3502, Fall 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 9/29/2016.
Introduction to.
Introduction to Client-Side Scripting and JavaScript
CIS 388 Internet Programming
Tutorial 10 Programming with JavaScript
JavaScript is a programming language designed for Web pages.
Section 17.1 Section 17.2 Add an audio file using HTML
4. Javascript Pemrograman Web I Program Studi Teknik Informatika
JavaScript.
DHTML Javascript Internet Technology.
WEB PROGRAMMING JavaScript.
DHTML Javascript Internet Technology.
CS105 Introduction to Computer Concepts
Tutorial 10: Programming with javascript
JavaScript Basics What is JavaScript?
JavaScript is a scripting language designed for Web pages by Netscape.
Web Programming– UFCFB Lecture 13
Web Programming and Design
CS105 Introduction to Computer Concepts JavaScript
Presentation transcript:

What is Java Script? An extension to HTML. An extension to HTML. Allows authors to incorporate some functionality in their web pages. (without using CGI script). Allows authors to incorporate some functionality in their web pages. (without using CGI script). JavaScript can be used in a number of ways to spice up your page. Moving images, actions on buttons etc. JavaScript can be used in a number of ways to spice up your page. Moving images, actions on buttons etc.

What can Java script do? JavaScript can greatly enhance the interactivity of your web page. (image flips, drop down menu boxes, live clocks etc). JavaScript can greatly enhance the interactivity of your web page. (image flips, drop down menu boxes, live clocks etc). JavaScript gives HTML designers a programming tool JavaScript gives HTML designers a programming tool JavaScript can put dynamic text into an HTML page JavaScript can put dynamic text into an HTML page JavaScript can react to events. JavaScript can react to events. JavaScript can read and write HTML elements - It can read and change the content of an HTML element. JavaScript can read and write HTML elements - It can read and change the content of an HTML element. JavaScript can be used to validate data - before it is submitted to a server, this will save the server from extra processing JavaScript can be used to validate data - before it is submitted to a server, this will save the server from extra processing

Java vs Java Script Java is an Object Oriented Programming (OOP) language created by James Gosling of Sun Microsystems. JavaScript was created by the fine people at Netscape. Java is an Object Oriented Programming (OOP) language created by James Gosling of Sun Microsystems. JavaScript was created by the fine people at Netscape. JavaScript is a distant cousin of Java. JavaScript is a distant cousin of Java. It is also an OOP language. Many of their programming structures are similar. It is also an OOP language. Many of their programming structures are similar. However, JavaScript contains a much smaller and simpler set of commands than does Java. It is easier for the average weekend warrior to understand. However, JavaScript contains a much smaller and simpler set of commands than does Java. It is easier for the average weekend warrior to understand.

Differences Java can stand on its own, while JavaScript must be placed inside an HTML document to function. Java can stand on its own, while JavaScript must be placed inside an HTML document to function. Java must be compiled into what is known as a "machine language" before it can be run on the Web. To alter it, you need to compile again. Java must be compiled into what is known as a "machine language" before it can be run on the Web. To alter it, you need to compile again. JavaScript is text-based. You write it to an HTML document and it is run through a browser. You can alter it after it runs and run it again and again. JavaScript is text-based. You write it to an HTML document and it is run through a browser. You can alter it after it runs and run it again and again.

Java Script Vs Java Applets A Java "applet" (a little application) is a fully contained program. JavaScript is text that is downloaded into a browser A Java "applet" (a little application) is a fully contained program. JavaScript is text that is downloaded into a browser Java applets run independently of the HTML document that is calling them. They do appear on the same page. Java applets run independently of the HTML document that is calling them. They do appear on the same page. The HTML document does little more than call for the application and place it on the page. The HTML document does little more than call for the application and place it on the page. JavaScript is wholly reliant on the browser to understand it and make it come to life. JavaScript is wholly reliant on the browser to understand it and make it come to life.

Benefits JavaScript's easy to understand. JavaScript's easy to understand. It is much easier and more robust than Java. It is much easier and more robust than Java. JavaScript is geared to Web pages: It allows you to call on an item that already exists, like the status bar or the browser itself, and play with just that part.. JavaScript is geared to Web pages: It allows you to call on an item that already exists, like the status bar or the browser itself, and play with just that part.. It allows for fast creation of Web page events. (Many commands in JavaScript are Event Handlers). It allows for fast creation of Web page events. (Many commands in JavaScript are Event Handlers). JavaScript is a little more forgiving than Java. It allows more freedom in the creation of objects. Java is very rigid and requires all items to be denoted and spelled out. JavaScript is a little more forgiving than Java. It allows more freedom in the creation of objects. Java is very rigid and requires all items to be denoted and spelled out.

How to use them. JavaScript and applets are available on the Net as fully functioning items. Download and use them on your page (provided you are given permission). JavaScript and applets are available on the Net as fully functioning items. Download and use them on your page (provided you are given permission). There are many, many sites out there that do nothing more than hand out applets or JavaScript. Gamelan.com is a good one for applets. There are many, many sites out there that do nothing more than hand out applets or JavaScript. Gamelan.com is a good one for applets. Gamelan.com Take a look at javascripts.com for over 2300 free JavaScript scripts. javascripts.com

How to write? A bare-bone script consists of only two lines: The tag: A bare-bone script consists of only two lines: The tag: The actual JavaScript codes will fall inside this tag. The actual JavaScript codes will fall inside this tag.

JavaScript where to put…. Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. Scripts in the head section: Scripts to be executed when they are called, or when an event is triggered, go in the head section. Scripts in the body section: Scripts to be executed when the page loads, go in the body section. When you place a script in the body section it generates the content of the page. Scripts in the body section: Scripts to be executed when the page loads, go in the body section. When you place a script in the body section it generates the content of the page. Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section. (SUPPORTS 0-1-INFINITY PRINCIPLE) Scripts in both the body and the head section: You can place an unlimited number of scripts in your document, so you can have scripts in both the body and the head section. (SUPPORTS 0-1-INFINITY PRINCIPLE)

Example <body> document.write("Hello World!") document.write("Hello World!")</script></font></b></center></body></html> The code above will produce this output on an HTML page: The code above will produce this output on an HTML page: Hello World! hello.html

Ending Statements With a Semicolon? With traditional programming languages, like C++ and Java, each code statement has to end 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. 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. JavaScript uses them to separate commands and declarations JavaScript uses them to separate commands and declarations

Some features Conditional statements Conditional statements Conditional operators Conditional operators Buttons, Alerts and Confirmation Box Buttons, Alerts and Confirmation Box Event Handling Event Handling Loops Loops

Variables JavaScript uses variables to store data. JavaScript uses variables to store data. 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. 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: Rules for Variable names: Variable names are case sensitive Variable names are case sensitive They must begin with a letter or the underscore character They must begin with a letter or the underscore character Keep all of your variables in the HEAD section. Keep all of your variables in the HEAD section. If you declare a variable outside a function, all the functions on your page can access it. If you declare a variable outside a function, all the functions on your page can access it. The lifetime of these variables starts when they are declared, and ends when the page is closed. The lifetime of these variables starts when they are declared, and ends when the page is closed.

Conditional Statements In JavaScript we have three conditional statements: In JavaScript we have three conditional statements: if statement - use this statement if you want to execute a set of code when a condition is true if statement - use this statement if you want to execute a set of code when a condition is true if...else statement - use this statement if you want to select one of two sets of lines to execute if...else statement - use this statement if you want to select one of two sets of lines to execute switch statement - use this statement if you want to select one of many sets of lines to execute switch statement - use this statement if you want to select one of many sets of lines to execute

Conditional Operator JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. JavaScript also contains a conditional operator that assigns a value to a variable based on some condition. Syntax Syntaxvariablename=(condition)?value1:value2 Example Example greeting=(visitor=="PRES")?"Dear President ":"Dear " greeting=(visitor=="PRES")?"Dear President ":"Dear " If the variable visitor is equal to PRES, then put the string "Dear President " in the variable named greeting. If the variable visitor is not equal to PRES, then put the string "Dear " into the variable named greeting. If the variable visitor is equal to PRES, then put the string "Dear President " in the variable named greeting. If the variable visitor is not equal to PRES, then put the string "Dear " into the variable named greeting.

Buttons tags. tags. Syntax Syntax<FORM> </FORM> You can change the background color of a page. You can change the background color of a page.

Alerts JavaScript alert boxes tell the viewer something you want them to know. JavaScript alert boxes tell the viewer something you want them to know. Syntax Syntax alert('your choice of text') alert('your choice of text') To use it, place it inside another command. To use it, place it inside another command. The following script will alert the user to NOT click this particular link when they move their mouse over it. The following script will alert the user to NOT click this particular link when they move their mouse over it. Don't click this link! Don't click this link!

Confirmation Box A JavaScript confirmation box can be a handy way to give your visitors a choice of whether or not an action is performed. A JavaScript confirmation box can be a handy way to give your visitors a choice of whether or not an action is performed. Allows the viewer to press an "OK" or "Cancel" button. Allows the viewer to press an "OK" or "Cancel" button. Syntax Syntax confirm("Text or question you want to use"); confirm("Text or question you want to use"); The confirmation box will return a value of true or false, and we must make use of the result by assigning it to a variable, like this: The confirmation box will return a value of true or false, and we must make use of the result by assigning it to a variable, like this: var where_to= confirm("Do you really want to go to this page??"); var where_to= confirm("Do you really want to go to this page??");

Looping In JavaScript we have the following looping statements: In JavaScript we have the following looping statements: while while do...while do...while for for

External Scripts To run the same script on several pages, without writing the script on each and every page, you can write a script in an external file, and save it with a.js file extension, like this: To run the same script on several pages, without writing the script on each and every page, you can write a script in an external file, and save it with a.js file extension, like this: The external script cannot contain the tag The external script cannot contain the tag Now you can call this script, using the "src" attribute, from any of your pages: Now you can call this script, using the "src" attribute, from any of your pages: <body> </body></html> Remember to place the script exactly where you normally would write the script. Remember to place the script exactly where you normally would write the script.

Comments The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line. The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line. <!– some statements //--></script>

Conclusion JavaScript was designed to add interactivity to HTML pages JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language - a scripting language is a lightweight programming language JavaScript is a scripting language - a scripting language is a lightweight programming language A JavaScript is usually embedded directly in HTML pages A JavaScript is usually embedded directly in HTML pages JavaScript is an interpreted language (means that scripts execute without preliminary compilation) JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license Everyone can use JavaScript without purchasing a license JavaScript is supported by all major browsers, like Netscape and Internet Explorer JavaScript is supported by all major browsers, like Netscape and Internet Explorer