JavaScript II CSCI 311 SPRING 2017

Size: px

Start display at page:

Download "JavaScript II CSCI 311 SPRING 2017"

Candace Gordon
5 years ago
Views:

1 JavaScript II CSCI 311 SPRING 2017

2 Overview Look at more JavaScript functionality DOM slide show preloading images pull down menus and more!

3 Document Object Model DOM gives us ways to access elements of HTML from JavaScript (and other scripts) windows, documents, elements, attributes, text, events, style sheets and rules DOM tree elements in HTML are tree nodes organized into hierarchy from a node you can traverse down or up can add, modify, remove any elements from tree can get and set content attributes access, change, delete, add style elements

4 DOM tree Root is the Document node accessible via document or window.document for example: document.getelementbyid( idname ); HTML/XML markup elements: gives access to elements of the HTML and their attributes and children innerhtml: for non-void elements, setting innerhtml changes the code in that element Accessing an element s attributes: element.attributes.xyz element.getattribute( xyz ); element.setattribute( xyz, value);

5 Example var p=document.getelementbyid( para ); var tx=p.firstchild; alert(tx.data); alert(tx.wholetext); <body style="margin: 50px" onload="showme()"> <section> <h1>text Nodes</h1> <p id="para">here is an <strong>example</strong> of <span style="color: blue">marked up text</span> in a paragraph.</p> </section> </body> </html>

6 More examples <section><h1>dom Calculator</h1> <p>simply type in a string such as <code> * 6</code> and click GO.</p> <p><strong>compute : </strong> <input required="" id="uin" placeholder="(20-12) * 6" maxlength="30" /> <input id="go" value="go" type="button onclick="comp('uin')" /> </p> <p id="par">and the answer is: <span id="ans" class="ans">48</span></p> </section>

7 HTMLElement Fields and Methods tagname readonly representation of tag name style style object for an element set to empty string to set to inherited or default set to a value to an individual style property to change it classname innerhtml getattribute/setattribute/removeattribute/hasattribute focus() to gain focus for input element blur() lose focus

8 document methods write or writeln createelement createtextnode getelementbyid getelementsbytagname getelementsbyname getelementsbyclassname (can pass comma-separated list of classes)

9 Generating New Content Build a data-recording calculator A smart Form A sorting shopping cart

10 Building elements dynamically A couple more demos to build a list of selections with JavaScript

11 Preloading Images Quick response to mouseover may require the image to preloaded To avoid delays, images may be able to be preloaded: function loadimage(url) { if (document.images) // if browser supports images } { img = new Image(); // obtains a new image object img.src = url; // downloads the image return img; } Script with above placed in head triggered by the onload event in the body element

12 Slideshow We can easily make a slideshow using the click event Example: Slides.html, slide.css, slide.js Example: slideshow.html

14 Example: Conversion Calculator Two inputs of type number onfocus event triggers the method call: reset() a button onclick event triggers convert() method call convert.js

15 Pull-down menus with JavaScript Pull-down menu example will use: horizontal navbar html fragment file with one or more menus. Each is a nav element with child links style sheet for navbar and menus JavaScript file with pull-down and pull-up actions Table-styled page layout

16 Pull-down Menu Horizontal navbar lines links: Main, Service, and Contact are conventional anchor elements <a> Activity and Location are spans with onclick events, and onmouseover events that call functions in menuup.js The JavaScript part: menus only work as mouseovers if activated to be activated, they must be clicked to deactivate, click an activated menu item only one pull-down shows at a time in down method, any current menu is pulled up first

17 Pull-down menu Offsets: y offset is set relative to context box below set in init method x position is from the menu item itself xposition method goes up the offset parent chain sums the offsets in this case it is the x value of the menu + the offset of the parent (body with offset of 0) in our case dx and dy are both 0

18 CSS Transitions We can use CSS to change a style smoothly from one to another over a given amount of time general form: transition: property duration fn, comma separated list of properties or use all timing function can be linear, or cubic-bezier predefined timing functions: linear ease ease-in ease-out ease-in-out

19 Adding transitions to pull-down menu Let s add fade-in and fade-out to pull-down menu MenuFade.html change the css for the menu (found in transition.css) Change the JavaScript too: down method add settimeout(showdisplay, 50) schedules a call to the showdisplay function in 50 milliseconds in this method, we transition the opacity to 1 pull up does the same, but the reverse the amount of time for deltay to calling nodisplay is slightly longer than the fade out time

20 Another Menu Unlike previous example, pulldown menus are not on mouse over (but you could do that) have 2 nav elements at bottom of html that are hidden by default (in css) nav.menu display:none on click event in 2 of the menu items calls JavaScript function

21 Summary Seen more advanced JavaScript that can be used to implement user interaction dynamic pages dropdown menus slide shows

JavaScript: Events, DOM and Attaching Handlers

JavaScript: Events, DOM and Attaching Handlers CISC 282 October 11, 2017 Keyboard and Text Events Name The User Must Applicable Elements blur remove focus , ,... focus apply focus , ,...