dhtml2010.pdf February 25,
|
|
- Leona Scott
- 6 years ago
- Views:
Transcription
1 Dynamic HTML INP 2009/ Client Side Scripting: The DOM and JavaScript Lennart Herlaar lennart@cs.uu.nl room A104, telephone February 25, 2010 The DOM and JavaScript 1 The interplay between (X)HTML, style sheets and JavaScript using the Document Object Model (DOM). JavaScript is a widely supported scripting language Most of its syntax will be familiar JavaScript seems object oriented, but is in some ways very different from Java. JavaScript can be used for manipulating a document via the DOM. DOM exists in several version: 0, 1, 2 and 3. Work on 3 continues, but support for 2 is still not standardized across browsers. Be careful when using JavaScript because people can turn it off and implementations vary to large extent. Things are getting better though. But JavaScript is still very useful for client side validation and (limited) dynamics. The DOM and JavaScript 1 What can you do with them? But first...javascript In your webpage you can allow: Interaction through forms. Pull down menus. Fold-out hierarchical structures. Tooltips Animation Run-time style configuration Code examples can be found everywhere (e.g. Estrella s DHTML and CSS book, Deitel, Deitel and Nieto). Derived from LiveScript. Sometimes called EcmaScript (see JavaScript mainly used for client-side validating and adding dynamics. You shall see a lot of commonalities with PHP (like ===). Seems a bit like Java at first glance, but mainly on the surface. This means: The well-known operators (+, ++, + =, =...) Comments The well-known control structures Objects and methods, including special ones like String, Math. No need to deallocate. The DOM and JavaScript 2 The DOM and JavaScript 3 Differences with Java part 1 Differences with Java part 2 Information is organized in objects: a list of pairs (property,value). JavaScript is object-based, not class-based. No need to declare variables or properties. Properties and functions can be added dynamically to objects. Variables are untyped (whatever type follows from assigment). The typeof operator can be used to determine run-time types. Everything starts with being undefined. Automatic conversion: "Bla " + number. A Java program stands alone: no coupling to the document. Functions exist. They may be added to objects to become methods Global and local variables Every variable is global except when explicitly declared with the keyword var inside a function. Scoping as usual, shadowing as usual. Function definitions can be nested (hardly anyone uses this). A number of global functions (members of Global): parseint, isnan, isfinite, escape and a few others. The DOM and JavaScript 4 The DOM and JavaScript 5 dhtml2010.pdf February 25,
2 A dynamic Javascript application Cats that meeow Dynamic contents of HTML pages that depend on the browser state Put the source code in the HTML page. Or put it in a separate.js file and include the source. <script language="javascript" type="text/javascript" src = "helperfuns.js"> today = new Date() endyear = new Date(2009,11,31,23,59,59,999) endyear.setfullyear(today.getfullyear()) msperday = 24 * 60 * 60 * 1000 daysleft = (endyear.gettime() - today.gettime()) / msperday daysleft = Math.round(daysLeft) document.writeln("still " + daysleft + " days left in this year"); The DOM and JavaScript 6 A constructor is synonymous with an object type. JavaScript engine is usually forgiving: turn on error messages in your browser. function cat(name) { // Object with added properties this.name = name; if (name) { this.talk = // talks string to alert function() { alert( this.name + " says meeow!" ) cat1 = new cat("felix"); cat1.talk(); //alerts "felix says meeow!" cat2 = new cat();cat2.talk(); // gives run-time error. The DOM and JavaScript 7 Prototype inheritance JavaScript arrays IE5+ doesn t support the shift() and unshift() methods of Array that NS4+ does shift removes the first element out of an array, shifting the other element one place forward and returns that first element. But these can be added on the fly to all Arrays, by prototype inheritance. As always this refers to the object at hand. if(!array.prototype.shift) { // if this method does not exist.. Array.prototype.shift = function(){ firstelement = this[0]; this.reverse(); this.length = Math.max(this.length-1,0); this.reverse(); return firstelement; The DOM and JavaScript 8 var mylist1 = [1, 2,, "four"]; // Not the same type var mylist2 = new Array(1,2,,"four"); var mylist3 = new Array(4); // Array of length 4 var multi1 = [ [ 1], [ 3, 4, 5]]; // One row of 1, one of 3. var x = multi1.length + multi1[0].length; // Should be three. for (var i in mylist1) { // i ranges over the indices. sum += mylist1[i]; join instead of implode Many useful functions exist: join, sort, concat, slice, shift, unshift, pop, push. Quite similar to what is available in Perl or PHP. The DOM and JavaScript 9 More on for Language differences with PHP The for...in statement also works for general objects. It ranges over all properties. obj["name"] and obj.name can both be used. function dumpprops (obj, objname) { var result = ""; for (var i in obj) { result += objname + "." + i + " = " + obj[i] + "<BR>" return result; car = new car(); car.make = "Ford"; car.model = "Escort"; dumpprops(car,"car"); null and undefined, almost the same but not quite. null is used for objects which do not refer to anything undefined is used for variables which do not exist or never got a value. Variables are global unless preceded by the keyword var. Call-by-value parameter passing; arrays and objects passed as references. Parameters also accessible in function through arguments array. Useful for taking arbitrary numbers of parameters. Strings should stick to a single line. No interpolation. Take care with juggling: " meeowws". What about 7 * "3"? Jugglings are likely enough different in more aspects. The DOM and JavaScript 10 The DOM and JavaScript 11 dhtml2010.pdf February 25,
3 Document Object Model Do we have Dom1? Glue between a programming language and the (X)HTML document Describes how elements in a document can be referred to. And the same for attributes of course. Various versions exist. Level 0 is a quite different across browsers. Level 1 is implemented in most browsers (but see for more detailed info). Level 2 events are handled in different ways by some browsers, leave alone support for Level 3. For some reason IE 6.x does not support the Level 2 events. Browser detects seem unavoidable Always verify that your system works on the major and some minor browsers. The DOM and JavaScript 12 var thedom1 = (document.getelementbyid)? true : false; var theapp = navigator.appname.tolowercase(); var UA = navigator.useragent.tolowercase(); var version = navigator.appversion; // Often WRONG!... Do not write detector yourself. It is hairy stuff. More detection code can be found on The DOM and JavaScript 13 Special operations in a browser window Resizing the window Open extra windows mywindow=window.open("ipnews.html"); // opens new window newval = prompt("gimme a bitstring","101"); if (confirm("are you sure you want "+newval+"?")) { document.write ("You got it"); else { document.write ("Make up your mind"); The DOM and JavaScript 14 function getavailablewidth () { var thewidth = null; if (window.innerwidth) { // Netscape thewidth = window.innerwidth; if (document.body.clientwidth) { // IE thewidth = document.body.clientwidth; return thewidth; // Same for height, IE 6.0 is supposed to be buggy here. function maximizewindow () { window.moveto(0,0); window.resizeto(screen.availwidth,screen.availheight); The DOM and JavaScript 15 Document Object Model (DOM) Document Object Model - document object window = the window in which we are document = the document that is displayed in the window frames document history - keeps track of browser history for moving back and forward location - url of the rendered document event - contains information for events (mouse coordinates) screen - information on the computer screen Estrella s book on JavaScript contains an appendix with an overview of Core JavaScript objects. all collection (references to all nodes in the document) body forms collection anchors collection (only when id or name attribute set) images collection links collection and many more. The DOM and JavaScript 16 The DOM and JavaScript 17 dhtml2010.pdf February 25,
4 Children are the future More structured into the document For each node, children is the array of its children. We can iterate nicely through the lot of them: function traverse (object) { if (typeof(object) === "object") { document.writeln(object.tagname); for (var child in object.children) { traverse(object.children[child]); Now for some examples of DOM and JavaScript working together function dochild (object) { if (typeof(object) === "object") { elements += "<li>"+object.tagname + "<ul>"; for (var i in object.children) { dochild(object.children[ i ]); elements += "</ul></li>"; </head> <body>... The DOM and JavaScript 18 The DOM and JavaScript 19 Reacting to a mouse click Mouse on the move function myfunc() { mywin=window.open("news.html", "mywindow", "width=200,height=200,toolbar=no,scrollbars=yes") <form> <input type="button" value="news" onclick="myfunc()" /> <input type="button" value="close" onclick="mywin.close()" /> function load1() { document["flower"].src = "flower1.jpg" function load2() { document["flower"].src = "flower2.jpg" </head> <body> <a href="test.html" onmouseover="load2()" onmouseout="load1()"> <img src="flower1.jpg" name="flower" /> <!-- id ipv name werkt ook --> </a> The DOM and JavaScript 20 The DOM and JavaScript 21 Calculations in a form Alternative addressing Accessing values from a form. Recomputed on change. function calc() { document.form1.out.value = parseint(document.form1.i1.value) + parseint(document.form1.i2.value)... <form name="form1"> <input type="text" name="i1" size="10" onchange="calc()" /> + <input type="text" name="i2" size="10" onchange="calc()" /> = <input type="text" name="out" size="10" /> Use Pascal style with Use getelementbyid function calc() { with (document["form1"]) { // Pascal style with command. OUT.value = parseint(i1.value) + parseint(document.getelementbyid("i2").value); The DOM and JavaScript 22 The DOM and JavaScript 23 dhtml2010.pdf February 25,
5 Validating input Events Validated on submission. If false is returned, the default action is not taken. In this case, the information is not submitted to the server. function mytest() { if (document.form2.textfield.value.length > 0) return true; else { alert( Text field empty! ); return false; <form name="form2" onsubmit="return mytest()"> <input name="textfield" type="text" /> <input type="submit" /> The DOM and JavaScript 24 Many events are predefined. Events are handled differently in the various DOMs. Dom 0 events are rather easy: click on something, browser sends click event to the corresponding node in the document tree, handled by a registered handler: onclick = "validate()". Then the event is sent up to the father node (bubbling) to be handled. Old netscape 4.x browsers use event capturing, which proceeds top-down to the target node. Under DOM Level 2, the default is bubbling if the Level 0 method is used. Starting events in your code: document.getelementbyid("phone").focus(); If a handler returns false, the default action is not taken (see forms). The DOM and JavaScript 25 Dom Level 2 events Bubble or capture, that is the question Event capturing: start at the root and move down to target Event bubbling: go back up from the target to the root. Along the way various methods may have been registered for the event. Register by adding listener(s) element.addeventlistener("click",startdragdrop,false); element.addeventlistener("click",spyonuser,false); When what is executed depends on your own choice. true means on capture (going down) false means on bubbling (going back up) Suppose e2 is nested in e1. First do1, then do2 e1.addeventlistener("click",do1,true) e2.addeventlistener("click",do2,false) // or true First do2, then do1 e1.addeventlistener("click",do1,false) e2.addeventlistener("click",do2,false) // or true The DOM and JavaScript 26 e1 might have a listener set to true and one to false Using e1.onclick = do1; behaves as if set to false/bubble. The DOM and JavaScript 27 Getting too complicated? Bubbling and/or capturing always happen If e1 and e2 both contained in document e1.onclick = dosomething1; e2.onclick = dosomething2; document.onclick = defaultfunction; An object may stop the event bubbling up further: function dosomething(e) { if (!e) var e = window.event; e.cancelbubble = true; // IE if (e.stoppropagation) e.stoppropagation(); // W3C Capturing cannot be stopped! The DOM and JavaScript 28 dhtml2010.pdf February 25,
JavaScript CS 4640 Programming Languages for Web Applications
JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation
More informationJavaScript CS 4640 Programming Languages for Web Applications
JavaScript CS 4640 Programming Languages for Web Applications 1 How HTML, CSS, and JS Fit Together {css} javascript() Content layer The HTML gives the page structure and adds semantics Presentation
More informationIntroduction to JavaScript p. 1 JavaScript Myths p. 2 Versions of JavaScript p. 2 Client-Side JavaScript p. 3 JavaScript in Other Contexts p.
Preface p. xiii Introduction to JavaScript p. 1 JavaScript Myths p. 2 Versions of JavaScript p. 2 Client-Side JavaScript p. 3 JavaScript in Other Contexts p. 5 Client-Side JavaScript: Executable Content
More informationLecture 3: The Basics of JavaScript. Background. Needs for Programming Capability. Origin of JavaScript. Using Client-side JavaScript
Lecture 3: The Basics of JavaScript Wendy Liu CSC309F Fall 2007 Background Origin and facts 1 2 Needs for Programming Capability XHTML and CSS allows the browser to passively display static content How
More informationJavaScript. History. Adding JavaScript to a page. CS144: Web Applications
JavaScript Started as a simple script in a Web page that is interpreted and run by the browser Supported by most modern browsers Allows dynamic update of a web page More generally, allows running an arbitrary
More informationJavaScript. History. Adding JavaScript to a page. CS144: Web Applications
JavaScript Started as a simple script in a Web page that is interpreted and run by the browser Supported by most modern browsers Allows dynamic update of a web page More generally, allows running an arbitrary
More informationJavaScript. What s wrong with JavaScript?
JavaScript 1 What s wrong with JavaScript? A very powerful language, yet Often hated Browser inconsistencies Misunderstood Developers find it painful Lagging tool support Bad name for a language! Java
More informationCGS 3066: Spring 2015 JavaScript Reference
CGS 3066: Spring 2015 JavaScript Reference Can also be used as a study guide. Only covers topics discussed in class. 1 Introduction JavaScript is a scripting language produced by Netscape for use within
More informationSuch JavaScript Very Wow
Such JavaScript Very Wow Lecture 9 CGS 3066 Fall 2016 October 20, 2016 JavaScript Numbers JavaScript numbers can be written with, or without decimals. Extra large or extra small numbers can be written
More informationCISC 1600 Lecture 2.4 Introduction to JavaScript
CISC 1600 Lecture 2.4 Introduction to JavaScript Topics: Javascript overview The DOM Variables and objects Selection and Repetition Functions A simple animation What is JavaScript? JavaScript is not Java
More information710 Index Attributes, 127 action attribute, 263 assigning, bottom attribute, domain name attribute, 481 expiration date attribute, 480 8
INDEX Symbols = (assignment operator), 56 \ (backslash), 33 \b (backspace), 33 \" (double quotation mark), 32 \e (escape), 33 \f (form feed), 33
More informationCSC Web Programming. Introduction to JavaScript
CSC 242 - Web Programming Introduction to JavaScript JavaScript JavaScript is a client-side scripting language the code is executed by the web browser JavaScript is an embedded language it relies on its
More informationAPPENDIX D: THE COMPLETE CODELIBRARY.JS FILE
APPENDIX D: THE COMPLETE CODELIBRARY.JS FILE This appendix presents the entire codelibrary.js file organized by the chapter in which each of the functions first appeared. At the end appear a number of
More informationWeb Site Development with HTML/JavaScrip
Hands-On Web Site Development with HTML/JavaScrip Course Description This Hands-On Web programming course provides a thorough introduction to implementing a full-featured Web site on the Internet or corporate
More informationAs we design and build out our HTML pages, there are some basics that we may follow for each page, site, and application.
Extra notes - Client-side Design and Development Dr Nick Hayward HTML - Basics A brief introduction to some of the basics of HTML. Contents Intro element add some metadata define a base address
More informationClient-Side Web Technologies. JavaScript Part I
Client-Side Web Technologies JavaScript Part I JavaScript First appeared in 1996 in Netscape Navigator Main purpose was to handle input validation that was currently being done server-side Now a powerful
More informationCOMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2017)
COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2017) RAMANA ISUKAPALLI RAMANA@CS.COLUMBIA.EDU 1 LECTURE-1 Course overview See http://www.cs.columbia.edu/~ramana Overview of HTML Formatting, headings,
More information3 The Building Blocks: Data Types, Literals, and Variables
chapter 3 The Building Blocks: Data Types, Literals, and Variables 3.1 Data Types A program can do many things, including calculations, sorting names, preparing phone lists, displaying images, validating
More informationCSI 3140 WWW Structures, Techniques and Standards. Browsers and the DOM
CSI 3140 WWW Structures, Techniques and Standards Browsers and the DOM Overview The Document Object Model (DOM) is an API that allows programs to interact with HTML (or XML) documents In typical browsers,
More informationControlled Assessment Task. Question 1 - Describe how this HTML code produces the form displayed in the browser.
Controlled Assessment Task Question 1 - Describe how this HTML code produces the form displayed in the browser. The form s code is displayed in the tags; this creates the object which is the visible
More informationClient Side JavaScript and AJAX
Client Side JavaScript and AJAX Client side javascript is JavaScript that runs in the browsers of people using your site. So far all the JavaScript code we've written runs on our node.js server. This is
More informationJavaScript: Introduction, Types
JavaScript: Introduction, Types Computer Science and Engineering College of Engineering The Ohio State University Lecture 19 History Developed by Netscape "LiveScript", then renamed "JavaScript" Nothing
More informationClient vs Server Scripting
Client vs Server Scripting PHP is a server side scripting method. Why might server side scripting not be a good idea? What is a solution? We could try having the user download scripts that run on their
More informationBasics of JavaScript. Last Week. Needs for Programming Capability. Browser as Development Platform. Using Client-side JavaScript. Origin of JavaScript
Basics of JavaScript History of the Web XHTML CSS Last Week Nan Niu (nn@cs.toronto.edu) CSC309 -- Fall 2008 2 Needs for Programming Capability XHTML and CSS allows the browser to passively display static
More informationCERTIFICATE IN WEB PROGRAMMING
COURSE DURATION: 6 MONTHS CONTENTS : CERTIFICATE IN WEB PROGRAMMING 1. PROGRAMMING IN C and C++ Language 2. HTML/CSS and JavaScript 3. PHP and MySQL 4. Project on Development of Web Application 1. PROGRAMMING
More informationJavascript. UNIVERSITY OF MASSACHUSETTS AMHERST CMPSCI 120 Fall 2010
Lecture 14 Javascript Announcements Project #2 New website Exam#2 No. Class Date Subject and Handout(s) 17 11/4/10 Examination Review Practice Exam PDF 18 11/9/10 Search, Safety, Security Slides PDF UMass
More informationwrite vs. writeln Prompting as Page Loads Today s Goals CSCI 2910 Client/Server-Side Programming Intermediate File vs. HTML Output
CSCI 2910 Client/Server-Side Programming Topic: JavaScript Part 2 Today s Goals Today s lecture will cover: More objects, properties, and methods of the DOM The Math object Introduction to form validation
More informationa Why JavaScript? jonkv interactivity on the web CGI JavaScript Java Applets Netscape LiveScript JavaScript 1: Example
Why JavaScript? 2 JavaScript JavaScript the language Web page manipulation with JavaScript and the DOM 1994 1995: Wanted interactivity on the web Server side interactivity: CGI Common Gateway Interface
More informationJavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK
Programming for Digital Media EE1707 JavaScript By: A. Mousavi & P. Broomhead SERG, School of Engineering Design, Brunel University, UK 1 References and Sources 1. Javascript & JQuery: interactive front-end
More informationJavaScript and XHTML. Prof. D. Krupesha, PESIT, Bangalore
JavaScript and XHTML Prof. D. Krupesha, PESIT, Bangalore Why is JavaScript Important? It is simple and lots of scripts available in public domain and easy to use. It is used for client-side scripting.
More informationCOMS 469: Interactive Media II
COMS 469: Interactive Media II Agenda Review Ch. 5: JavaScript An Object-Based Language Ch. 6: Programming the Browser Review Data Types & Variables Data Types Numeric String Boolean Variables Declaring
More informationWeb Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh
Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style
More informationUNIT -II. Language-History and Versions Introduction JavaScript in Perspective-
UNIT -II Style Sheets: CSS-Introduction to Cascading Style Sheets-Features- Core Syntax-Style Sheets and HTML Style Rle Cascading and Inheritance-Text Properties-Box Model Normal Flow Box Layout- Beyond
More informationMobile Site Development
Mobile Site Development HTML Basics What is HTML? Editors Elements Block Elements Attributes Make a new line using HTML Headers & Paragraphs Creating hyperlinks Using images Text Formatting Inline styling
More informationCSC Web Programming. JavaScript Browser Objects
CSC 242 - Web Programming JavaScript Browser Objects JavaScript Object Types User defined objects Native objects (Array, Math, Date, etc.) Host Objects provided by the browser The window object is a representation
More informationClient Side Scripting. The Bookshop
Client Side Scripting The Bookshop Introduction This assignment is a part of three assignments related to the bookshop website. Currently design part (using HTML and CSS) and server side script (using
More information(Refer Slide Time: 01:40)
Internet Technology Prof. Indranil Sengupta Department of Computer Science and Engineering Indian Institute of Technology, Kharagpur Lecture No #25 Javascript Part I Today will be talking about a language
More informationJavaScript s role on the Web
Chris Panayiotou JavaScript s role on the Web JavaScript Programming Language Developed by Netscape for use in Navigator Web Browsers Purpose make web pages (documents) more dynamic and interactive Change
More informationThis course is designed for web developers that want to learn HTML5, CSS3, JavaScript and jquery.
HTML5/CSS3/JavaScript Programming Course Summary Description This class is designed for students that have experience with basic HTML concepts that wish to learn about HTML Version 5, Cascading Style Sheets
More informationElementary Computing CSC 100. M. Cheng, Computer Science
Elementary Computing CSC 100 1 Basic Programming Concepts A computer is a kind of universal machine. By using different software, a computer can do different things. A program is a sequence of instructions
More informationLECTURE-2. Functions review HTML Forms. Arrays Exceptions Events. CS3101: Scripting Languages: Javascript Ramana Isukapalli
LECTURE-2 Functions review HTML Forms Arrays Exceptions Events 1 JAVASCRIPT FUNCTIONS, REVIEW Syntax function (params) { // code Note: Parameters do NOT have variable type. 1. Recall: Function
More informationSession 16. JavaScript Part 1. Reading
Session 16 JavaScript Part 1 1 Reading Reading Wikipedia en.wikipedia.org/wiki/javascript / p W3C www.w3.org/tr/rec-html40/interact/scripts.html Web Developers Notes www.webdevelopersnotes.com/tutorials/javascript/
More informationBy the end of this section of the practical, the students should be able to:
By the end of this section of the practical, the students should be able to: Write JavaScript to generate HTML Create simple scripts which include input and output statements, arithmetic, relational and
More informationEXERCISE: Introduction to client side JavaScript
EXERCISE: Introduction to client side JavaScript Barend Köbben Version 1.3 March 23, 2015 Contents 1 Dynamic HTML and scripting 3 2 The scripting language JavaScript 3 3 Using Javascript in a web page
More informationComp 426 Midterm Fall 2013
Comp 426 Midterm Fall 2013 I have not given nor received any unauthorized assistance in the course of completing this examination. Name: PID: This is a closed book exam. This page left intentionally blank.
More informationPrincess Nourah bint Abdulrahman University. Computer Sciences Department
Princess Nourah bint Abdulrahman University 1 And use http://www.w3schools.com/ JavaScript Objectives Introduction to JavaScript Objects Data Variables Operators Types Functions Events 4 Why Study JavaScript?
More informationWhy Discuss JavaScript? CS312: Programming Languages. Lecture 21: JavaScript. JavaScript Target. What s a Scripting Language?
Why Discuss JavaScript? CS312: Programming Languages Lecture 21: JavaScript Thomas Dillig JavaScript is very widely used and growing Any AJAX application heavily relies on JavaScript JavaScript also has
More informationCOMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2018)
COMS W3101: SCRIPTING LANGUAGES: JAVASCRIPT (FALL 2018) RAMANA ISUKAPALLI RAMANA@CS.COLUMBIA.EDU 1 LECTURE-1 Course overview See http://www.cs.columbia.edu/~ramana Overview of HTML Formatting, headings,
More informationCS312: Programming Languages. Lecture 21: JavaScript
CS312: Programming Languages Lecture 21: JavaScript Thomas Dillig Thomas Dillig, CS312: Programming Languages Lecture 21: JavaScript 1/25 Why Discuss JavaScript? JavaScript is very widely used and growing
More informationWeb Application Development
Web Application Development Produced by David Drohan (ddrohan@wit.ie) Department of Computing & Mathematics Waterford Institute of Technology http://www.wit.ie JavaScript JAVASCRIPT FUNDAMENTALS Agenda
More informationProgramming Lab 1 (JS Hwk 3) Due Thursday, April 28
Programming Lab 1 (JS Hwk 3) Due Thursday, April 28 Lab You may work with partners for these problems. Make sure you put BOTH names on the problems. Create a folder named JSLab3, and place all of the web
More informationPlace User-Defined Functions in the HEAD Section
JavaScript Functions Notes (Modified from: w3schools.com) A function is a block of code that will be executed when "someone" calls it. In JavaScript, we can define our own functions, called user-defined
More informationChapter4: HTML Table and Script page, HTML5 new forms. Asst. Prof. Dr. Supakit Nootyaskool Information Technology, KMITL
Chapter4: HTML Table and Script page, HTML5 new forms Asst. Prof. Dr. Supakit Nootyaskool Information Technology, KMITL Objective To know HTML5 creating a new style form. To understand HTML table benefits
More informationTask 1. Set up Coursework/Examination Weights
Lab02 Page 1 of 6 Lab 02 Student Mark Calculation HTML table button textbox JavaScript comments function parameter and argument variable naming Number().toFixed() Introduction In this lab you will create
More informationInteractor Tree. Edith Law & Mike Terry
Interactor Tree Edith Law & Mike Terry Today s YouTube Break https://www.youtube.com/watch?v=mqqo-iog4qw Routing Events to Widgets Say I click on the CS349 button, which produces a mouse event that is
More informationThe course is supplemented by numerous hands-on labs that help attendees reinforce their theoretical knowledge of the learned material.
Lincoln Land Community College Capital City Training Center 130 West Mason Springfield, IL 62702 217-782-7436 www.llcc.edu/cctc WA2442 Introduction to JavaScript Objectives This intensive training course
More informationCS Final Exam Review Suggestions - Spring 2018
CS 328 - Final Exam Review Suggestions p. 1 CS 328 - Final Exam Review Suggestions - Spring 2018 last modified: 2018-05-03 Based on suggestions from Prof. Deb Pires from UCLA: Because of the research-supported
More informationE ECMAScript, 21 elements collection, HTML, 30 31, 31. Index 161
A element, 108 accessing objects within HTML, using JavaScript, 27 28, 28 activatediv()/deactivatediv(), 114 115, 115 ActiveXObject, AJAX and, 132, 140 adding information to page dynamically, 30, 30,
More informationProgramming language components
Programming language components syntax: grammar rules for defining legal statements what's grammatically legal? how are things built up from smaller things? semantics: what things mean what do they compute?
More informationWeb Programming and Design. MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh
Web Programming and Design MPT Junior Cycle Tutor: Tamara Demonstrators: Aaron, Marion, Hugh Plan for the next 5 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style
More informationjquery Tutorial for Beginners: Nothing But the Goods
jquery Tutorial for Beginners: Nothing But the Goods Not too long ago I wrote an article for Six Revisions called Getting Started with jquery that covered some important things (concept-wise) that beginning
More informationJS Lab 1: (Due Thurs, April 27)
JS Lab 1: (Due Thurs, April 27) For this lab, you may work with a partner, or you may work alone. If you choose a partner, this will be your partner for the final project. If you choose to do it with a
More informationEVENT-DRIVEN PROGRAMMING
LESSON 13 EVENT-DRIVEN PROGRAMMING This lesson shows how to package JavaScript code into self-defined functions. The code in a function is not executed until the function is called upon by name. This is
More informationisnan function returns true if the argument is not a number otherwise it is false.
1. What is JavaScript? JavaScript is a client-side as well as server side scripting language that can be inserted into HTML pages and is understood by web browsers. JavaScript is also an Object Oriented
More informationJavaScript. Like PHP, JavaScript is a modern programming language that is derived from the syntax at C.
Like PHP, JavaScript is a modern programming language that is derived from the syntax at C. It has been around just about as long as PHP, also having been invented in 1995. JavaScript, HTML, and CSS make
More informationPIC 40A. Review for the Final. Copyright 2011 Jukka Virtanen UCLA 1 06/05/15
PIC 40A Review for the Final 06/05/15 Copyright 2011 Jukka Virtanen UCLA 1 Overview Final is on: Monday, June 08, 2015 11:30 AM - 2:30 PM Geology 4645 Double check on myucla.edu. 06/05/15 Copyright Jukka
More informationCHAPTER 6 JAVASCRIPT PART 1
CHAPTER 6 JAVASCRIPT PART 1 1 OVERVIEW OF JAVASCRIPT JavaScript is an implementation of the ECMAScript language standard and is typically used to enable programmatic access to computational objects within
More informationCOMP519 Web Programming Lecture 16: JavaScript (Part 7) Handouts
COMP519 Web Programming Lecture 16: JavaScript (Part 7) Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University of Liverpool
More information5/19/2015. Objectives. JavaScript, Sixth Edition. Introduction to the World Wide Web (cont d.) Introduction to the World Wide Web
Objectives JavaScript, Sixth Edition Chapter 1 Introduction to JavaScript When you complete this chapter, you will be able to: Explain the history of the World Wide Web Describe the difference between
More informationINLEDANDE WEBBPROGRAMMERING MED JAVASCRIPT INTRODUCTION TO WEB PROGRAMING USING JAVASCRIPT
INLEDANDE WEBBPROGRAMMERING MED JAVASCRIPT INTRODUCTION TO WEB PROGRAMING USING JAVASCRIPT ME152A L4: 1. HIGHER ORDER FUNCTIONS 2. REGULAR EXPRESSIONS 3. JAVASCRIPT - HTML 4. DOM AND EVENTS OUTLINE What
More informationJavaScript Functions, Objects and Array
JavaScript Functions, Objects and Array Defining a Function A definition starts with the word function. A name follows that must start with a letter or underscore, followed by any number of letters, digits,
More informationThen there are methods ; each method describes an action that can be done to (or with) the object.
When the browser loads a page, it stores it in an electronic form that programmers can then access through something known as an interface. The interface is a little like a predefined set of questions
More informationPIC 40A. Midterm 1 Review
PIC 40A Midterm 1 Review XHTML and HTML5 Know the structure of an XHTML/HTML5 document (head, body) and what goes in each section. Understand meta tags and be able to give an example of a meta tags. Know
More informationDocuments and computation. Introduction to JavaScript. JavaScript vs. Java Applet. Myths. JavaScript. Standard
Introduction to Prof. Ing. Andrea Omicini II Facoltà di Ingegneria, Cesena Alma Mater Studiorum, Università di Bologna andrea.omicini@unibo.it Documents and computation HTML Language for the description
More informationJavaScript is described in detail in many books on the subject, and there is excellent tutorial material at
JavaScript (last updated April 15, 2013: LSS) JavaScript is a scripting language, specifically for use on web pages. It runs within the browser (that is to say, it is a client- side scripting language),
More informationQ1. What is JavaScript?
Q1. What is JavaScript? JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language JavaScript is usually embedded
More informationCISH-6510 Web Application Design and Development. Overview of JavaScript. Overview
CISH-6510 Web Application Design and Development Overview of JavaScript Overview What is JavaScript? History Uses of JavaScript Location of Code Simple Alert Example Events Events Example Color Example
More informationNew Media Production Lecture 7 Javascript
New Media Production Lecture 7 Javascript Javascript Javascript and Java have almost nothing in common. Netscape developed a scripting language called LiveScript. When Sun developed Java, and wanted Netscape
More informationLecture 8: JavaScript
Lecture 8: JavaScript JavaScript introduction Examples Languages syntax and semantics Delegation vs. inheritance CS 242, Fall 2011, Lecture 8 1 What is JavaScript? JavaScript is a scripting language heavily
More informationMidterm Exam. 5. What is the character - (minus) used for in JavaScript? Give as many answers as you can.
First Name Last Name CSCi 90.3 March 23, 2010 Midterm Exam Instructions: For multiple choice questions, circle the letter of the one best choice unless the question explicitly states that it might have
More informationWeb Programming/Scripting: JavaScript
CS 312 Internet Concepts Web Programming/Scripting: JavaScript Dr. Michele Weigle Department of Computer Science Old Dominion University mweigle@cs.odu.edu http://www.cs.odu.edu/~mweigle/cs312-f11/ 1 Outline!
More informationReact. HTML code is made up of tags. In the example below, <head> is an opening tag and </head> is the matching closing tag.
Document Object Model (DOM) HTML code is made up of tags. In the example below, is an opening tag and is the matching closing tag. hello The tags have a tree-like
More informationWeb Development & Design Foundations with HTML5
1 Web Development & Design Foundations with HTML5 CHAPTER 14 A BRIEF LOOK AT JAVASCRIPT Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to: Describe common uses of
More informationAlpha College of Engineering and Technology. Question Bank
Alpha College of Engineering and Technology Department of Information Technology and Computer Engineering Chapter 1 WEB Technology (2160708) Question Bank 1. Give the full name of the following acronyms.
More informationSEEM4570 System Design and Implementation Lecture 03 JavaScript
SEEM4570 System Design and Implementation Lecture 03 JavaScript JavaScript (JS)! Developed by Netscape! A cross platform script language! Mainly used in web environment! Run programs on browsers (HTML
More informationNode.js Training JavaScript. Richard richardrodger.com
Node.js Training JavaScript Richard Rodger @rjrodger richardrodger.com richard.rodger@nearform.com A New Look at JavaScript Embracing JavaScript JavaScript Data Structures JavaScript Functions Functional
More informationCreating HTML files using Notepad
Reference Materials 3.1 Creating HTML files using Notepad Inside notepad, select the file menu, and then Save As. This will allow you to set the file name, as well as the type of file. Next, select the
More informationCreating Web Pages with HTML-Level III Tutorials HTML 6.01
Creating Web Pages with HTML-Levell Tutorials HTML 1.01 Tutorial 1 Developing a Basic Web Page Create a Web Page for Stephen DuM's Chemistry Classes Tutorial 2 Adding Hypertext Links to a Web Page Developing
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2) What is JavaScript?
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 14 A Brief Look at JavaScript and jquery Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of
More informationProduced by. App Development & Modeling. BSc in Applied Computing. Eamonn de Leastar
App Development & Modeling BSc in Applied Computing Produced by Eamonn de Leastar (edeleastar@wit.ie) Department of Computing, Maths & Physics Waterford Institute of Technology http://www.wit.ie http://elearning.wit.ie
More information5. Strict mode use strict ; 6. Statement without semicolon, with semicolon 7. Keywords 8. Variables var keyword and global scope variable 9.
Javascript 1) Javascript Implementation 1. The Core(ECMAScript) 2. DOM 3. BOM 2) ECMAScript describes 1. Syntax 2. Types 3. Statements 4. Keywords 5. Reserved words 6. Operators 7. Objects 3) DOM 1. Tree
More informationFrontend guide. Everything you need to know about HTML, CSS, JavaScript and DOM. Dejan V Čančarević
Frontend guide Everything you need to know about HTML, CSS, JavaScript and DOM Dejan V Čančarević Today frontend is treated as a separate part of Web development and therefore frontend developer jobs are
More informationINTRODUCTION TO WEB DEVELOPMENT AND HTML. Lecture 13: Intro to JavaScript - Spring 2011
INTRODUCTION TO WEB DEVELOPMENT AND HTML Lecture 13: Intro to JavaScript - Spring 2011 Outline Intro to JavaScript What is JavaScript? JavaScript!= Java Intro to JavaScript JavaScript is a lightweight
More informationJavaScript!= Java. Intro to JavaScript. What is JavaScript? Intro to JavaScript 4/17/2013 INTRODUCTION TO WEB DEVELOPMENT AND HTML
INTRODUCTION TO WEB DEVELOPMENT AND HTML Intro to JavaScript Lecture 13: Intro to JavaScript - Spring 2013 What is JavaScript? JavaScript!= Java Intro to JavaScript JavaScript is a lightweight programming
More informationSession 6. JavaScript Part 1. Reading
Session 6 JavaScript Part 1 Reading Reading Wikipedia en.wikipedia.org/wiki/javascript Web Developers Notes www.webdevelopersnotes.com/tutorials/javascript/ JavaScript Debugging www.w3schools.com/js/js_debugging.asp
More informationCSC Javascript
CSC 4800 Javascript See book! Javascript Syntax How to embed javascript between from an external file In an event handler URL - bookmarklet
More informationFALL 2017 CS 498RK JAVASCRIPT. Fashionable and Functional!
CS 498RK FALL 2017 JAVASCRIPT Fashionable and Functional! JAVASCRIPT popular scripting language on the Web, supported by browsers separate scripting from structure (HTML) and presentation (CSS) client-
More informationUniversity Convocation IT 3203 Introduction to Web Development Creating Objects Accessing Property Values
IT 3203 Introduction to Web Development JavaScript II Labeling Systems October 7 Notice: This session is being recorded. Copyright 2007 by Bob Brown University Convocation Tuesday, October 13, 11:00 12:15
More informationJavaScript. Training Offer for JavaScript Introduction JavaScript. JavaScript Objects
JavaScript CAC Noida is an ISO 9001:2015 certified training center with professional experience that dates back to 2005. The vision is to provide professional education merging corporate culture globally
More informationAt the Forge JavaScript Reuven M. Lerner Abstract Like the language or hate it, JavaScript and Ajax finally give life to the Web. About 18 months ago, Web developers started talking about Ajax. No, we
More information