Introduction to JavaScript-JavaScript tutorials for beginners

by

Posted on 20 March 2017

Hello and welcome to the first part of the series "JavaScript for beginners", JavaScript is an object based client side scripting language now you guys must be thinking what does that exactly means? Let me explain.

Object Based

Object based means JavaScript can use items called objects, in javascript objects are not class based like the objects we use in Java or C++ instead they are just simple objects which represent a certain entity.

Client Side Scripting

A scripting language is a language which does not need to be compiled before it run, all the interpretation is done on the fly by the client.

Client Side means the language is going to be executed at the client side or in simple words we can say that it is going to be executed at the web browser instead of the server(server side scripting languages such as php are executed on the servers).

Now you might be wondering how javascript is run in a wwb browser and how to write a javascript code, so let’s answer all these questions.

Earlier Javascript was called as LiveScript but was renamed in 1995

HTML Script Tags

Script tags tell the web browser that the code inside script tag is a client side script, script tags can be used anywhere in the html page but it is mostly prefered to write script tags inside the head tags so that the script can be processed first before loading of the body elements.

See the syntax for script tags

<script>
//JavaScript code here
</script>

Identifying the scripting langauge

The scripting language in between the script tags could be javascript, Vbscript or some other langauge, Even though javascript is set default by most of the web browsers but there may be some browsers that do not default javascript, so to solve this problem we use the type attribute in the script tags, for example.

<script type="text/javascript">

//JavaScript code here

</script>

Calling external JavaScript

External javascript files are text files which contains only javascript code and nothing else and is saved with a .js extension. By calling an external file, you can save the time of coding or copying a long script into each page in which the script is needed. You can call an external javascript file by using the script tags for example

<script type="text/javascript" src="yourfile.js"></script>

The above code calls an external javascript file called yourfile.js, please note that the code should look exactly as i have written above no spaces allowed, in place of yourfile.js you can change it to your files location.

Creating your first script

Now you know enough about javascript to write your first javascript code, we are going to start with a "Hello world" script, code is shown below.

<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>
<body>
<script>
document.write("<p>Hello world</p>");
</script>
</body>
</html>

Save the file as hello.html and run it in your web browser.

The above code will print "Hello world" on your browsers screen:

document.write is a javascript function which takes an argument inside paranthesis(string) and prints it on the browser window, you can use html tags inside the document.write function for example in the above script we have created a paragraph containing "Hello world". Lets try to work with some more tags for example anchor tag.

<script>
document.write("<a href='http://www.psychocodes.in'>My website</a>");
</script>

The above code will create a link to www.psychocodes.in

Do it yourself

Try working with some more html tags inside the document.write() function.

Thank you for reading.

Tweet your queries and feedback to @PsychoCodes or leave a message on our Facebook page. You can also comment your questions below.

Also, don't forget to subscribe to our Newsletter.

If you like this article, then please share it and help us grow.


If You Love this article, You Should Consider:

  • Like us on Facebook
  • Follow us on Instagram
  • Follow us on Twitter
  • Subscribe to our Newsletter.
  • Let us know your suggestions and queries in the comments below.

Thank you for your Love and Support

Share your thoughts

Search
Adverstisement
Adverstisement