Understanding basic JavaScript codes. - GeeksforGeeks

30 Apr, 2020
Inserting JavaScript into a webpage is much like inserting any other HTML content. The tags used to add JavaScript in HTML are <script> and </script>. The code surrounded by the <script> and </script> tags is called a script blog.<script> tags can be put between the <head> and </head> tags or between <body> and </body> tags.
type attribute was the most important attribute of <script> tag. However, it is no longer used. Browser understands that <script> tag has JavaScript code inside it.
<script type="text/javascript">
How to write, save and run codes:Method 1:1. Use any note editor like Notepad, Notepad++ to write the code.2. Save the page with .html extension and load it in web browser.
Method 2:1. Create a .js file, and write your JS code in this file using your favorite editor.2. Add <script src="relative_path_to_file/file_name.js"></script> in the end of <body> tag inside HTML file.
Code for Painting the page light blue
<!DOCTYPE html><html>  <head>    <title></title>  </head>  <body bgcolor="white">   <p>Paragraph 1</p>   <script type="text/javascript">   document.bgColor ="lightblue";   </script>  </body><html>
Output:
The colour of web-page is light blue , but the opening body tag is defined to set background colour to be white.
<body bgcolor="white"> 
The background colour of page is light blue because JavaScript is used to set the document's background colour to be light blue.
document.bgcolor="lightblue";
Learning from the code:1. Page is known as document for the purpose of scripting in a web page.2. Properties of the document can be referenced by writing document followed by a dot, followed by the property name. The document has lots of properties.3. After <script> tag browser starts to interpret the text as JavaScript until the </script> comes.
Code to write something to a web page using JavaScript:Lets write “Hello World!” to a blank page using JavaScript.
DISPLAYING THE RESULT ON THE WEBPAGE.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”>  <head>    <title></title>  </head>  <body>   <p id="ResultsP"></p>    <script type="text/javascript">//Script Block 1   document.getElementById('ResultsP').innerHTML ='Hello World!';   </script>  </body><html>
Output:
Learning from the code:1. The following line has been added to this code.
 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
 <html xmlns=”http://www.w3.org/1999/xhtml”>
This lets the web browser know that user is using XHTML. It doesn’t actually make any difference to the code; it would work just fine without the extra lines.
2. Notice that <p> tag has been given an id using the id attribute.
<p id=”ResultsP”>
This id must be unique in the web page, because it is used by the JavaScript to identify the specific HTML element in the following line:
document.getElementById(‘ResultsP’).innerHTML = ‘Hello World!’;
The code simply means: “Get me the document element with id ResultsP and set the HTML inside that element to Hello World!”
It is important that the code accessing the paragraph is after the paragraph otherwise, the code would be attempting to access a paragraph before it existed in the page and would throw an error.
Aanisha Mishra
keerthiga ragu
javascript-basics
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Convert a string to an integer in JavaScript
Form validation using HTML and JavaScript
Difference Between PUT and PATCH Request
Installation of Node.js on Linux
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?