Javascript and the Web Whys and Hows of Javascript.

Slides:



Advertisements
Similar presentations
Introducing JavaScript
Advertisements

Essentials for Design JavaScript Level One Michael Brooks
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Java Script Session1 INTRODUCTION.
Introduction to JavaScript
The Web Warrior Guide to Web Design Technologies
2440: 211 Interactive Web Programming JavaScript Fundamentals.
1 Javascrbipt Intro Javascript (or js) is a programming language. Interpreted, not compiled. Not the same as java, but, similar. Use tags to use. Object-oriented.
XP Tutorial 1 New Perspectives on JavaScript, Comprehensive1 Introducing JavaScript Hiding Addresses from Spammers.
Web Development & Design Foundations with XHTML Chapter 14 Key Concepts.
CIS101 Introduction to Computing Week 09 Spring 2004.
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.
Introduction to scripting
CS346 - Javascript 1, 21 Module 1 Introduction to JavaScript CS346.
SEG3210 DHTML Tutorial. DHTML DHTML is a combination of technologies used to create dynamic and interactive Web sites. –HTML - For creating text and image.
Generations of Programming Languages First generation  Machine Language Second Generation  Assembly Language Third Generation  Procedural language such.
CNIT 133 Interactive Web Pags – JavaScript and AJAX JavaScript Environment.
JavaScript Part 1.
JavaScript 1. What is JavaScript? JavaScript allows web authors to create dynamic pages that react to user interaction. It is an Object-based because.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad GM-IT CIIT Islamabad CIIT Virtual Campus, CIIT COMSATS Institute.
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,
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.
Lesson13. JavaScript JavaScript is an interpreted language, designed to function within a web browser. It can also be used on the server.
1 JavaScript in Context. Server-Side Programming.
TUTORIAL 10: PROGRAMMING WITH JAVASCRIPT Session 2: What is JavaScript?
 2003 Prentice Hall, Inc. All rights reserved. CHAPTER 3 JavaScript 1.
Introduction.  The scripting language most often used for client-side web development.  Influenced by many programming languages, easier for nonprogrammers.
JS Basics 1 Lecture JavaScript - Basics. JS Basics 2 What is JavaScript JavaScript is a “simple”, interpreted, programming language with elementary object-
Dr. Qusai Abuein1 Internet & WWW How to program Chap.(6) JavaScript:Introduction to Scripting.
1 JavaScript
JavaScript Syntax, how to use it in a HTML document
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.
ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming basics.
JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted.
Web111a_chapt08.ppt HTML: Section 8 JavaScript CGI Programs (Server Side programs) Common Gateway Interface Run on server Communicate with user across.
4. Javascript M. Udin Harun Al Rasyid, S.Kom, Ph.D Lab Jaringan Komputer (C-307) Desain.
Introduction into JavaScript Java 1 JavaScript JavaScript programs run from within an HTML document The statements that make up a program in an HTML.
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.
JavaScript 101 Introduction to Programming. Topics What is programming? The common elements found in most programming languages Introduction to JavaScript.
JavaScript. JavaScript Introduction JavaScript is the world's most popular programming language. It is the language for HTML and the web, for servers,
1 CSC160 Chapter 1: Introduction to JavaScript Chapter 2: Placing JavaScript in an HTML File.
Introduction to Javascript. What is javascript?  The most popular web scripting language in the world  Used to produce rich thin client web applications.
Javascript Basic Concepts Presentation By: Er. Sunny Chanday Lecturer CSE/IT RBIENT.
CGS 3066: Web Programming and Design Spring 2016 Introduction to JavaScript.
JavaScript and Ajax (JavaScript Environment) Week 6 Web site:
Module 1 Introduction to JavaScript
“Under the hood”: Angry Birds Maze
Web Development & Design Foundations with HTML5
JavaScript is a programming language designed for Web pages.
4. Javascript Pemrograman Web I Program Studi Teknik Informatika
Introduction to JavaScript
JavaScript an introduction.
WEB PROGRAMMING JavaScript.
Introduction to JavaScript
JavaScript What is JavaScript? What can JavaScript do?
Introduction to JavaScript
JavaScript What is JavaScript? What can JavaScript do?
Tutorial 10: Programming with javascript
JavaScript Basics What is JavaScript?
JavaScript is a scripting language designed for Web pages by Netscape.
Introduction to Programming and JavaScript
Introduction to JavaScript
Presentation transcript:

Javascript and the Web Whys and Hows of Javascript

Introduction to Javascript  Most popular languages:  COBOL, FORTRAN, C, C++ (Java (Script)) Javascript interpreted language that resembles C++ Used in conjunction with HTML Development of interactive web pages 

Java * Object-oriented language Looks a lot like Javascript compiled (not interpreted by a browser) Used for writing web applets Much more sophisticated Why not learn Java, then? Java is for advanced programmers and Javascript is much more fun! 

Why Javascript  Lightweight  Fast  Powerful –Data Entry Validation –Reduces server burden –Handles cookies  FUN! –Livens pages up

Web Pages with Javascript  * * * * HTML code Javascript code Web Page Source Browser interprets Web Page Use Homesite to help with 1. Html creation 2. Javascript creation 3. Viewing Web Page

A First Program  1.  2. My World  3.  <!-- HTML comments and hide script from old browsers ......Javascript Statements  //--> Close comment section and browser reads on  4.  5.

 HTML start tags  End tag  … Parts of a Simple Program Tags * *

 1.  Starting JavaScript commands  2. <!-- hide script from old browsers  older browsers don't display your script as text  3. alert('Welcome to my Web Site!');  Alert message goes inside single quotes. The semicolon separates JavaScript commands.  4. //-->  Stops hiding the script from old browsers.  5. Ends the JavaScript commands. A Simple Javascript Program  * * *

 charset – encoding  defer – will not generate any document content  id – identifier  language – language of the script (Javascript)  src – external source for the code script Tag Attributes * *

 … Sorry your browser doesn’t support it * * noscript

 Attribute SRC  Language versions –Include multiple scripts for different versions <script language=“javascript 1.1” src= “script.js”> … * * External Script Files

A few Javascript Commands  alert -- alert (‘your message’)  pops up a window with your message  document.write – document.write (“message”);  puts message on the page  onMouseover … <A HREF="jmouse.htm" onMouseover="window.status='Hi there!';  return true"> Place your mouse here!  document.bgcolor – document.bgcolor=“white”

When do scripts Run?  When document loads, or  Just after the document loads, or  When the user performs some action

Inline scripts  Use quotes with HTML code  Quotes inside quotes, need different quotes

Viewing Script ErrorsErrors  In IE –status bar at bottom of browser –small icon –double click –show details  In Netscape, navigate to javascript: –Click on File, Open page –Type javascript: –Click open

Server Side Scripts  Server tags  Not all servers support  Cpsc 317 for “good” techniques

Objects

Events

Events continued

Reserved Words  Words that have special meanings in the language. They must be used only for their specified purpose. Using them for any other purpose will result in a error.  e.g. alertdoif forwhileelse *

Javascript Statements  controls the sequence of execution  evaluates an expression  Always ends with a semicolon or brace. *

Comments  // These are important parts of a program.  DO:  Add comments to source code.  Keep comments up to date.  Use comments to explain sections of code.  Don't:  Use comments for code that is self- explanatory.  *

Style for Variable Definitions  group definitions at the beginning *

Style for Control Structures  blank lines before and after control structures   statements; if (expression) { statement; statement; } statements; * * *

Basic Program Format <!– non javascript browsers ignore // Programmer: John Doe // Date: Jan. 15, 2000 // Examples of Javascript statements var dateandtime=new Date();//String date var hours=dateandtime.getHours();// String hours var today; // integer day Program Comment at top. With your name & date. Program description. Note the use of blank lines. * * Document variable definitions and place them first

Basic Program Format (cont) One statement per line. Indent all lines within matching {} equally (2-4 spaces). Whitespace before and after control structures. Space around operators. * * * * * for (i = 1; i <= ; i++) { document.bgColor = "red"; document.bgColor = "white"; document.bgColor = "blue"; }; today = dateandtime.toLocaleString().substring(0,10); alert ("Today's date is "+today+""); document.write("Welcome ")

Basic Program Format (cont) Indent all lines within matching {} equally (2-4 spaces). Whitespace before and after control structures. * * * * * if (hours >= 12) { document.write("Good Afternoon"); }else{ document.write("Good Morning"); }