D2L Notes Be sure to submit your link in the dropbox provided on D2L You can just upload an empty text file if a file upload is required Do not use D2L

D2L NotesBe sure to submit your link in the dropbox

provided on D2LYou can just upload an empty text file if a file

upload is requiredDo not use D2L messaging to get in touch

with me, send me an email @ [email protected]

Discussion areas are open for use for anything relevant to the course subjects

JavaScriptMr. Justin “JET” TurnerCSCI 3000 – Fall 2015

CRN 6710 - Section A – TR 9:30-10:45CRN 10570 – Section B – TR 5:30-6:45

JavaScriptJavaScript (JS) is our client side

programming languageThis means that the code is executed by the

user’s browser and not by the server providing the page

It is important to understand this concept, because a user could potentially change settings in their browser to not render JS at all, or use tools to modify what it is supposed to do on a single page load

For this reason, when building larger sites, we often need to consider how the site would render without JS

JavaScriptAgain, for this course, we are assuming

internal customers who have the correct browser settings

When we get into PHP and MySQL later on, we will be working with forms and validating input dataWe can use JS to do some client side validation,

but we should never leave that as the only type of validation

JS excels at performing tasks such as modifying HTML content, attributes, and CSS

JavaScriptJS can go in the <head> or <body> wrapped

in <script> tags, as well as in an external file (.js)

We might put some JS in an external file that takes care of making our menu’s function, and then put some JS in the page to manage how a unique element works on that page (example: directory table sorting)

Some JS also goes in tags as part of attributes, such as:<img onclick=“myFunction()” />

JavaScriptBasic JS syntax

variables data types

arraysfunctions/methods

variable scopeconditionalsloopsDate

Basic object manipulation

JavaScriptModify contents of an HTML tag

document.getElementById(“divID”).innerHTML = “”;

Modify attributes of an HTML tagdocument.getElementById(“myImg”).src = “”;

Modify styles of an HTML tagdocument.getElementById(“divID”).style.fontSi

ze = “”;

JavaScript DOMDOM = Document Object ModelThis is the hierarchy of objects on the page

and how we access the items using JSDocument Node

http://www.w3schools.com/jsref/dom_obj_document.asp

HTML Element NodeHTML Attribute Node

JavaScript DocumentaddEventListener()anchors

<a> tags with namesbaseURI

full page URLbodycreateElement()getElementById()getElementsByClassNa

me()

getElementsByName()getElementsByTagNa

me()write()

getElements* returns an array of elements, even if only one item returned

JavaScript ElementaddEventListener()appendChild()attributeschildElementCountchildNodes

includes text/comments

childrenexcludes

text/commentsclassName

cloneNode()firstChildfirstElementChildlastChildlastElementChildnextSiblingnextSiblingElementparentNodeparentElement

JavaScript ElementgetAttribute()

valuegetAttributeNode()hasAttribute()hasAttributes()getElementsByClassNa

me()getElementsByTagNa

me()hasChildNodes()

click()focus()idinnerHTMLstyletextContent

JavaScript Attributenamevaluespecified

Next TimeWe will look at JS eventsTake a little time and think about examples

you all may want to see me do in class. There is a new discussion section where you can post these ideas, and I will see about adding them into the correct section of the course or post an example on the discussion if we don’t get to it in classSome examples might be a slideshow or a

menu

Documents

D2L Notes Be sure to submit your link in the dropbox provided on D2L You can just upload an empty text file if a file upload is required Do not use D2L