Categories
JavaScript Web development

JavaScript HTML DOM/CSS

The HTML DOM allows JavaScript to change the style of HTML elements.

JavaScript HTML DOM CSS

Changing HTML Style

To change the style of an HTML element, use this syntax:

document.getElementById(id).style.property = new style

The following example changes the style of a <p> element:

<!DOCTYPE html>
<html>
<body>

<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>

<script>
document.getElementById("p2").style.color = "green";
document.getElementById("p2").style.fontFamily = "Arial";
document.getElementById("p2").style.fontSize = "larger";
</script>

<p>The paragraph above was changed by a script.</p>

</body>
</html>

Output:

Using Events

The HTML DOM allows you to execute code when an event occurs.

Events are generated by the browser when “things happen” to HTML elements:

  1. An element is clicked on
  2. The page has loaded
  3. Input fields are changed

You will learn more about events in the next chapter of this tutorial.

This example changes the style of the HTML element with id=”id1″, when the user clicks a button:

<!DOCTYPE html>
<html>
<body>

<h1 id="id1">My Heading 1</h1>

<button type="button" 
onclick="document.getElementById('id1').style.color = 'yellow'">
Click Me!</button>

</body>
</html>

Output:

Enjoy coding!

Categories
JavaScript Web development

JavaScript Output

JavaScript Output defines the ways to display the output of a given code. JavaScript can “display” data in different ways:  

a) Writing into an HTML element, using innerHTML.

b) Writing into the HTML output using the document.write()

c) Writing into an alert box, using a window.alert().

d) Writing into the browser console, using console.log().

a) Using innerHTML

To access an HTML element, JavaScript can use the document.getElementbyId(id) method. The id attribute defines the HTML element. The innerHTML property defines the HTML content:

Example:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My First Paragraph.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>

</body>
</html> 

Output:

Changing the innerHTML property of an HTML element is a common way to display data in HTML.

b) Using document.write()

For testing purposes, it is convenient to use the document.write():

Example:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html> 

Output:

The document.write() method should only be used for testing. 

c) Using window.alert()

You can use an alert box to display data:

<!DOCTYPE html>
<html>
<body>

<h2>My First Web Page</h2>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html> 

Output:

d) Using console.log()

For debugging purposes, you can use the console.log() method to display data: 

<!DOCTYPE html>
<html>
<body>

<h2>Activate debugging with F12</h2>

<p>Select "Console" in the debugger menu. Then click Run again.</p>

<script>
console.log(5 + 6);
</script>

</body>
</html> 

Output:

Enjoy!

Categories
JavaScript Web development

JavaScript Introduction

Javascript is the programming language of HTML and the Web. Java Script is one of the 3 languages all web developers should learn: 


a) HTML – to define the content of web pages.
b) CSS – to specify the layout of web pages.
c) JavaScript – to program the behavior of web pages.

Web pages are not only places where JavaScript is used. Many desktop and server programs use JavaScript (for example Node.js).  


JavaScript can change the HTML content. One of many JavaScript methods is getElementById(). This example uses the method to “find” an HTML element (with id=”demo”) and changes the element   content (innerHTML) to “Hello JavaScript”: 

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

Output:

After pressing “Click Me!”: 

JavaScript can change HTML attribute values. In this example, JavaScript changes the value of the src (source) attribute of an <img> tag: 

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p>JavaScript can change HTML attribute values.</p>

<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

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

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

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

</body>
</html>

Output:

After pressing “Turn on the light”:

JavaScript can change HTML styles (CSS). Changing the style of an HTML element is a variant of changing an HTML attribute:  

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change the style of an HTML element.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button>

</body>
</html> 

Output:

 After pressing “Click Me”:

Enjoy coding!

Categories
JavaScript Web development

How to add JavaScript to HTML?

In some of my previous posts started appearing JavaScript, so why today I would like to explain more how to nest the code into HTML. You will learn more about JavaSript in later chapters, but today in a short introduction to post you need to know what JavaScript is and what JavaScript do. JavaScript is the programming language for the web and can update and change both HTML and CSS.

You can place any number of scripts in your HTML document. You can add JavaScript code in an HTML document by employing the dedicated HTML tag <script> that wraps around JavaScript code. The <script> tag can be placed in the <head> section of your HTML, in the <body> section, or after the </body> close tag, depending on when you want Java Script to load. 
In this example, a JavaScript function is placed in <head> section of HTML page. The function is invoked (called) when a button is clicked: 

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>

<h2>JavaScript in Head</h2>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">Try it</button>

</body>
</html> 

Output:

Hope you find it helpful.Enjoy coding!