1. Intro to JavaScript
CS 1150 Spring 2017

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

3. 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

4. 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:

5. JavaScript and HTML Attributes
JavaScript can change HTML attributes
This example changes an HTML image by changing the src attribute of an <img> tag:

6. JavaScript and HTML Styles
JavaScript can change the CSS dynamically
This example shows how to change the CSS style with getElementById():

7. JavaScript Hiding/Showing Elements
JavaScript can hide or show HTML elements by changing the display style
This example demonstrates hiding an element:
This example demonstrates showing an element:

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

9. 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

10. 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

11. 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()

12. innerHTML Example

13. document.write() Example
Note: using document.write() after an HTML element is fully loaded will delete all existing HTML:

14. window.alert() Example

15. console.log() Example
This is for debugging purposes

16. Learn More
For further learning:

17. Example Files
hooseColor.html
ock.html
earts.html