Explore AllPythonInterview PrepMachine Learning
JavaScriptTypeScriptPython + CopilotModern Web DevSQLAI EssentialsPandasNumPyEmail AssistantJava + AI
Loading...

Introduction to JavaScript

JavaScript Introduction

JavaScript and Java, despite their similar names, are entirely different. JavaScript was created in 1995 by Brendan Eich, and it became a standard known as ECMAScript in 1997. JavaScript is mostly used for web development, while Java is a programming language often used for standalone applications.

Welcome to our JavaScript introduction! JavaScript, often called "JS," is a powerful programming language that enables interactive web pages and dynamic applications. Whether you're building simple websites or complex web apps, learning JavaScript is essential.

Why Learn JavaScript?

JavaScript is a must-have skill for any web developer. It can:

  • Change HTML content and attributes dynamically
  • Adjust CSS styles directly within HTML
  • Hide or show HTML elements based on user actions

By mastering JavaScript, you'll unlock new capabilities to create responsive, interactive websites.

JavaScript Basics: Writing "Hello World!"

Let's start with a simple JavaScript example. To print "Hello World!" on a web page, use the getElementById() method to select an HTML element and change its content.

javascript
13 lines
|
49/ 500 tokens
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Example</h2>
<p id="demo">This is a paragraph.</p>

<script>
  document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>
Code Tools

In this example, JavaScript finds the HTML element with id="demo" and replaces its text content with "Hello World!" This is a quick and effective way to modify HTML using JavaScript code.

JavaScript for HTML Content

JavaScript is commonly used to change the content of HTML elements. You can assign new text or HTML code to an element's innerHTML property, as shown here:

javascript
1 lines
|
20/ 500 tokens
1
document.getElementById("demo").innerHTML = "Welcome to DevsCall JavaScript!";
Code Tools

With JavaScript, you can use either double or single quotes around text strings:

javascript
1 lines
|
16/ 500 tokens
1
document.getElementById('demo').innerHTML = 'Hello JavaScript';
Code Tools

JavaScript Styling (CSS Integration)

JavaScript can dynamically apply CSS styles. For example, to change the font size of a paragraph:

javascript
1 lines
|
14/ 500 tokens
1
document.getElementById("demo").style.fontSize = "24px";
Code Tools

With JavaScript, you can modify various CSS properties to adjust the look and feel of web content.

Show and Hide Elements

JavaScript can hide and show HTML elements based on user interactions. For instance, hiding an element by setting its display style to none:

javascript
1 lines
|
14/ 500 tokens
1
document.getElementById("demo").style.display = "none";
Code Tools

To show it again, change the display property back to block:

javascript
1 lines
|
14/ 500 tokens
1
document.getElementById("demo").style.display = "block";
Code Tools

These simple yet powerful techniques allow you to create interactive content that responds to user actions, making the user experience more engaging.

Previous LessonNext Lesson