1.1 JS Introduction

JavaScript Can Change HTML Content

• One of many JavaScript HTML methods is getElementById().
• The example below "finds" an HTML element (with id="demo"), and changes the element content (innerHTML) to "Hello JavaScript":

Example 1: What Can JavaScript Do?

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript accepts both double and single quotes:

Example 2: What Can JavaScript Do? part 2

document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScript Can Change HTML Attribute Values

In this example JavaScript changes the value of the src (source) attribute of an <img> tag:

Example 3: What Can JavaScript Do? part 3 turn on the Light Bulb

<button onclick="document.getElementById('myImage').src='include/images/pic_bulbon.gif'">Turn on the light</button>

<img id="myImage" src="include/images/pic_bulboff.gif" style="width:100px" alt="">

<button onclick="document.getElementById('myImage').src='include/images/pic_bulboff.gif'">Turn off the light</button>

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

Example 4: What Can JavaScript Do? part 4

document.getElementById("demo").style.fontSize = "35px";

In the Cascading Style Sheet lesson: 15.2 CSS Media Queries I learned to display specific messages on devices of specific sizes but not on devices with larger or smaller screens. Also in the CSS segment, I was introduced to font-size on smart phones. In the HTML segment, I learned how to change font-size of a specific element using JavaScript. Since 4.4 HTML JavaScript - A Taste of JavaScript, I have combined what I learned in both lessons to make a button that only displays on screens that are 500px wide or less, that allows cell phone users to increase the font-size of the web pages to make them easier to read.

I discovered all I had to do was add:
@media screen and (min-width: 800px) { body { font-size: 100%; } }
&media screen and (max-width: 799px) { body { font-size: 4vw; } }
&media screen and (max-width: 600px) { body { font-size: 5vw; } }
to my style sheet to make my whole site mobile accessible. No need for JavaScript to switch the style sheets and no need for a mobile specific style sheet. However, some people may still find the font-size too large or too small on their mobile devices. Eventually I will provide a button for making the font-size smaller and another to make it bigger.

JavaScript Can Hide HTML Elements

Hiding HTML elements can be done by changing the display style:

Example 5: What Can JavaScript Do? part 5

document.getElementById("demo").style.display = "none";

JavaScript Can Show HTML Elements

Showing hidden HTML elements can also be done by changing the display style:

Example 6: What Can JavaScript Do? part 6

document.getElementById("demo").style.display = "block";