In God we trust Learning Java Script. Java Script JavaScript is the scripting language of the Web! JavaScript is used in millions of Web pages to improve.

Slides:



Advertisements
Similar presentations
ISP 121 Algorithmsand Computer Programming. Why Know Simple Programming?  You can create powerful macros in Access / Excel / Word / ??? to manipulate.
Advertisements

The Web Warrior Guide to Web Design Technologies
آموزش طراحی وب سایت جلسه یازدهم – جاوا اسکریپت 2 تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: پست الکترونیک :
HTML Forms JavaScript Introduction / Overview Lab Homework #1 CS 183 4/8/2010.
JavaScript- Introduction. What it is and what it does? What it is? It is NOT Java It is NOT Server-side programming Users can see code It is a client-side.
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 8: JavaScript I.
CIS101 Introduction to Computing Week 11. Agenda Your questions Copy and Paste Assignment Practice Test JavaScript: Functions and Selection Lesson 06,
WTP Unit 4 JavaScript and DHTML. Javascript: – Client side scripting, – What is Javascript, – How to develop Javascript, – Simple Javascript, – Variables,
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
JavaScript Switch Statement. Switch JavaScript Switch Statement If you have a lot of conditions, you can use a switch statement instead of an if…elseif…
Introduction to JavaScript. Aim To enable you to write you first JavaScript.
آموزش طراحی وب سایت جلسه دهم – جاوا اسکریپت 1 تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: پست الکترونیک :
JAVASCRIPT HOW TO PROGRAM -2 DR. JOHN P. ABRAHAM UTPA.
Client-Side programming with JavaScript 3
Loops Doing the same thing over and over and over and over and over and over…
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.
JavaScript & DOM Client-side scripting. JavaScript JavaScript is a tool to automate client side (which is implemented using HTML so far) JavaSript syntax.
JavaScript – part II. The if Statement if (condition) { block of code to be executed if the condition is true }
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.
Javascript. Outline Introduction Fundamental of JavaScript Javascript events management DOM and Dynamic HTML (DHTML)
1 JavaScript 1. 2 Java vs. JavaScript Java –Is a high level programming language –Is platform independent –Runs on a standardized virtual machine.
CIS 375—Web App Dev II JavaScript II.
Using Client-Side Scripts to Enhance Web Applications 1.
Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,
VBScript. Introduction Visual Basic scripting language is client side scripting language. It is developed by Microsoft VBScript is subset of VB language.
JavaScript, jQuery, and Mashups Incorporating JavaScript, jQuery, and other Mashups into existing pages.
JS Basics 1 Lecture JavaScript - Basics. JS Basics 2 What is JavaScript JavaScript is a “simple”, interpreted, programming language with elementary object-
CSW131 Steven Battilana 1 CSW 131 – Supplement 2 Working with JavaScript (NOT in Textbook) Prepared by Prof. B. for use in CSW 131 (Intro. To Web Design)
1 JavaScript
JavaScript Scripting language What is Scripting ? A scripting language, script language, or extension language is a programming language.
1 JavaScript 2 JavaScript. 2 Rollovers Most web page developers first use JavaScript for rollovers A rollover is a change in the appearance of an element.
CSC318 – DYNAMIC WEB APPLICATION DEVELOPMENT BY: SITI NURBAYA ISMAIL FACULTY of COMPUTER and MATHEMATICAL SCIENCES.
CSW131 Steven Battilana 1 CSW 131 – Supplement 2 Working with JavaScript (NOT in Textbook) Prepared by Prof. B. for use in CSW 131 (Intro. To Web Design)
JavaScript, Fourth Edition
JavaScript. JavaScript is the programming language of HTML and the Web. Easy to learn One of the 3 languages of all developers MUST learn: 1. HTML to.
JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted.
Introduction To JavaScript. Putting it Together (page 11) All javascript must go in-between the script tags. All javascript must go in-between the script.
COMP403 Web Design JAVA SCRİPTS Tolgay KARANFİLLER.
Making dynamic pages with javascript Lecture 1. Java script java versus javascript Javascript is a scripting language that will allow you to add real.
CIS 375—Web App Dev II JavaScript I. 2 Introduction to DTD JavaScript is a scripting language developed by ________. A scripting language is a lightweight.
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".
JavaScript Lectures Level 7. What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting.
Web Development JavaScript. Introduction to JavaScript.
Chapter 5: Intro to Scripting CIS 275—Web Application Development for Business I.
Chapter 4 Java Script - Part1. 2 Outlines Introduction to Java Script Variables, Operators and Functions Conditional statements JavaScript Objects Forms.
JavaScript Events Java 4 Understanding Events Events add interactivity between the web page and the user You can think of an event as a trigger that.
Introduction to Javascript. What is javascript?  The most popular web scripting language in the world  Used to produce rich thin client web applications.
JavaScript JavaScript ( Condition and Loops ). Conditional Statements If Statement If...else Statement if (condition) { code to be executed if condition.
JavaScript Events. Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the.
CNIT 133 Interactive Web Pags – JavaScript and AJAX Popup Boxes.
JavaScript Tutorial First lecture 19/2/2016. Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part.
INTERNET APPLICATIONS CPIT405 JavaScript Instructor: Rasha AlOmari
Web Programming Java Script-Introduction. What is Javascript? JavaScript is a scripting language using for the Web. JavaScript is a programming language.
WEB SYSTEMS & TECHNOLOGY. Java Script  JavaScript created by Netscape  It is also client side programming  It can be use for client side checks.
 2001 Prentice Hall, Inc. All rights reserved. Outline 1 JavaScript.
CHAPTER 10 JAVA SCRIPT.
Pertemuan 7 JavaScript.
JavaScript (JS) Basics
JavaScript Loops.
My First Web Page document.write("" + Date() + ""); To insert.
4. Javascript Pemrograman Web I Program Studi Teknik Informatika
JavaScript.
My First Web Page document.write("" + Date() + ""); To insert.
JavaScript Defined General Syntax Body vs. Head Variables Math & Logic
CS105 Introduction to Computer Concepts
Web Programming– UFCFB Lecture 13
CS105 Introduction to Computer Concepts JavaScript
Presentation transcript:

In God we trust Learning Java Script

Java Script JavaScript is the scripting language of the Web! 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.

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

Sample 2 document.write(" Hello World! ")

Sample 3 function message() { alert("This alert box was called with the onload event") }

Sample Persian function message() { alert("به وب سايت دانشگاه جامع علمي كاربردي خوش آمديد") }

Sample ( Loading) document.write("This message is written when the page loads")

Sample Persian document.write("لطفا كمي صبر كنيد")

External Script The actual script is in an external script file called “filename.js".

Declare a variable, assign a value to it, and display it var name = "ali" document.write(name) document.write(" "+name+" ") This example declares a variable, assigns a value to it, and then displays the variable. Then the variable is displayed one more time, only this time as a heading.

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

If ….else statement 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.

Random link var r=Math.random() if (r>0.5) { document.write(" Yahoo! ") } else { document.write(" Visit GOOGLE! ") }

Switch statement 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.

Alert Box function disp_alert() { alert("I am an alert box!!") }

Alert Box with line break function disp_alert() { alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!") }

Confirm box function disp_confirm() { var r=confirm("Press a button") if (r==true) { document.write("You pressed OK!") } else { document.write("You pressed Cancel!") }

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

Call a function function myfunction() { alert("HELLO") } <input type="button" onclick="myfunction()" value="Call function"> By pressing the button, a function will be called. The function will alert a message.

Function with an argument function myfunction(txt) { alert(txt) } <input type="button" onclick="myfunction('Hello')" value="Call function"> By pressing the button, a function with an argument will be called. The function will alert this argument.

Function with an argument.II function myfunction(txt) { alert(txt) } <input type="button" onclick="myfunction('Good Morning!')" value="In the Morning"> <input type="button" onclick="myfunction('Good Evening!')" value="In the Evening"> When you click on one of the buttons, a function will be called. The function will alert the argument that is passed to it.

Function that returns a value function myFunction() { return ("Hello, have a nice day!") } document.write(myFunction()) The script in the body section calls a function. The function returns a text.

Function with arguments, that returns a value 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.

For loop for (i = 0; i <= 5; i++) { document.write("The number is " + i) document.write(" ") } Explanation: This for loop starts with i=0. As long as i is less than, or equal to 5, the loop will continue to run. i will increase by 1 each time the loop runs.

Looping through HTML headers for (i = 1; i <= 6; i++) { document.write(" This is header " + i) document.write(" ") }

While loop i = 0 while (i <= 5) { document.write("The number is " + i) document.write(" ") i++ } Explanation: i is equal to 0. While i is less than, or equal to, 5, the loop will continue to run. i will increase by 1 each time the loop runs.

Do While loop i = 0 do { document.write("The number is " + i) document.write(" ") i++ } while (i <= 5) Explanation: i equal to 0. The loop will run i will increase by 1 each time the loop runs. While i is less than, or equal to, 5, the loop will continue to run.

Break a loop var i=0 for (i=0;i<=10;i++) { if (i==3){break} document.write("The number is " + i) document.write(" ") } Explanation: The loop will break when i=3.

Break and continue a loop var i=0 for (i=0;i<=10;i++) { if (i==3){continue} document.write("The number is " + i) document.write(" ") } Explanation: The loop will break the current loop and continue with the next value when i=3.

Use a for...in statement to loop through the elements of an array var x var mycars = new Array() mycars[0] = "Saab" mycars[1] = "Volvo" mycars[2] = "BMW" for (x in mycars) { document.write(mycars[x] + " ") }

The try...catch statement var txt="" function message() { try { adddlert("Welcome guest!") } catch(err) { txt="There was an error on this page.\n\n" txt+="Error description: " + err.description + "\n\n" txt+="Click OK to continue.\n\n" alert(txt) }

The try...catch statement with a confirm box var txt="" function message() { try { adddlert("Welcome guest!") } catch(err) { txt="There was an error on this page.\n\n" txt+="Error description: " + err.description + "\n\n" txt+="Click OK to continue.\n\n" alert(txt) }

The onerror event var txt="" function message() { try { adddlert("Welcome guest!") } catch(err) { txt="There was an error on this page.\n\n" txt+="Click OK to continue viewing this page,\n" txt+="or Cancel to return to the home page.\n\n" if(!confirm(txt)) { document.location.href=" }

onerror=handleErr var txt="" function handleErr(msg,url,l) { txt="There was an error on this page.\n\n" txt+="Error: " + msg + "\n" txt+="URL: " + url + "\n" txt+="Line: " + l + "\n\n" txt+="Click OK to continue.\n\n" alert(txt) return true } function message() { adddlert("Welcome guest!") }

Alert user, depending on browser function detectBrowser() { var browser=navigator.appName var b_version=navigator.appVersion var version=parseFloat(b_version) if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4)) {alert("Your browser is good enough!")} else {alert("It's time to upgrade your browser!")} }

Simple Timing function timedMsg() { var t=setTimeout("alert('5 seconds!')",5000) } Click on the button above. An alert box will be displayed after 5 seconds.

Simple Timing..II function timedText() { var t1=setTimeout("document.getElementById('txt').value='2 seconds!'",2000) var t2=setTimeout("document.getElementById('txt').value='4 seconds!'",4000) var t3=setTimeout("document.getElementById('txt').value='6 seconds!'",6000) } Click on the button above. The input field will tell you when two, four, and six seconds have passed.

Timing event in an infinite loop var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) } Click on the button above. The input field will count for ever, starting at 0.

Timing event in an infinite loop - with a Stop button var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) } function stopCount() { clearTimeout(t) } Click on the "Start count!" button above to start the timer. The input field will count forever, starting at 0. Click on the "Stop count!" button to stop the counting.

Time function startTime() { var today=new Date() var h=today.getHours() var m=today.getMinutes() var s=today.getSeconds() // add a zero in front of numbers<10 m=checkTime(m) s=checkTime(s) document.getElementById('txt').innerHTML=h+":"+m+":"+s t=setTimeout('startTime()',500) } function checkTime(i) { if (i<10) {i="0" + i} return i }