- 3 years ago
- Zaid Bin Khalid
- 4333 Views
-
4
In this session, you will learn about JavaScript and how it can be used on the web-page with examples.
What is JavaScript?
The most popular and widely used client-side scripting language is javascript. Within your web browser, this client-side scripting is used to run the script. In Web-server, JavaScript is programmed to add dynamic effects and interactivity to the web pages by manipulating the content.
Brief History.
- In the mid-1990s, JavaScript was initially developed as Live Script by Netscape. Later in 1995 the Live Script renamed as JavaScript and in 1997 it became an ECMA standard
Now for web-based applications, JavaScript is used as a client-side scripting language.
All web browsers available today, such as Google Chrome, Mozilla Firefox, Apple Safari, etc. virtually supported by JavaScript.
What You Can Do with JavaScript
There are many more things in JavaScript you can do.
- Modify the content of a web page by adding or removing elements
- Validate user inputs before submitting it to the server
- Perform operations based on user inputs and display the results
- Create alert pop-ups to display info or warning messages to the user
- Perform and control transitions and animations
- Monitor events like a mouse click, hover, etc. and react to it
- Change the style and position of the elements on a web page
- Perform and control transitions and animations
JavaScript list does not end here. There are many more exciting things that you can do with JavaScript, and you will learn in the next session.
What This Tutorial Covers
All the fundamental programming concepts will cover in this JavaScript tutorial session, data types, creating, operators and variables using are included, code structuring, generating outputs, creating and manipulating strings and arrays, defining and calling functions, and so on.
Adding JavaScript to Your Web Pages
There are three basic ways to add JavaScript into a web page as shown:
- Embedding the JavaScript code between a pair of
<script> and </script> tag. - Creating an external JavaScript file with the
.js extension and then load it within the page through the src attribute of the <script> tag. - I am placing the JavaScript code directly inside an HTML tag using the unique tag attributes such as
onclick, onmouseover, onkeypress, onload, etc.
The below mention sections will describe each of these procedures in detail:
Embedding the JavaScript Code
You can embed the JavaScript code directly within your web pages by placing it between the <script> and </script> tags.
The <script> tag indicates the browser that the contained statements are to be interpreted as executable script and not HTML. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embedding JavaScript</title>
</head>
<body>
<script>
var greet = "Hello World!";
document.write(greet); // Prints: Hello World!
</script>
</body>
</html>
Output:
The JavaScript code in the above example will print a text message on the web page. You will learn what each of these JavaScript statements means in upcoming chapters.
Calling an External JavaScript File
You can also place your JavaScript code into a separate file with a .js extension, and then call that file in your document through the src attribute of the <script> tag, like this:
<script src="js/hello.js"></script>
This is useful if you want the same scripts available to multiple documents. It saves you from repeating the same task over and over again and makes your website much easier to maintain.
Example.
Let’s create a JavaScript file named “hello.js” and place the following code in it:
// A function to display a message
function sayHello() {
alert("Hello World!");
}
// Call function on click of the button
document.getElementById("myBtn").onclick = sayHello;
Now, you can call this external JavaScript file within a web page using the <script> tag, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Including External JavaScript File</title>
</head>
<body>
<button type="button" id="myBtn">Click Me</button>
<script src="js/hello.js"></script>
</body>
</html>
Placing the JavaScript Code Inline
You can also place JavaScript code inline by inserting it directly inside the HTML tag using the unique tag attributes such as onclick, onmouseover, onkeypress, onload, etc.
However, you should avoid placing a large amount of JavaScript code inline as it clutters up your HTML with JavaScript and makes your JavaScript code challenging to maintain.
Example.
Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Inlining JavaScript</title>
</head>
<body>
<button onclick="alert('Hello World!')">Click Me</button>
</body>
</html>
- 3 years ago
- Zaid Bin Khalid
- 4333 Views
-
4