Web Programming Java Script Core Language Reference.

Slides:



Advertisements
Similar presentations
JavaScript I. JavaScript is an object oriented programming language used to add interactivity to web pages. Different from Java, even though bears some.
Advertisements

Introducing JavaScript
1 CSC 551: Web Programming Spring 2004 client-side programming with JavaScript  scripts vs. programs  JavaScript vs. JScript vs. VBScript  common tasks.
1 Outline 13.1Introduction 13.2A Simple Program: Printing a Line of Text in a Web Page 13.3Another JavaScript Program: Adding Integers 13.4Memory Concepts.
Working with JavaScript. 2 Objectives Introducing JavaScript Inserting JavaScript into a Web Page File Writing Output to the Web Page Working with Variables.
Javascript Client-side scripting. Up to now  We've seen a little about how to control  content with HTML  presentation with CSS  Javascript is a language.
Tutorial 10 Programming with JavaScript
Javascript II Expressions and Data Types. 2 JavaScript Review programs executed by the web browser programs embedded in a web page using the script element.
CS 299 – Web Programming and Design Overview of JavaScript and DOM Instructor: Dr. Fang (Daisy) Tang.
Introduction to scripting
WEB DESIGN AND PROGRAMMING Introduction to Javascript.
Scripting Languages.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
Database-Driven Web Sites, Second Edition1 Chapter 3 INTRODUCTION TO CLIENT-SIDE SCRIPTS.
JavaScript Part 1.
1 CLIENT-SIDE SCRIPTS. Objectives 2 Learn how to reference objects in HTML documents using the HTML DOM and dot syntax Learn how to create client-side.
CISC474 - JavaScript 03/02/2011. Some Background… Great JavaScript Guides: –
Chap 3 – PHP Quick Start COMP RL Professor Mattos.
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.
JS Basics 1 Lecture JavaScript - Basics. JS Basics 2 What is JavaScript JavaScript is a “simple”, interpreted, programming language with elementary object-
4.4 JavaScript (JS) Deitel Ch. 7, 8, 9, JavaScript & Java: Similarities JS (JavaScript) is case-sensitive Operators –arithmetic: unary +, unary.
JavaScript - Basic Concepts Prepared and Presented by Hienvinh Nguyen, Afshin Tiraie.
JavaScript, Fourth Edition
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.
4. Javascript M. Udin Harun Al Rasyid, S.Kom, Ph.D Lab Jaringan Komputer (C-307) Desain.
ECA 225 Applied Interactive Programming ECA 225 Applied Online Programming control structures, events, objects.
1 JavaScript in Context. Server-Side Programming.
INT222 – Internet Fundamentals Week 11: RegExp Object and HTML5 Form Validation 1.
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
Rich Internet Applications 2. Core JavaScript. The importance of JavaScript Many choices open to the developer for server-side Can choose server technology.
Tutorial 10 Programming with JavaScript. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of JavaScript.
Introduction to Javascript. What is javascript?  The most popular web scripting language in the world  Used to produce rich thin client web applications.
OVERVIEW OF CLIENT-SIDE SCRIPTING
1 Agenda  Unit 7: Introduction to Programming Using JavaScript T. Jumana Abu Shmais – AOU - Riyadh.
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
1 HTML & teh internets. 2 Contents JavaScript CSS Goal: Integrating knowledge.
 2001 Prentice Hall, Inc. All rights reserved. Outline 1 JavaScript.
JavaScript.
Build in Objects In JavaScript, almost "everything" is an object.
Information and Computer Sciences University of Hawaii, Manoa
Java Script Introduction. Java Script Introduction.
>> Introduction to JavaScript
CHAPTER 10 JAVA SCRIPT.
Tutorial 10 Programming with JavaScript
Chapter 4 Client-Side Programming: the JavaScript Language
HTML & teh internets.
JavaScript - Errors & Exceptions Handling
In this session, you will learn about:
SEEM4570 Tutorial 05: JavaScript as OOP
Scope, Objects, Strings, Numbers
JavaScript Syntax and Semantics
Expressions and Control Flow in JavaScript
Javascript Conditionals.
JavaScript.
Week#2 Day#1 Java Script Course
CHAPTER 4 CLIENT SIDE SCRIPTING PART 2 OF 3
Chapter 19 JavaScript.
Introduction to Python
Web Systems Development (CSC-215)
JavaScript Functions B. Ramamurthy 11/22/2018.
PHP.
Tutorial 10 Programming with JavaScript
OUR SCHOOL.
JavaScript: Introduction to Scripting
The <script> Tag
CIS 136 Building Mobile Apps
JavaScript Session III
Presentation transcript:

Web Programming Java Script Core Language Reference

The String Object Character Conversions Character Codes function showCharCode() { var theText = “”; if (window.getSelection) { theText = window.getSelection().toString(); } else if (document.getSelection) { theText = document.getSelection(); } else if (document.selection && document.selection.createRange) { theText = document.selection.createRange().text; } if (theText) { document.forms[0].charCodeDisplay.value = theText.charCodeAt(); } else { document.forms[0].charCodeDisplay.value = “ “; } function showString(form) { form.result.value = String.fromCharCode(form.entry1.value,form.entry2.value,form.entry3.value); }

The String Object document.onmouseup = showCharCode; Capturing Character Codes Select any of this text, and see the character code of the first character. Character Code:<input type=”text” name=”charCodeDisplay” size=”3” /> Converting Codes to Characters Enter a value 0-255: <input type=”button” value=”Show String” onclick=”showString(this.form)” /> Result:<input type=”text” name=”result” size=”5” />

The String Object Regular Expression Match Workshop Regular Expression Match function doMatch(form) { var str = form.entry.value; var delim = (form.caseSens.checked) ? “/g” : “/gi”; var regexp = eval(“/” + form.regexp.value + delim); var resultArray = str.match(regexp); if (resultArray) { form.result.value = resultArray.toString(); form.count.value = resultArray.length; } else { form.result.value = “ ”; form.count.value = “”; }

The String Object String Match with Regular Expressions Enter a main string:<input type=”text” name=”entry” size=”60” value=”Many a maN and womAN have meant to visit GerMAny.” /> Enter a regular expression to match:<input type=”text” name=”regexp” size=”25” value=”\wa\w” /> <input type=”checkbox” name=”caseSens” />Case-sensitive <input type=”button” value=”Execute match()” onclick=”doMatch(this.form)” /> Result: Count:

The String Object Lab for string.replace() and string.search() Regular Expression Replace and Search var mainString = “To be, or not to be: that is the question:\n”; mainString += “Whether \’tis nobler in the mind to suffer\n”; mainString += “The slings and arrows of outrageous fortune,\n”; mainString += “Or to take arms against a sea of troubles,\n”; mainString += “And by opposing end them.”; function doReplace(form) { var replaceStr = form.replaceEntry.value; var delim = (form.caseSens.checked) ? “/g” : “/gi”; var regexp = eval(“/” + form.regexp.value + delim); form.result.value = mainString.replace(regexp, replaceStr); } function doSearch(form) { var replaceStr = form.replaceEntry.value; var delim = (form.caseSens.checked) ? “/g” : “/gi”; var regexp = eval(“/” + form.regexp.value + delim); form.result.value = mainString.search(regexp); } String Replace and Search with Regular Expressions

The String Object Text used for string.replace() and string.search() methods: To be, or not to be: that is the question: Whether ‘tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take arms against a sea of troubles, And by opposing end them. Enter a regular expression to match:<input type=”text” name=”regexp” size=”25” value=”\B’t” /> <input type=”checkbox” name=”caseSens” />Case-sensitive Enter a string to replace the matching strings:<input type=”text” name=”replaceEntry” size=”30” value=”it “ /> <input type=”button” value=”Execute replace()” onclick=”doReplace(this.form)” /> <input type=”button” value=”Execute search()” onclick=”doSearch(this.form)” /> Result:

The String Object Using Simple String Methods HTML by JavaScript var page = “”; page += “JavaScript can create HTML on the fly. Numerous string object methods facilitate creating text that is “ + “boldfaced”.bold() + “, “ + “italicized”.italics() + “, or even the terribly annoying “ + “blinking text”.blink() + “.”; document.write(page);

The Math, Number, and Boolean Objects Decimal-to-Hexadecimal Converter Function function toHex(dec) { hexChars = “ ABCDEF”; if (dec > 255) { return null; } var i = dec % 16; var j = (dec - i) / 16; result = “0X”; result += hexChars.charAt(j); result += hexChars.charAt(i); return result; }

The Math, Number, and Boolean Objects When a number isn’t a number var ageEntry = parseInt(document.forms[0].age.value); if (isNaN(ageEntry)) { alert(“Try entering your age again.”); } JavaScript Math Properties

The Math, Number, and Boolean Objects

The Array Object A Simple Parallel Array Lookup Parallel Array Lookup // the data var regionalOffices = new Array(“New York”, “Chicago”, “Houston”, “Portland”); var regionalManagers = new Array(“Shirley Smith”, “Todd Gaston”, “Leslie Jones”, “Harold Zoot”); var regOfficeQuotas = new Array(300000, , , ); // do the lookup into parallel arrays function getData(form) { var i = form.offices.selectedIndex; form.manager.value = regionalManagers[i]; form.quota.value = regOfficeQuotas[i]; }

The Array Object Parallel Array Lookup Select a regional office: <select name=”offices” onchange=”getData(this.form)”> New York Chicago Houston Portland The manager is: The office quota is: <input type=”text” name=”quota” size=”8” />

The Array Object Array Object Methods:Array Concatenation Array Concatenation // global variables var arrayOne, arrayTwo, arrayThree, textObj; // initialize after load to access text object in form function initialize() { var form = document.forms[0]; textObj = form.original; arrayOne = new Array(“Jerry”, “Elaine”,”Kramer”); arrayTwo = new Array(“Ross”, “Rachel”,textObj); arrayThree = arrayOne.concat(arrayTwo); update1(form); update2(form); showArrays(); } // display current values of all three arrays function showArrays() { var form = document.forms[0]; form.array1.value = arrayOne.join(“\n”); form.array2.value = arrayTwo.join(“\n”); form.array3.value = arrayThree.join(“\n”); }

The Array Object // change the value of first item in Array Three function update1(form) { arrayThree[0] = form.source1.value; form.result1.value = arrayOne[0]; form.result2.value = arrayThree[0]; showArrays(); } // change value of object property pointed to in Array Three function update2(form) { arrayThree[5].value = form.source2.value; form.result3.value = arrayTwo[2].value; form.result4.value = arrayThree[5].value; showArrays(); } table> arrayOne arrayTwo arrayThree

The Array Object Enter new value for arrayThree[0]: <input type=”text” name=”source1” value=”Jerry” /> <input type=”button” value=”Change arrayThree[0]” onclick=”update1(this.form)” /> Current arrayOne[0] is: Current arrayThree[0] is: textObj assigned to arrayTwo[2]:<input type=”text” name=”original” onfocus=”this.blur()” /> Enter new value for arrayThree[5]: <input type=”text” name=”source2” value=”Phoebe” /> <input type=”button” value=”Change arrayThree[5].value” onclick=”update2(this.form)” /> Current arrayTwo[2].value is:<input type=”text” name=”result3” /> Current arrayThree[5].value is: <input type=”button” value=”Reset” onclick=”location.reload()” />

Control Structures and Exception Handling Using try-catch-finally Constructions function attachToEnd(theNode, newTag) { try { var newElem = document.createElement(newTag); theNode.appendChild(newElem); } catch (e) { switch (e.name) { case “INVALID_CHARACTER_ERR” : statements to handle this createElement() error break; case “HIERARCHY_REQUEST_ERR” : statements to handle this appendChild() error break; case “WRONG_DOCUMENT_ERR” : statements to handle this appendChild() error break; case “NO_MODIFICATION_ALLOWED_ERR” : statements to handle this appendChild() error break; default: statements to handle any other error } return false; } return true; }

Control Structures and Exception Handling Throwing String Exceptions Throwing a String Exception var letters = new Array(“A”,”B”,”C”,”D”,”E”); function getLetter(fld) { try { var inp = parseInt(fld.value, 10); if (isNaN(inp)) { throw “Entry was not a number.”; } if (inp 5) { throw “Enter only 1 through 5.”; } fld.form.output.value = letters[inp - 1]; } catch (e) { alert(e); fld.form.output.value = “”; fld.focus(); fld.select(); } Throwing a String Exception Enter a number from 1 to 5: <input type=”text” name=”input” size=”5” /> <input type=”button” value=”Get Letter” onclick=”getLetter(this.form.input)” /> Matching Letter is:<input type=”text” name=”output” size=”5” />

Functions and Custom Objects A Function’s arguments and caller Properties function hansel(x,y) { var args = hansel.arguments; document.write(“ hansel.caller is “ + hansel.caller + “ ”); document.write(“hansel.arguments.length is “ + hansel.arguments.length + “ ”); for (var i = 0; i < args.length; i++) { document.write(“argument “ + i + “ is “ + args[i] + “ ”); } document.write(“ ”); } function gretel(x,y,z) { today = new Date(); thisYear = today.getFullYear(); hansel(x,y,z,thisYear); } hansel(1, “two”, 3); gretel(4, “five”, 6, “seven”);

Functions and Custom Objects Calling a Generalizable Function Variable Scope Trials function factorial(n) { if (n > 0) { return n * (factorial(n - 1)); } else { return 1; } Enter an input value: <input type=”button” value=”Calc Factorial” onclick=”this.form.output.value = factorial(this.form.input.value)” /> Results:

Thanks