1. Javascript: More features B. Ramamurthy 7/4/2014B. Ramamurthy, CSE651C1

2. Review—Structure – Style – Interaction  HTML provides structure  CSS provides style  Javascript (script) provides control for interaction and operations  Inside js functions you can use any control structures such as if..else, for.., while and also any data structures such as array.. 7/4/2014B. Ramamurthy, CSE651C2

3. Simple JS (with embedded js) My first JavaScript document.write(“Hello, World!”); 7/4/2014B. Ramamurthy, CSE651C3

4. JS functions  A function consists of function followed by the name of the function  The statement that make up the function go next within curly brackets  Example: function saySomething() { alert(“ We are experimenting with JS”); } 7/4/2014B. Ramamurthy, CSE651C4

5. Moving JS to an external file  Similar to how we separated style elements in css file, behavioral elements can be moved to an external js file. 7/4/2014B. Ramamurthy, CSE651C5

6. HTML with External File JS My second JavaScript 7/4/2014B. Ramamurthy, CSE651C6

7. JS file window.onload = writeMessage(); function writeMessage(){ document.getElementById(helloMessage).innerHTML = “Hello, World!”; } // try this simple application 7/4/2014B. Ramamurthy, CSE651C7

8.  We will look at an example that has muitple section UI, image display, table layout, input/output from and to the UI.  We will build the game “hangman”  Even though this is a game, we can always make it into a serious game or an application that serves a particular need for your area.  Once again this is only a template.  Our approach is to look at the completed example and analyze the requirements, plan the UI layout and JS functions before jumping into coding them. Complete Example 7/4/2014B. Ramamurthy, CSE651C8

9.  Top title section, bottom credit section, in between three vertical sections: one for the dynamically changing images of the hangman, middle section for the word and related buttons, right section for the UI keyboard of alphabets.  Lets design this using tag, tag 7/4/2014B. Ramamurthy, CSE651C9 User Interface (UI) Design

10.  This will be in javascript  What are data structures/data needed? Define them in var section.  What are functions we need?  Initialize function that clears the board/word, picks a random word  Another function for registering the current letter chosen  Another for drawing the hangman or delivering the right image to the UI  Somewhere here we need to keep track of the count of correct letters and decide win or lose and termination 7/4/2014B. Ramamurthy, CSE651C10 Design the functionality

11.  We will incremental development checking each function as we proceed.  To start with make sure UI and the js files connect using the alert(…)  Then prototype each function’s logic and test it before integrating everything.  Finally do an integration testing. 7/4/2014B. Ramamurthy, CSE651C11 Connecting the UI and JS functions

12.  You can extend this application in many ways.  Levels of playing with words of different lengths.  A data base of different words can be added.  Many levels of playing, continuous playing etc.  There another exciting emerging area called “gamification/serious game” I am not going to discuss here… is a hot topic in the USA.  Most of all you can use the design features and js features to apply these to one of your own work problems. 7/4/2014B. Ramamurthy, CSE651C12 Applying the knowledge

13.  We studied an important emerging platform in Javascript.  It is just not used for design of web pages but for numerous applications such as mobile devices, communication formats(JSON), middleware (node.js), databases (mongodb)  HTML5 offers a very path into designing mobils applications.  There are many JS APIs and libraries that support rapid prototyping (Google MapAPI)  Probably many of your automobile apps are made of these. 7/4/2014B. Ramamurthy, CSE651C13 Summary

14.  I would like you project report prepared using the html5 features (HTML + CSS + JS) we discussed.  Any of your work projects can be done that way too! With live code and analyzers and all. 7/4/2014B. Ramamurthy, CSE651C14 Project Report