JavaScript Examples 27-Apr-19.

Slides:



Advertisements
Similar presentations
JavaScript and the DOM Les Carr COMP3001 Les Carr COMP3001.
Advertisements

Line Efficiency     Percentage Month Today’s Date
Georgia Institute of Technology JavaScript part 2 Barb Ericson Georgia Institute of Technology May 2006.
20-Jun-15 JavaScript and HTML Simple Event Handling.
UNIT 6 JAVASCRIPT EVENT HANDLERS &WEB BROWSERS DETECTION.
JS: DOM Form Form Object Form Object –The Form object represents an HTML form. –For each instance of a tag in an HTML document, a Form object is created.
HTML Forms/Events (Instructor Lesson) The Event model HTML Forms Custom Events 1.
CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.
Event Handlers CS101 Introduction to Computing. Learning Goals Learn about event handlers Determine how events are useful in JavaScript Discover where.
Chapter 19: Adding JavaScript
Intro to JavaScript Scripting language –ECMAScript compliant –Client side vs. server side Syntactic rules –White space –Statement end: ; optional –Comments:
Event JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page. When the page loads, that is.
More on Events Some More Events Image Rollover Objects Select-Option List Control 1.
Chapter 19 Creating and Processing HTML Forms. How HTML Forms Transmit Data name1=value1&name2=value2...&nameN =valueN GET or POST GET, an HTTP GET request,
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Project 8: Reacting to Events Essentials for Design JavaScript Level One Michael Brooks.
COS 125 DAY 20. Agenda Assignment 8 not corrected yet Assignment 9 posted  Due April 16 New course time line Discussion on Scripts 
Web Programming Java Script & jQuery Web Programming.
5 th and 4 th ed: some from chapters 9, 12, 13 SY306 Web and Databases for Cyber Operations Slide Set #8: Dynamic HTML.
7. JavaScript Events. 2 Motto: Do you think I can listen all day to such stuff? –Lewis Carroll.
Event Handling (the right way). A Simple Web Page Events - Summary The web page looks like this:
JavaScript Events.
JavaScript Event Handlers. Introduction An event handler executes a segment of a code based on certain events occurring within the application, such as.
HTML DOM The Document Object Model is a Javascript class that defines HTML elements as objects. It supports … properties methods events Image from
LESSON : EVENTS AND FORM VALIDATION -JAVASCRIPT. EVENTS CLICK.
Event Handlers Events are asynchronous. When an event occurs, JavaScript can execute code in response to the user’s action. This response to the user-initiated.
7-Jul-16 JavaScript Examples. Getting the date var d = new Date() document.write(d.getDate() + "/") document.write((d.getMonth() + 1) + "/") document.write(d.getFullYear())
SE-2840 Dr. Mark L. Hornick 1 Dynamic HTML Handling events from DOM objects.
JavaScript and HTML Simple Event Handling 11-May-18.
SPOUSE LEADERSHIP DEVELOPMENT COURSE (SLDC) CLASS 68
Jan 2016 Solar Lunar Data.
JavaScript (JS) Basics
Server-Side Application and Data Management IT IS 3105 (Spring 2010)
JAVASCRIPTS AND HTML DOCUMENTS
Q1 Jan Feb Mar ENTER TEXT HERE Notes
JavaScript and HTML Simple Event Handling 19-Sep-18.
JavaScript Events.
Average Monthly Temperature and Rainfall
CHAPTER 7 JavaScripts & HTML Documents
2017 Jan Sun Mon Tue Wed Thu Fri Sat

Gantt Chart Enter Year Here Activities Jan Feb Mar Apr May Jun Jul Aug
Functions, Regular expressions and Events
Q1 Q2 Q3 Q4 PRODUCT ROADMAP TITLE Roadmap Tagline MILESTONE MILESTONE
Step 3 Step 2 Step 1 Put your text here Put your text here
Jan Sun Mon Tue Wed Thu Fri Sat
Electricity Cost and Use – FY 2016 and FY 2017
Events: Changed and Input
Code Topic 9 Standard JavaScript Events Laura Friedman

Text for section 1 1 Text for section 2 2 Text for section 3 3
Text for section 1 1 Text for section 2 2 Text for section 3 3
JavaScript Examples 30-Apr-19.
Text for section 1 1 Text for section 2 2 Text for section 3 3
Text for section 1 1 Text for section 2 2 Text for section 3 3
Q1 Q2 Q3 Q4 PRODUCT ROADMAP TITLE Roadmap Tagline MILESTONE MILESTONE
JavaScript and Ajax (JavaScript Events)
Text for section 1 1 Text for section 2 2 Text for section 3 3
Text for section 1 1 Text for section 2 2 Text for section 3 3
Text for section 1 1 Text for section 2 2 Text for section 3 3
Text for section 1 1 Text for section 2 2 Text for section 3 3
Text for section 1 1 Text for section 2 2 Text for section 3 3
Text for section 1 1 Text for section 2 2 Text for section 3 3
JAVA SCRIPT OBJECTS & DOM
Barb Ericson Georgia Institute of Technology May 2006
JavaScript Examples 12-Jul-19.
TIMELINE NAME OF PROJECT Today 2016 Jan Feb Mar Apr May Jun
JavaScript and HTML Simple Event Handling 26-Aug-19.
Q1 Q2 Q3 Q4 PRODUCT ROADMAP TITLE Roadmap Tagline MILESTONE MILESTONE
JavaScript and HTML Simple Event Handling 4-Oct-19.
Presentation transcript:

JavaScript Examples 27-Apr-19

Getting the date <script type="text/javascript"> var d = new Date() document.write(d.getDate() + "/") document.write((d.getMonth() + 1) + "/") document.write(d.getFullYear()) </script> 27/09/2004

Getting and formatting the date <script type="text/javascript"> var d=new Date() var weekday=new Array("Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday") var monthname=new Array("Jan", "Feb", "Mar","Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec") document.write(weekday[d.getDay()] + ", ") document.write(monthname[d.getMonth()] + " " + d.getDate() + ", ") document.write(d.getFullYear()) </script> Monday, Sep 27, 2004

Getting a random number The following code gets a random floating-point number between 0 and 1: <script type="text/javascript"> document.write(Math.random()) </script> 0.728762788388911

Getting a random integer The following code gets a random integer between 1 and 10: <script type="text/javascript"> var max = 10; number=Math.random()*max + 1; document.write(Math.floor(number)); </script> 5

Displaying an alert box The following code displays an alert box when a button is clicked: <form> // Buttons can only occur within forms <input type="button" name="Submit" value="Alert!“ onclick="alert('Oh oh, something happened!');"> </form>

Telling what happened In my Concise JavaScript, part 2, I have code that shows what events occur when the user takes various actions In the <head> of the HTML page I define: <script> <!-- function tell(a, b) { document.forms[0].result.value+="\n"+a+": " + b; } //--> </script> For each form element, I have a handler for every (plausible) event

Telling what happened (Button) <input type="button" name="plainButton" value="Plain Button" onMouseDown="tell(this.name, 'onmousedown');" onMouseUp="tell(this.name, 'onmouseup');" onClick="tell(this.name,'onclick');" onDblClick="tell(this.name,'ondblclick');" onFocus="tell(this.name, 'onfocus');" onBlur="tell(this.name, 'onblur');" onMouseOver="tell(this.name, 'onmouseover');" onMouseOut="tell(this.name, 'onmouseout');" onChange="tell(this.name, 'onchange');" onKeyPress="tell(this.name, 'onkeypress');" onKeyDown="tell(this.name, 'onkeydown');" onKeyUp="tell(this.name, 'onkeyup');" onSelect="tell(this.name, 'onselect');" onReset="tell(this.name, 'onreset');" >

The End