Blogpost

Published: 2020-06-24

My first JavaScript/HTML steps

JavaScript was originally created to manipulate HTML, the code a website is built of, that's what we are going to do now.

For this tutorial you need a text editor. I recommend using Visual Studio Code (VS code). Choose a directory on your computer and create a file named index.html. If you are using VS code open it, then hit "ctrl+n" in order to create a new file. Let's put some HTML into it.

First steps baby

Table of Contents

HTML

HTML (hypertext markup language) is a language to define layouts that are then visualized by a browser. Put some HTML in your index.html:

<h1 id="title">Hi sepp!</h1>
<p id="content">Look at my not so nice looking new webpage!</p>

Save your file (VS code "ctrl+s" name "index.html") and open it in the web-browser (navigate to your file location and double click it, if it doesn't work out, open a new tab in chrome or another browser and drag and drop it into it). Once you have opened your browser you see something like this:

HTML page preview

Good job, that's your first webpage. We are going to manipulate it using JavaScript in the next chapter.

Manipulate HTML with JavaScript

Add the following lines at the bottom of your index.html file:

<script>
    let title = document.getElementById('title');
    title.style.color = 'white';
    title.style.backgroundColor = 'grey';
</script>

First of all we add a new element to the HTML, the ""-tag wraps JavaScript-code that is executed by the browser. In the first line of this code (let title = document.getElementById('title');) we grab the element (in this case it's a h1-element) with id="title" and write it to the variable "title", this variable now represents the element with the text "Hi sepp!" in your browser. In the next line we manipulate the text color of this element by setting it to white. The line below we do a similar thing with the background color. If you now refresh your browser page (press ctrl+r within your web-browser) you can see that the colors of your first element have changed. The variable "title" of our example holds a "HTMLElement" and we manipulated a property of it. You can find a full list of all available properties here and some more here in case you feel ready to play with it. Otherwise let's move on together.

Your file will now have the following content:

<h1 id="title">Hi sepp!</h1>
<p id="content">Look at my not so nice looking new webpage!</p>

<script>
    let title = document.getElementById('title');
    title.style.color = 'white';
    title.style.backgroundColor = 'grey';
</script>

Call a method of an element

In the blogpost Learn programming, it's easy we learned what a function is, a method is almost the same thing, with the difference that it is attached to an object. We call a function by its name (ex. myFunction()), a method instead is called by the name of the object, followed a dot and the name of the function (ex. from the previous chapter document.getElementById('title')). "document" is the object, and "getElementById" is the method, in our example the method takes one parameter "'title'". Now let's call a method on our "title" variable/object. Append the following lines within the "script-tag".

let content = document.getElementById('content');
content.after(title);

Then hit ctrl+r in your browser and see what happend. In the first line we grabbed our "

"-tag with the id "content", then we called the method "after" on the content variable/object and passed the "title" variable/object as parameter. This told the browser to move the "title" object after the "content" object. It's that simple.

Your final file should now look like this:

<h1 id="title">Hi sepp!</h1>
<p id="content">Look at my not so nice looking new webpage!</p>
<script>
    let title = document.getElementById('title');
    title.style.color = 'white';
    title.style.backgroundColor = 'grey';
    let content = document.getElementById('content');
    content.after(title);
</script>

Conclusion

In this article you learned how to grab an element from a HTML-page you created, manipulate a property and call a method of it. Well done! 😊 Where to go next? You could try a course - https://www.codecademy.com/learn/learn-html.

Links

Sources

Tags

#javascript #learn_programming #html