Basics of JavaScript

Basics of JavaScript

Javascript is a scripting language, an interpreted language, and a browser language. Used to add dynamic behavior and event model to static HTML web pages.


Java script is used along with HTML+CSS combination to make the websites more interactive or dynamic.

 

Javascript Basics

What is Interpreted Language?
The language is not available in compiled form. We can use the javascript code directly i.e. script is not saved anywhere in any format. Unlike compiled languages, the entire script needs to be executed all the time.

Is javascript is a software to install?
No. Javascript is not a software, no license required, and no need to install separately. It's pre-installed in most of the browsers by default. It's ready to use language.

Where I need to write a javascript code? Any UI?
To write javascript, there is no separate UI required. We can use any text editors like notepad or notepad++. There are other free to use text editors online as well. 

Is javascript is Java?
No. Javascript is totally different from Java.

How javascript works with HTML and CSS?
Using javascript we can control the HTML elements behavior and display.
Using javascript we can control the CSS properties.

How to start with javascript within the HTML page?
To add javascript to HTML page, just add <script></script> tags to HTML page. HTML supports two places where we can add the script.
1. Between <Head></Head> tag
2. Between <Body></Body> tag

Any restrictions to add a number of scripts to HTML?
No restrictions at all. We can include or add as much as we can.

How many ways we can include scripts to the HTML page?
We can add scripts to HTML in two ways:

Internal Scripts
External Scripts

1. Internal Script
1.1 Add scripts between <head></head> tags 
Example: 
<html> 
<head> 
        <script> 
            // statements
        </script> 
</head> 
<body> 
</body> 
</html>

1.2 Add scripts between <body></body> tags 
 Example: 
<html> 
<head> 
</head> 
<body>
    <script> 
        // statements 
    </script> 
</body> 
</html>

2. External Script

Call external javascript within the HTML <head> tag Example:
<html>
<head>
    <script src="externalscript.js"></script>
</head>
<body>
</body>
</html>
Call external javascript within the HTML <head> tag
Example:
<html>
<head>
</head>
<body>
    <script src="externalscript.js"></script>
</body>
</html>
We can add or call any number of external scripts within the HTML tags. One main advantage is we can separate the scripts from HTML + CSS to make the HTML page lighter.

How to access the HTML element using Javascript?

Using javascript, we can access the HTML element using the Id attribute of the HTML element.

Below is the example to access the HTML element using the Id attribute.

Example:

<html>
<head>
<script>
function changeMsg()
{
 document.getElementById("samplediv").innerHTML =  "Replace div text using java script";
}
</script>
</head>
<body>
<div
id="samplediv"> this is Div Text</div>
<button type="button" onclick=" changeMsg ()">Tryit</button>
 </body>
</html>


Now you thinking what document means. Am I right?
In simple words, A document in javascript represents the currently working HTML document.
The ‘getElementById ‘ is a method from Document, used to access an HTML element with ID attributes.

How to access CSS properties using the javascript?
Using javascript, we can access the CSS element properties using the style.property

Example:

We have a style defined for one Paragraph and one Div like below in HTML page:

<head>
<style>
    p  { color: red;}
    div {background: blue;}
</style>
</head>

 Now we can change these default properties using the java script:

<body>
<p
id="pgid">Paragraph Text</p>
<div
id="divid">Div Text</p>
<button
type="button" onclick="document.getElementById(' pgid '). style. color= 'green' ">Click /button>
 <button
type="button" onclick="document.getElementById(' divid ').  style.background='yellow'"> Click</button>
</body>


Output:
When you click on the first button, paragraph color changed from default ‘red’ to ‘green’ color.
When you click on the second button, the div background changed from default ‘blue’ to ‘ yellow’ color.

 

Conclusion

There is a lot in javascript to learn. It's huge programming. In this post, I just limited to basic knowledge. Added the only basics here to give some boost to the new learners. One advantage is all the basics are in questionnaire format. So, one can easily grasp the concepts. Happy learning!!!

 


-
Tags

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)