Hello World - Javascript
Learning how to create a 'hello world' script is normally the first step in learning any programming language.
It's important because it's simple, and it willbe difficult for you to advance to the more advanced javascript features without mastering the basics.
What we're going to do is very simple, we're simply going to insert the text "Hello World" somewhere in an html document.
First we want to create an empty script tag that we will use to store our javascript code:
<script type="text/javascript">
</script>
I've given it a "type" of text/javascript. This lets any browser know what will be contained in the <script> tag and how it should be interpretted.
document.write('Hello World');
Between the <script> tags, we'll put our javascript code.
Wwhat we've done is called on the "document" object (Which is the current page) and used the write() method with "Hello World" as a paramater.
That was a bit of a mouthful, so lets take it step by step.
The document itself is an object, write() is a paramater of the document object, in other words it is a function that lets you do something to the document object (write something to it in this case).
"Hello World" is a paramater of the write() method, a paramater is simply something that goes into the brackets of a function or method, which will act on it.
As you can see "Hello World" is surrounded by quotations, this means that you're telling the method that what you've typed in is a string (text) and not a variable (Variables will be discussed in a later chapter).
Below you can see the final code.
What we've done is tell the browser to select the document and write "Hello World" to it in the location where we placed the <script> tags.
<script type="text/javascript">
document.write('Hello World');
</script>
What you need to remember is that document.write() only runs when the page loads. If you try to run it again, the browser will recreate the page but only with the result of the document.write() command on the page.
But what if you want to display some text on the page at the press of a button?
That's where it gets a little bit more complicated (But only a little bit). To do this you need to learn how to manipulate the DOM (Document Object Model) and this will be covered in a seperate article.
Manipulating the DOM grants you complete access the the entire webpage without having to manually insert classes or ids (Though it's quite a bit easier if you intend on working with pre-existing classes and ids).
Through manipulating the DOM you can say something like the following if you want to:
"Insert the image x after the 3rd paragraph in the page".
No need to know the class or id of that 3rd paragraph, you simply need to select it and act on it.
This has been a simple tutorial on how to insert text into a page on pageload, the same result could have been achieved with an external javascript file, but I didn't go over this, just to keep it simple.
Learn To Code from Online Coding Courses
Online Course
React Native Chat App with Firebase - Firestore Course 2020
Online Course
No comments:
Post a Comment