Objective Static vs. Dynamic Web pages. Variables. Assignments. JavaScript Hierarchy of Objects JavaScript Functions (prompt(“”,””) Document.write(“”)

Slides:



Advertisements
Similar presentations
Chapter 7 JavaScript: Introduction to Scripting. Outline Simple Programs Objects and Variables Obtaining User Input with prompt Dialogs – –Dynamic Welcome.
Advertisements

 2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing.
1 CSC 551: Web Programming Spring 2004 client-side programming with JavaScript  scripts vs. programs  JavaScript vs. JScript vs. VBScript  common tasks.
The Web Warrior Guide to Web Design Technologies
Tutorial 10 Programming with JavaScript
Information Technology Center Hany Abdelwahab Computer Specialist.
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
WEB DESIGN AND PROGRAMMING Introduction to Javascript.
Scripting Languages.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
JavaScript – Part II Data Types and Operations George Mason University June 3, 2010.
1 CSC160 Chapter 9: The Document Object. Outline Document objects Properties of the document object linkColor alinkColor vlinkColor bgColor fgColor lastModified.
Chapter 4 JavaScript and Dynamic Web pages. Objectives Static Web pages Dynamic Web pages JavaScript Variables Assignments. JavaScript Functions –(prompt(“”,””)
Computers and Scientific Thinking David Reed, Creighton University JavaScript and User Interaction 1.
1 JavaScript in Context. Server-Side Programming.
CHAPTER 4 Java Script อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
Using Client-Side Scripts to Enhance Web Applications 1.
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
Dynamic Web Pages & JavaScript. Dynamic Web Pages Dynamic = Change Dynamic Web Pages are web pages that change. More than just moving graphics around.
XP Tutorial 6 New Perspectives on JavaScript, Comprehensive1 Working with Windows and Frames Enhancing a Web Site with Interactive Windows.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University JavaScript and Dynamic Web Pages.
JavaScript - A Web Script Language Fred Durao
JS Basics 1 Lecture JavaScript - Basics. JS Basics 2 What is JavaScript JavaScript is a “simple”, interpreted, programming language with elementary object-
JavaScript Adding active content to websites. Goals Understand structure of JavaScript Understand rules of coding Add active content to WebPages Add functions.
Dr. Qusai Abuein1 Internet & WWW How to program Chap.(6) JavaScript:Introduction to Scripting.
1 JavaScript
Input & Output Functions JavaScript is special from other languages because it can accept input and produce output on the basis of that input in the same.
JavaScript Scripting language What is Scripting ? A scripting language, script language, or extension language is a programming language.
1 A Balanced Introduction to Computer Science David Reed, Creighton University ©2005 Pearson Prentice Hall ISBN X Chapter 4 JavaScript and.
JavaScript Making Web pages come alive. Objectives Be able to read JavaScript scripts Be able to write JavaScript scripts.
1 A Balanced Introduction to Computer Science, 2/E David Reed, Creighton University ©2008 Pearson Prentice Hall ISBN Chapter 5 JavaScript.
Internet & World Wide Web How to Program, 5/e © by Pearson Education, Inc. All Rights Reserved.
 2008 Pearson Education, Inc. All rights reserved JavaScript: Introduction to Scripting.
ECA 225 Applied Interactive Programming ECA 225 Applied Online Programming control structures, events, objects.
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.
Making dynamic pages with javascript Lecture 1. Java script java versus javascript Javascript is a scripting language that will allow you to add real.
Chapter 7 - JavaScript: Introduction to Scripting Outline 7.1 Introduction 7.2 Simple Program: Printing a Line of Text in a Web Page 7.3 Another JavaScript.
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
JavaScript Introduction and Background. 2 Web languages Three formal languages HTML JavaScript CSS Three different tasks Document description Client-side.
CSC 121 Computers and Scientific Thinking Fall Interactive Web Pages.
Working with the Window Object JavaScript considers the browser window an object, which it calls the window object.
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.
Javascript Basic Concepts Presentation By: Er. Sunny Chanday Lecturer CSE/IT RBIENT.
JavaScript Events. Understanding Events Events add interactivity between the web page and the user Events add interactivity between the web page and the.
1 JavaScript and Dynamic Web Pages Lecture 7. 2 Static vs. Dynamic Pages  A Web page uses HTML tags to identify page content and formatting information.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University JavaScript and Dynamic Web Pages.
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
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.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Chapter 6 JavaScript: Introduction to Scripting
“Under the hood”: Angry Birds Maze
JavaScript is a programming language designed for Web pages.
Chapter 7 - JavaScript: Introduction to Scripting
JavaScript: Introduction to Scripting
WEB PROGRAMMING JavaScript.
Chapter 4 JavaScript and Dynamic Web Pages
T. Jumana Abu Shmais – AOU - Riyadh
JavaScript What is JavaScript? What can JavaScript do?
JavaScript What is JavaScript? What can JavaScript do?
JavaScript Basics What is JavaScript?
Chapter 7 - JavaScript: Introduction to Scripting
Chapter 7 - JavaScript: Introduction to Scripting
More JavaScript.
Chapter 7 - JavaScript: Introduction to Scripting
Chapter 5 JavaScript Numbers and Expressions
Presentation transcript:

Objective Static vs. Dynamic Web pages. Variables. Assignments. JavaScript Hierarchy of Objects JavaScript Functions (prompt(“”,””) Document.write(“”) Alert(“”) document.bgColor document.fgColor document.linkColor document.vlinkColor, window.open() window.close() window.location confirm() window.moveBy()

Static Web Pages Looks the same and behave in the same manner each time they are loaded into a browser Content doesn’t change It doesn’t specifying dynamic behavior Example html pages. A programming language is needed….

Dynamic Web pages Properties; They are the pages that change while you are looking to them, Varying their contents and responding to user actions.

Variables A variable is a name used to symbolize a dynamic value. A variable can be used to represent a value. JavaScript variables: tempInFahr, X, Y, x, y, Sum, SUM, sum, Sum2Date, Illegal variables: 2hotforU, salary$, two word,

Assignments = is the assignment Operator. The value on the right side assigned to the variable on the left side. x = y+1; myName = john, myname= Jan. Y= 1; Y= 3;

Cont.. X = X +1 The current value of X is increased by 1, and the result is assigned back to x. Note; = is assignment operator. == is equality operator.

JavaScript A Statement in a programming language specifies a particular action that the computer is to carry out, such as changing an image, opening a new window, changing the value of an variable. JavaScript is a programming language that adding dynamic features to Web pages. How? the simplest way to add dynamic content to a Web page is to embed Java Script statements directly within the page using tags.

Cont.. How to insert javascript in a webpage; Use the HTML tag pair and : alert(" your message goes here ");

JavaScript page Greetings hello Word, this is the html part of web page. JavaScript statments will go in here

Greetings firstName = prompt("Please enter your name", ""); document.write(" Hello " + firstName + ", welcome to my Web page. "); Whatever else you want to appear in your Web page...

A function Or Subroutine Take some variables, evaluate this variables and produce an output. Example; F(x)=x+2, alert(“hello cc312”), prompt(“what is your name”, “”)

Alert(“….”) Creats a pop-up window Alert statement cause a new windows to appear and display a specified message Such as: alert(" your message goes here ");

Prompt(“Some text”, ” ”) Prompting the user for a value, the programmer can specify ( a string of characters enclosed in quotes) that serve as prompt message, followed by another string that specifies a default value for the prompt. Prompt(“Please enter your name”, “”);

Document.write(“”) Document.write(“ ”) statement is used to display a message within the web page. document.write (“ ”) statement can display text ( a string) or a combination of text and variables connected with ‘+’. Documet.write(“hello class core 13.12”);

Formating output Any string in a document.write statement includes html tags will display just as any other text. document.write(" Hello "+ firstName + ", welcome to my Web page. ”) In general, JavaScript treats any sequence of characters enclosed in quotes as literal text.

Data types Integers They are numbers, such as 1,2,3,4… Booleans; True or False values Strings; They are sequins of any kinds of data types. Such as “Brooklyn college”, “cc312”, this is 4 you”

Number Representation JavaScript automatically displays very large or very small values using scientific notation. Example would be 1e5, X*10 y =XeY

Programming errors and Debugging Bug refers to an error in a program Debugging is the process of systematically locating and fixing errors in aprogram Three types errors can occur in a program: 1. Syntax errors are simple typographic errors. 2. Run-time errors occur when operations are applied to illegal values, such as dividing by Logic errors represent flaws in the design or implementation of program.

Math library functions Math.sqrt()  returns a square root of the input. Math.max (X,Y)  returns the greater of the two inputs. Math.min(X,Y)  returns the minimum number. Math.floor(2.564)  returns floor of a number, in this example it will return 2. Math.ceil(2.564)  returns ceil of a number, in here it would return 3.

Hierarchy of Objects Objects follow a strict hierarchy where the window object is the very top level. Such as: window.alert() Because window is the top level object it can be omitted. alert(); The second level of object is window.document such as: document.write(), document.bgcolor, etc..

Cont.. alert() Prompt() Confirm(). bgColor, fgColor, linkColor vlinkColor Window document

document.bgColor and document.fgColor document.bgColor is for changing the background color of page document.fgColor is for changing the font color of page Example background and font color This can be annoying... document.bgColor=“red”; document.fgColor=“blue”;

document.linkColor and document.vlinkColor document.linkColor is for changing the color of unvisited hyper links document.vlinkColor is for changing the color of visited links Example link color This can be annoying... document.linkColor=“red”; document.vlinkColor=“blue”;

window.open() and window.close() window.open() is for opening anew window window.close() is for closing a window example open and close window window.open(“ window.close();

window.location window.location is for changing the location of a window example html> Look at the location on top! newpage=prompt("Enter a URL“," window.location=newpage;

Confirm() Confirm() is a method that produce dialog boxes when called It is used to get user confirmation from a dialog box containing an OK button that returns true to the script and a cancel button that returns false to the script

Cont.. ask= confirm(“do you want to open a new window?”); If (ask){ window.open(); } Else{ Alert(“you chose to not open a new window”); }

window.moveBy() window.moveBy() is for moving a window either horizontally, vertically, or both, by the specified amount in pixels Did the page just move? answer = confirm("Are you ready?"); if (answer) { window.moveBy(100,100); }

Thank You..