Parts of Chapter 14 Key Concepts A JavaScript Snack! Parts of Chapter 14 Key Concepts Copyright © Terry Felke-Morris

What to Expect: We won’t get through page 599… maybe 590. If you’re new to JavaScript, probably won’t cover enough to add meaningfully to final website. Goal is to familiarize you so that: * Whet appetite – Take CSCI-215! * Learn more on your own. * Demystify so that you can edit code snippets.  

What is JavaScript? A client-side scripting language that adds interactivity and functionality to webpages.

A dozen things you can do with JavaScript Pop-up windows & error message alerts Drop down menus Slide shows Form validation Customize page appearance, e.g. background image Write content into webpage, e.g. text from user Mouse movement techniques, e.g. image swapping Animation Date functions, e.g. current, count downs, calculate dates Calculations, e.g. purchasing via forms Cookies Games The 13th is etc.

More about JavaScript JavaScript is embedded into HTML. JavaScript is a client-side programming language because processing is performed by the browser. Conversely, server-side is when processing occurs on the server.

Where is JavaScript written? Body: executes when the browser reads that line. Head: to call it at a specific time, or have it triggered by an event. External file: placed in a separate file; and like the head area, must be called or invoked

Getting Your Hands Dirty Copy chapter02/template.html into chapter14. Embed this into the body of the web page: <script> alert("Thank God it’s Friday") </script>

You have just use a JavaScript method: Methods are the actions that can be performed on objects. Some methods are: alert, confirm, prompt, write, close, open, etc.   Write some text before & after. Then notice the order of display. - In Chrome, the alert shows up before anything. - In Firefox, everything shows up in the order in which they are written.

Comparisons of a few front end web development tools. HTML = structure of content CSS = style, appearance JavaScript = interactivity, functionality JQuery = a library that provides an easier way to code JavaScript

Debugging Run the file again, but this time, spell aalert() incorrectly. Go to menu icon>Developer>Web Console. It functions very much like the validators in that they check for syntax errors. Sometimes the error is above the line that’s flagged.

Document Object Model (DOM)

DOM is a collection of objects, properties and methods and is displayed in a hierarchical format. JavaScript can manipulate elements of the HTML document. To access them, use the hierarchy of DOM. Actions (AKA methods) can be performed on some objects. For instance, the window object can have an action of alert(), prompt(), write(), etc. Also, objects have properties, which are characteristics or values associated with it. Example: Document of a window can have a date lastModified property. Other examples can be found at: https://www.w3schools.com/jsref/dom_obj_document.asp  

  To access methods and properties, use the dot syntax, which simply means separating parts of the hierarchy with periods. Practice with DOM: In this practice, you will use the write() method of the document. You will display the last date that the document was saved, called document.lastModified property, similar to page 580.

Events and Event Handlers Events: actions taken by the web page visitor JavaScript can be configured to perform actions when events occur. clicking (onclick), placing the mouse on an element (onmouseover), removing the mouse from an element (onmouseout), loading the page (onload), unloading the page (onunload), etc.

Variable var userName; A variable is a placeholder for information. userName = "Karen"; document.write(userName);

Example of Variables This example uses the + symbol to concatenate or join HTML words with the script. See page 586, we’ll do it differently with prompt() method. <script> var userName; userName= "Karen"; document.write("<h2>Hello " + userName + "</h2>") ; </script>

Prompts prompt() method Displays a message and accepts a value from the user userName = prompt(“prompt message”); The value typed by the user is stored in the variable myName <script> var userName; userName= prompt("What is your name?"); document.write("<h2>Hello " + userName + "!</h2>") ; </script>

Prompt to change background color Although we won’t have time for this, it’s quick & cool to try on your own, page 587. <script> var userColor; userColor = prompt("Please type a color name or hex"); //The book uses older way: document.bgColor= userColor; //Try the newer way below: document.body.style.backgroundColor = userColor; </script>

A different pic each time page loads <!-- http://www.javascriptworld.com/js6e/chap4-10.html --> <script type="text/javascript" > var myPix = new Array("lion.jpg","tiger.jpg","bear.jpg"); function choosePic() { randomNum = Math.floor((Math.random() * myPix.length)); document.getElementById("myPicture").src = myPix[randomNum]; } </script> <body onload = "choosePic();"> <img src="spacer.gif" id="myPicture" alt="some image" > </body>

Image swap on hover… <body > <!-- https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb --> <img id="myImage" src="tiger.jpg" width="100" onmouseover="document.getElementById('myImage').src='bear.jpg'" onmouseout="document.getElementById('myImage').src='tiger.jpg'"> </body>

Same thing as previous slide! But you might like his YouTube channel <script> function newPicture() { document.getElementById("image").src = "bear.jpg"; } function oldPicture() { document.getElementById("image").src = "lion.jpg"; </script> <body> <h1>Welcome to My World</h1> <!-- https://www.youtube.com/watch?v=0o4HQ_TYP9A --> <img src="bear.jpg" id="image" onmouseover="newPicture()" onmouseout="oldPicture()" > </body>

Put this in your footer: <div id="footer"> <script src="footerInfo.txt"></script> </div> Save this as footerInfo.txt: document.write('<p>Write your text here blah blah blah </p>')