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!

Leave a Reply

Your email address will not be published. Required fields are marked *