How can I compose a script for any web page?

Prior to getting into the JavaScript language, you need to find out the way it will fit along with HTML and CSS within your web sites.

Web developers typically speak about three languages which are widely-used to create web pages: HTML, CSS, and JavaScript. Wherever achievable, make an effort to keep your three languages in independent files, using the HTML page connecting to CSS and JavaScript files. Every language forms a different layer having a unique purpose. Every layer, coming from left to right. develops the previous layer.  This is the place where the information of the web page lives. The HTML provides the page framework as well as adds semantics.

HTML ONLY

Beginning with the HTML layer enables you to concentrate on the essential thing regarding your website, it’s content remaining plain HTML, this particular layer will need to work with all sorts of devices, be accessible to everyone, and load very quickly on slower connections. It does not just display sizes which are diverse – connection rates along with capabilities of every gadget may additionally be unique.

HTML+CSS

Placing the CSS rules inside a separate file maintains rules concerning how the web page is visually away from the content itself. You may use the same style sheet with all of your pages, making your website quicker to load and simpler to maintain. Additionally, you can make use of various style sheets using the same content to produce several views of the same data.

[/vc_column_text][/vc_column][vc_column width=”1/3″][vc_single_image image=”996″ alignment=”right” css_animation=”appear”][vc_column_text]Furthermore, many people browse using JavaScript  switched off, which means you need to ensure that the web page is still effective for them.[/vc_column_text][vc_separator][vc_column_text]

HTML+CSS+JAVASCRIPT

JavaScript will be added last and improves the usability involving the particular page or even the experience of interacting with the website. Ensure that is stays separate indicates that the page is still effective if the user can’t load or run JavaScript. Anyone may also reuse the code on a number of pages.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_separator][vc_column_text]

CREATING THE BASIC JAVASCRIPT

[/vc_column_text][vc_column_text]

JavaScript is constructed in plain text, much like HTML and CSS, so you do not need any kind of new tools to create a script. This instance adds a greeting directly into an HTML web page. The particular greeting changes based on the time of day.

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]1.Create a folder to place the example within known as C01, after that launch your preferred code editor, and type in the text to the right.JavaScript files are just a text file (like HTML and CSS files tend to be) however it has a .js file extension, therefore, save this kind of file with the name add-content.js Don’t be concerned about what the code implies yet. for the time being we’ll concentrate on how the script is made as well as how it fits into the HTML page.[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

var today= new Date();
var hourNow = today.getHours();
var greeting;

if (hourNow > 18) {
greeting= 'Good evening!';
} else if (hourNow > 12) {
  greeting = ' Good afternoon!';
} else if (hourNow > 0) {
  greeting = 'Good morni ng!';
} else {
greeting = 'Welcome! ' ;
}
document .write( ' <h3>' +greeting + ' </ h3>');

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text]2.To help keep your documents structured, in the same way that CSS documents generally reside in a directory called styles or CSS, your own JavaScript files can reside in a directory called scripts, javascript or js.In this instance, save your file in a directory called js[/vc_column_text][vc_separator][vc_column_text]

LINKING TO A JAVASCRIPT FILE FROM AN HTML PAGE

[/vc_column_text][vc_column_text]

When you wish to make use of JavaScript using a web page, you apply the HTML <script> element to inform the particular browser it’s coming across a script. Its src attribute informs individuals where the JavaScript file will be saved.

[/vc_column_text][vc_row_inner][vc_column_inner width=”1/2″][/vc_column_inner][vc_column_inner width=”1/2″][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width=”1/2″][vc_column_text]3.Inside your code editor, enter the HTML displayed on the right. Save this file using the name add-content.html. The HTML <script> element will be utilized to load the JavaScript file into the page. There’s an attribute called src, whose value may be the path to the script you created.This informs the browser to seek out and load the script file (similar to the src attribute with an <img> tag).[/vc_column_text][/vc_column_inner][vc_column_inner width=”1/2″][vc_column_text]

<!DOCTYPE html>
<html>
<head>
<title>Web Development Services.</ title>
<link rel ="stylesheet" href="css/ cOl.css" />
</ head>
<body>

<hl>Web Development Services</ hl>
<script src="js/ add-content.js"></ script>
<p>For all orders and inquiries please call
<em>021-555-5555</ em></ p>
</ body>
</html>

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text]4.Open up the HTML file in your browser. You need to observe that the JavaScript has added a greeting (in this instance, Good Afternoon!) to the web page. (These types of greetings are usually coming from the JavaScript file; they aren’t in the HTML file.) Please be aware: Internet Explorer occasionally forbids JavaScript operating whenever you open up a web page saved on your hard drive. If this has an effect on you, you should try Chrome, Firefox, Opera, or Safari as an alternative.[/vc_column_text][vc_separator][vc_column_text]

THE SOURCE CODE IS NOT CHANGED

[/vc_column_text][vc_column_text]

In the event, you go through the source code for that example you recently created, you will find that the HTML is still the same.

[/vc_column_text][vc_column_text]5.After you have attempted the particular example inside your browser, look at the source code for that page.(This method is usually under the View, Tools or Developer menu of the browser.)[/vc_column_text][vc_column_text]6.The source of the web page doesn’t really display the new element which has been added into the page; it simply demonstrates the link to the JavaScript file. While you move through this series, you will notice the majority of the scripts are usually added right before the closing </body> tag (this could be regarded as a better spot to put your scripts).[/vc_column_text][vc_separator][vc_column_text]

PLACING THE SCRIPT IN THE PAGE

[/vc_column_text][vc_column_text]

You might even see JavaScript in the HTML among the opening <script> and closing </script> tags (however it is better to put scripts in their own individual files).

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_column_text]7.Lastly, have a go with cracking open the HTML file, taking out the src attribute in the opening <script> tag, as well as adding the new code displayed on the right between your opening <script> tag and also the closing </script> tag. The particular src attribute isn’t any longer required since the JavaScript is incorporated in the HTML page.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_column_text]

<!DOCTYPE html>
<html>
<head>
<title>Web Development Services.</ title>
<link rel ="stylesheet" href="css/ cOl.css" />
</ head>
<body>

<hl>Web Development Services</ hl>
<script>document.write(' <h3>Welcome !</h3>');
</script>
<p>For all orders and inquiries please call
<em>021-555-5555</ em></ p>
</ body>
</html>

[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]8.Open the HTML file in your web browser and you will see the welcome greeting is presented into the page. As you may have suspected, document.Write() creates content into the document.It’s an easy method to include content to a page, but not necessarily the best. In my later posts, i will discuss different ways to update the information on a page.[/vc_column_text][vc_column_text]

SUMMARY

[/vc_column_text][vc_column_text]1.It is advisable to maintain JavaScript code inside its own JavaScript file. JavaScript files are usually text files (like HTML pages and CSS style sheets), however they possess the .js extension.

2.The HTML <script> element can be used in HTML web pages to inform the browser to load the JavaScript file (rather like the <link> element may be used to load a CSS file).

3.In the event you view the source code of the web page inside the browser, the JavaScript won’t change the HTML, since the script works with the model of the web page that the browser has generated.

 

You can read the intro to the whole series here.

[/vc_column_text][/vc_column][/vc_row]

About the author

Asif Amod

I am a webtrepreneur, full stack developer and a technology evangelist. I have been coding from a young age. I also speak to databases and make servers do what I say, I am passionate about continuous learning. I thrive on challenges that require lateral thinking - no matter what language or technology. I have founded and Co-founded a number of startups and have created SaaS web applications for different industries. I am currently open to discussing and explore other opportunities.

Add comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

By Asif Amod

About Me

I am a webtrepreneur, full stack developer and a technology evangelist. I have been coding from a young age. I also speak to databases and make servers do what I say, I am passionate about continuous learning. I thrive on challenges that require lateral thinking – no matter what language or technology. I have founded and Co-founded a number of startups and have created SaaS web applications for different industries. I am currently open to discussing and explore other opportunities.

Recent Posts