1 JavaScript

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.
Javascript Introduction Norman White Material is from w3schools.com Go there to run examples interactively.
The Web Warrior Guide to Web Design Technologies
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.
CIS101 Introduction to Computing Week 11. Agenda Your questions Copy and Paste Assignment Practice Test JavaScript: Functions and Selection Lesson 06,
Web Page Behavior IS 373—Web Standards Todd Will.
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
Introduction to JavaScript. Aim To enable you to write you first JavaScript.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
آموزش طراحی وب سایت جلسه دهم – جاوا اسکریپت 1 تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: پست الکترونیک :
JavaScript Events and Event Handlers 1 An event is an action that occurs within a Web browser or Web document. An event handler is a statement that tells.
CS346 - Javascript 1, 21 Module 1 Introduction to JavaScript CS346.
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.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
CC1003N Week 6 More CSS and Javascript.. Objectives: ● More CSS Examples ● Javascript – introduction ● Uses of Javascript ● Variables ● Comments ● Control.
Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize,
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)
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?
Introduction to JavaScript Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan. 1.
Client-Side Scripting JavaScript.  produced by Netscape for use within HTML Web pages.  built into all the major modern browsers. properties  lightweight,
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.
Intro to JavaScript. Some simple examples Examples from our webpage Examples from Andrews webpage Today’s Example.
Dr. Qusai Abuein1 Internet & WWW How to program Chap.(6) JavaScript:Introduction to Scripting.
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.
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.
1 JavaScript in Context. Server-Side Programming.
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.
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".
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.
JavaScript. JavaScript Introduction JavaScript is the world's most popular programming language. It is the language for HTML and the web, for servers,
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.
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.
1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.
CGS 3066: Web Programming and Design Spring 2016 Introduction to JavaScript.
CNIT 133 Interactive Web Pags – JavaScript and AJAX Popup Boxes.
JavaScript Introduction JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer,
Web Programming Java Script-Introduction. What is Javascript? JavaScript is a scripting language using for the Web. JavaScript is a programming language.
CGS 3066: Web Programming and Design Spring 2017
Introduction to Client-Side Scripting and JavaScript
Web Development & Design Foundations with HTML5
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
JavaScript (JS) Basics
My First Web Page document.write("" + Date() + ""); To insert.
4. Javascript Pemrograman Web I Program Studi Teknik Informatika
JavaScript.
14 A Brief Look at JavaScript and jQuery.
WEB PROGRAMMING 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
Tutorial 10: Programming with javascript
Web Programming– UFCFB Lecture 13
CS105 Introduction to Computer Concepts JavaScript
Presentation transcript:

1 JavaScript

JavaScript Intro  “JavaScript is the most popular scripting language on the internet, and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari”  What is JavaScript? o JavaScript is a scripting language o Designed to add interactivity to HTML pages o A lightweight programming language o Can be embedded directly into HTML pages o Everyone can use JavaScript without purchasing a license 2

Java and JavaScript  Are Java and JavaScript the same? o NO!  Java and JavaScript are two completely different languages in both concept and design!  Java (developed by Sun Microsystems) is a programming language - in the same category as C and C++. 3

What can a JavaScript do?  JavaScript gives HTML designers a programming tool  JavaScript can put dynamic text into an HTML page o A JavaScript statement like this: document.write(" " + name + " ") can write a variable text into an HTML page  JavaScript can react to events o A JavaScript can be set to execute when something happens, like when a page has finished loading or when a user opens an HTML element  JavaScript can be used to validate data o A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing  JavaScript can be used to detect the visitor's browser o A JavaScript can be used to detect the visitor's browser, and - depending on the browser - load another page specifically designed for that browser  JavaScript can create dynamic effects in an HTML page 4

JavaScript – How to start  The HTML tag is used to insert a JavaScript into an HTML page. document.write("Hello World!"); 5

JavaScript – How to (contd.)  You can even add HTML tags to the JavaScript document.write(" Hello World! "); 6

How to Handle Simple Browsers  Browsers that do not support JavaScript, will display JavaScript as page content.  To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to "hide" the JavaScript. <!-- document.write("Hello World!"); //--> 7

Where to put the JavaScript  Scripts can be in document.write("This message is written by JavaScript"); 8

Where to put the JavaScript  Scripts can be in function message() { alert("This alert box was called with the onload event"); } 9

Using an External JavaScript  If you want to run the same JavaScript on several pages, without having to write the same script on every page, you can write a JavaScript in an external file  Save the external JavaScript file with a.js file extension  Note: The external script CANNOT contain the tags!  To use the external script, point to the.js file in the "src" attribute of the tag: 10

Using an External JavaScript 11

JavaScript Code  JavaScript code (or just JavaScript) is a sequence of JavaScript statements.  A JavaScript statement is a command to a browser. o The purpose of the command is to tell the browser what to do. o document.write("Hello World"); o alert("This alert box was called with the onload event");  JavaScript is Case Sensitive o Unlike HTML, JavaScript is case sensitive - therefore watch your capitalization closely when you write JavaScript statements, create or call variables, objects and functions 12

JavaScript Comments  Comments can be added to explain the JavaScript, or to make the code more readable  Single line comments start with //  JavaScript Multi-Line Comments o Multi line comments start with /* and end with */ 13

Let’s create some simple JavaScript Code 14

JavaScript Operators  JavaScript can be used to do Math or Math-like operations o Adding strings or numbers  JavaScript Operators o = is used to assign values o + is used to add values o var is used to declare variables inside JavaScript 15

JavaScript Code Adding two strings together and display: var txt1="What a very"; var txt2="nice day"; var txt3; txt3=txt1+txt2; document.write(txt3); 16

JavaScript Code (contd.) var txt1="What a very"; var txt2=" nice day"; var txt3; var txt4=" Hello world"; txt3=txt1+txt2; txt5=txt3+txt4; document.write(txt5); 17

JavaScript Arithmetic Operators 18

JavaScript Comparison Operators  Comparison operators can be used in conditional statements to compare values and take action depending on the result:  if (age<18) document.write("young"); 19

JavaScript Comparison Operators  In JavaScript we have the following conditional statements: o if statement - use this statement to execute some code only if a specified condition is true o if...else statement - use this statement to execute some code if the condition is true and another code if the condition is false o if...else if....else statement - use this statement to select one of many blocks of code to be executed o switch statement - use this statement to select one of many blocks of code to be executed 20

If Statement  if (condition) { code to be executed if condition is true } 21

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

If...else if...else Statement  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

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

JavaScript Objects Introduction  JavaScript is an object oriented program o Provides dynamic and customized effect in web design with these objects  Date Object o Used to work with dates and times 25

JavaScript Date Object  The Date object is used to work with dates and times  Date objects are created with the Date() constructor new Date() // current date and time var d=new Date(); document.write(d); document.write(d.getDay()); 26 var d=new Date(); document.write(d.getDay());

Date Object Methods 27

Practice Exercise  Create a webpage using HTML and JavaScript that dynamically displays greetings depending on hour of the day.  Anytime before 10 am: good morning  After 10 am and before 3 pm: good day  After 3 pm and before 8 pm: good evening  After 8 pm and before 11 pm: good night  Hint: o Use Date object and if…else if… statements 28

Part 2 29

JavaScript String Object  The String object is used to manipulate a stored piece of text 30 var txt="Hello world!"; document.write(txt.length); var txt="Hello world!"; document.write(txt.toUpperCase()); var txt="Hello world!"; var txt=5;

String manipulation  JavaScript can be used to manipulate and display texts in various formats o Big size text o Small size text o Bold o Italics o Font color o Subscript / Superscript o Blink 31

Example: String manipulation 32

Hyperlink in JavaScript 33

Practice Exercise  Create a JavaScript code with blinking hyperlink 34

JavaScript Popup Boxes  JavaScript has three kinds of popup boxes: o Alert box o Confirm box and o Prompt box  Alert box is often used to provide certain information to the user o When an alert box pops up, the user clicks "OK" to proceed  Confirm box is often used if you want the user to verify or accept something o When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed  Prompt box is often used if you want the user to input a value before entering a page 35

Alert Box function show_alert() { alert("Hello! I am an alert box!"); } 36

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

Practice Exercise  Create a confirm box button just like the previous example.  When the user presses OK or Cancel, display “You pressed OK!” or “You pressed Cancel!” as blinking text in the html webpage. 38

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

Extra Credit Solution Discussion 40

Announcements: Imp dates  Dec. 2 nd : HTML quiz (Regular class timing)  Dec 7 th : Final exam preview and quiz answer discussion; Project Submission  Dec. 9 th : No in-class meeting  Dec. 16 th : Final Exam 41

HTML Quiz preview 42