Welcome to compeducational.com: Introduction to JavaScript

JavaScript is a programming language that can be added to your website to make it interactive. It is used in games, animated 2D, 3D graphics or in behaviour of responses when buttons are pressed or in data entry on forms etc.

Jacascript was invented by Brendan Eich. It is one of the most popular web technologies.

Javascript is one of the three languages all web developers must learn.

1. HTML: To define the content of the web pages.

2. CSS: To define the layout of the web pages.

3. JavaScript: To enhance the behaviour of the web pages.

As our skills in JavaSript grow, our website becoming more powerful, creative and interactive.

For Example: We can create a button in our web page by clicking which user can see the 'current date and time'.

See how we can include javascript in html coding for this:

<!DOCTYPE html>

<html>

<body>

<h2>My First JavaScript</h2>

<button type="button"

onclick="document.getElementById('demo').innerHTML=Date()">

Click me to display Date and Time.</button>

</body>

</html>

Output of the above code

Try yourself Try it yourself editor


Code <html> <body> <h2>My First JavaScript</h2> <p id="demo67"></p> <button type="button" onclick="document.getElementById('demo67').innerHTML=Date()"> Click me to display Date and Time.</button> </body> </html>	Output

What are the functions Javascript can do in a web page ?

1. Javascript can change HTML content.

In below example, javascript finds an HTML element (id="demo") and change the element content (inner HTML) to Hello JavaScript.

<!Doctype html>

<html>

<body>

<h2> Function of JavaScript</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>

click the 'click me' button

After clicking 'Hello JavaScript/' appears

Try it yourself editor


Code <html> <body> <h2> Function of JavaScript</h2> <p id="demo32"> JavaScript can change HTML content.<p> <button type="button" onclick ='document.getElementById("demo32").innerHTML="Hello JavaScript!" '>click me !</button> </body> </html>	Output

2. Javascript can change HTML attribute values.

Let se the another example, how JavaScript can change the value of the src (source) attribute of an <img> tag:

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

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

</body>

</html>

Output of above code

when clicked on 'Turn on the light' button, bulb is 'on'.

When we click 'Turn off the light button' the light will 'off' in such cas.

Try it yourself

Try it yourself editor

Output

3. Javascript can change HTML Styles (CSS).

Below is an example of the changing of font size by JavaScript.

<!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>

click on 'click me' button

Now text appears after changing its size

Try it yourself editor


Code <html> <body> <p id="demo29">JavaScript can change the style of an HTML element.</p> <button type="button" onclick="document.getElementById('demo29').style.fontSize='35px'">Click Me!</button> </body> </html>	Output

4. Javascript can hide HTML Elements.

We can hide any statement of HTML by JavaScript

<html>

<body>

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

<p id="demo">JavaScript can hide HTML elements.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Click Me!</button>

</body>

</html>

click on 'click me' button

After clicking the sentence 'javaScript can hide HTML statement' is disappeared

Try it yourself editor


Code <html> <body> <p id="demo30">JavaScript can hide HTML elements.</p> <button type="button" onclick="document.getElementById('demo30').style.display='none'">Click Me!</button> </body> </html>	Output

5. Javascript can show HTML Elements.

We can show again any statement of HTML by JavaScript.

<html>

<body>

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

<p>JavaScript can show hidden HTML elements.</p>

<p id="demo" style="display:none">Hello JavaScript!</p>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Click Me!</button>

</body>

</html>

Now click on 'Click me' button

The hidden statement 'Hello JavaScript!' is displayed now.

Try it yourself editor


Code <html> <body> <p>JavaScript can show hidden HTML elements.</p> <p id="demo31" style="display:none">Hello JavaScript!</p> <button type="button" onclick="document.getElementById('demo31').style.display='block'">Click Me!</button> </body> </html>	Output

Try the above codes in Try it Editor

TOP

Welcome to compeducational.com

Fundamental

Introduction to JavaScript

Python: Functions

Labels

HTML

JavaScript

Python

Fundamental of Computer

DBMS