Leveraging Advanced Features of JavaScript for Web Development
Explore the versatile capabilities of JavaScript in enhancing web development, from controlling interactions with users to organizing data structures. Learn about functions, moving scripts to external files, and integrating JavaScript with HTML. Dive into creating dynamic web applications with JavaScript's full potential.
Uploaded on Dec 13, 2024 | 0 Views
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Javascript: More features B. Ramamurthy B. Ramamurthy, CSE651C 1 7/4/2014
ReviewStructure 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.. B. Ramamurthy, CSE651C 2 7/4/2014
Simple JS (with embedded js) <!DOCTYPE html> <html> <head> <title> My first JavaScript </title> </head> <body> <h1> </h1> </body> </html> <script> </script> document.write( Hello, World! ); B. Ramamurthy, CSE651C 3 7/4/2014
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 ); } B. Ramamurthy, CSE651C 4 7/4/2014
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. B. Ramamurthy, CSE651C 5 7/4/2014
HTML with External File JS <!DOCTYPE html> <html> <head> <title> My second JavaScript </title> <script src= script2.js ></script> </head> <body> <h1 id= helloMessage > </h1> </body> </html> B. Ramamurthy, CSE651C 6 7/4/2014
JS file window.onload = writeMessage(); function writeMessage(){ document.getElementById(helloMessage).innerHTML = Hello, World! ; } // try this simple application B. Ramamurthy, CSE651C 7 7/4/2014
Complete Example 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. B. Ramamurthy, CSE651C 8 7/4/2014
User Interface (UI) Design 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 <div> tag, <table> tag B. Ramamurthy, CSE651C 9 7/4/2014
Design the functionality 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 B. Ramamurthy, CSE651C 10 7/4/2014
Connecting the UI and JS functions 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. B. Ramamurthy, CSE651C 11 7/4/2014
Applying the knowledge 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. B. Ramamurthy, CSE651C 12 7/4/2014
Summary 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. B. Ramamurthy, CSE651C 13 7/4/2014
Project Report 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. B. Ramamurthy, CSE651C 14 7/4/2014
