Intro to JavaScript CS 1150 Spring 2017

In This Lecture What is JavaScript? What can JavaScript do? JavaScript output, syntax, statements, comments, and more

What is JavaScript? JavaScript is the programming language of HTML and the web JavaScript is one of 3 languages all web developers should learn, in addition to HTML and CSS

JavaScript and HTML Content JavaScript can change HTML content One of many JavaScript HTML methods is getElementById() This method can find an HTML element by its id attribute and change the content of that element Example: https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html

JavaScript and HTML Attributes JavaScript can change HTML attributes This example changes an HTML image by changing the src attribute of an <img> tag: https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_lightbulb

JavaScript and HTML Styles JavaScript can change the CSS dynamically This example shows how to change the CSS style with getElementById(): https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_style

JavaScript Hiding/Showing Elements JavaScript can hide or show HTML elements by changing the display style This example demonstrates hiding an element: https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_hide This example demonstrates showing an element: https://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_show

The <script> Tag In HTML, Javascript code must be inserted between <script> and </script> tags

JavaScript Functions and Events A JavaScript function is a block of JavaScript code that can be executed when called for For example, a function can be called when an event occurs, like when the user clicks a button https://www.w3schools.com/js/tryit.asp?filename=tryjs_whereto_body

External JavaScript JavaScript code can also be placed into an external file, rather than being embedded in the HTML file Placing scripts in external files has advantages: It separates HTML and JavaScript code It makes HTML and JavaScript easier to read and maintain Cached JavaScript files can speed up page loads In this class, we will only use internal JavaScript

JavaScript Display Possibilities JavaScript can display data in different ways: Writing into an HTML element using innerHTML Writing into the HTML output using document.write() Writing into an alert box using window.alert() Writing into the browser console using console.log()

innerHTML Example https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_dom

document.write() Example https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write Note: using document.write() after an HTML element is fully loaded will delete all existing HTML: https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_write_over

window.alert() Example https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_alert

console.log() Example https://www.w3schools.com/js/tryit.asp?filename=tryjs_output_console This is for debugging purposes

Learn More For further learning: https://www.w3schools.com/js/js_syntax.asp

Example Files https://www.cs.mtsu.edu/~crn2k/public/courses/1150/JavascriptExamples/c hooseColor.html https://www.cs.mtsu.edu/~crn2k/public/courses/1150/JavascriptExamples/cl ock.html https://www.cs.mtsu.edu/~crn2k/public/courses/1150/JavascriptExamples/h earts.html