Introduction to Java Script 1 B RAMAMURTHY 12152021
Introduction to Java. Script 1 B. RAMAMURTHY 12/15/2021
Overview 2 �We will begin with simple exercises on HTML (UI)+JS (control/action)+CSS (style) �We will focus on separation of the various components. �Then we will drop the style (css) and focus on a few popular js libraries such as jquery 12/15/2021
Structure – Style -- Interaction 3 �HTML provides structure �CSS provides style; CSS provides style attributes for the HTML selector tags �Javascript (JS) provides control for interaction and operations �JS provides functions that can be called to perform operations 12/15/2021
Exercise with all three components 4 <!DOCTYPE html> <head> <title> My first Java. Script </title> <style> h 1{color: blue} </style> </head> Head Style/css <body> <h 1> <script> document. write("Hello World!") </script> Body </h 1> </body> Script/js </html> 12/15/2021
Separate files for style and scripts 5 <!DOCTYPE html> <head> <title> My first Java. Script </title> </head> Head. css file Style/css <style> h 1{color: blue} </style> <body> <h 1> js function outside </h 1> Body </body> </html> Script/js. js file function mywrite() {document. write("Hello World!"); } 12/15/2021
Moving CSS, JS to an external files 6 �We can separate style elements in css file, behavioral elements can be moved to an external js file. �This separation of concerns has resulted in explosion of javascript libraries and css style libraries. �Large collection of superior and highly useful js libraries are available 12/15/2021
JS functions 7 �Javascript “script” consists of 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 say. Something() { alert(“ We are learning basics of JS”); } 12/15/2021
Putting all together 8 Ja Li vasc br ri ar pt ies . html file image and audio files . css file . js file Web browser Firefox/ Safari interprets application displays ) ss c. ( es yle rari t S ib L Prepare/edit files 12/15/2021
Visualizations 9 �Great visualizations are not just informative but initiate conversations, explosion of free social media communications/messaging/instagramming etc. result in valuable free marketing to target customer segment �Great visualization tells a story instantly �Excel is de facto standard but it is designed as a data entry application and optimized for graphs/plots: not good for unstructured and social media data; look beyond excel tables and graphs �Interactive visualization provides new modes of engagement previously impossible �Opens up previously invisible aspects of data 12/15/2021
HTML 5+DOM 10 �No matter what the backend, HTML and Java. Script are the technologies for all web developers for front end. 12/15/2021
Jquery 11 �Jquery is an Open Source javascript library that simplifies the interactions between the Document Object Model (DOM) of HTML and Javascript. �Plain JS file is made up of functions, whereas Jquery features functions that are responsive the HTML selectors and modifies the DOM/HTML document. 12/15/2021
Jquery Overview 12 �Finding HTML elements and invoking operations/functions for them �Chaining multiple jquery methods on a set of elements �Implicit iteration: keep checking the UI or scan the page and update when changes happen 12/15/2021
- Slides: 12