PRESSPHP | TUTORIAL | Your First Site

Your First Site - Intro to Javascript

Jun 19, 2017 The Village Geek Build Site, HTML, Introduction, Javascript, PHP Comment(s)

Hello There Pretty Brain …

In this tutorial, we’ll be looking at a beautiful programming language called Javascript.

Ok maybe this is a little biased ... But basically, we're just showing how Javascript works with PHP. Remember this is a blog on PHP and how we use it to build web apps. Learning Javascript will help you in the pursuit of building interactive web apps, and who knows; maybe after this tutorial, you too will be biased :).

For those following our Build Your Own Site series of tutorials. Get ready to write some code. As usual, we'll walk you through how to write your code and have it running just right.

Javascript is a programming language that can be embedded into web applications to make them more interactive. The language was initially web browser ridden, misunderstood, and a little under used. But recently, the language has taken quite big strides, and is now used in the web browser, web applications, server-side programming, mobile development, and now even desktop applications development, amongst many.

In this tutorial we’ll be looking at how Javascript can make a web page very interactive. Please open your text editor and and then open the page we were working on in the last tutorial; the Creating Our First Page tutorial. This was the page: http://localhost/. The page we started our development coding journey on.

Remember this ?

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

We are gonna create a test html element and use it to show how Javascript can interact with the components that make-up a page.

Copy and paste the following code under the “The content of the document……” text in your code.

<p id="test">Changing the HTML with Javascript</p>

This is a paragraph element. This is the element mostly used to contain and display text within a web page.

We’re going to write a little Javascript to change the text in our p tag (paragraph element) dynamically.

Copy and paste this code to your page, under the paragraph tag above:

<button type="button"
onclick="myFunction()">
Click me to display Date and Time.</button>

<script type="text/javascript">
    function myFunction() {
        document.getElementById('test').innerHTML = "Hello Geeky World";
    }
</script>

This is a button element, when clicked it changes the text in the p tag (the paragraph element) to “Hello Geeky World”. Alright we’ll take you through this step by step:

Take a look at the p tag above (<p id="test">Changing the HTML with Javascript</p>), the tag has an html attribute called id In our p tag; our id is “test”, because id=”test”. We target this attribute in the Javascript, to select and modify and element. Now take a look at the button tag, we have an attribute there called onclick This is an event, like onkeydown, onmouseover, onload and ofcourse onclick. The onclick event is fired when the element is clicked.

Alright, okay .. take a little breather, read that again and try and understand as much as you can. The more we do, the less daunting this will be for you.

We have attached the myFunction() function to the onclick event like this : onclick=”myFunction()” This means that when the button is clicked , the onclick event is fired, and myFunction handles the event. "myFunction handles the event” just means that the function in our script tags below; this function:
function myFunction() { document.getElementById('test').innerHTML = "Hello Geeky World"; }
is run on the element click event.

A function is a block of code written to perform a particular task. A function is run/executed when it’s called, in our case; myFunction is executed ‘on click’, when the button is being clicked.

Your page code should now look like this at this point:

<!DOCTYPE HTML>
<html>
<head>
<title>Title of the document</title>
</head>
    <body>
        The content of the document......
        <p id="test">Changing the HTML with Javascript</p>
        <button type="button"
        onclick="myFunction()">
        Click me to display Date and Time.</button>

        <script type="text/javascript">
            function myFunction() {
                document.getElementById('test').innerHTML = "Hello Geeky World";
            }
        </script>

    </body>
</html>

Copy the code above, update your own code in your text editor, and load the page in the browser. Do you see it ? the button and the paragraph ?

Click the button and the text in the paragraph will change from Changing the HTML with Javascript to Hello Geeky World … Oh yeah, that’s right!!

You've just done the things!!

"You have just changed html on your page using Javascript …"
The Village Geek

You have just changed html on your page using Javascript …

You did well. Go over the code and maybe the lesson, and try to understand what we did here.

In the next lesson, we’ll be digging a little deeper into Javascript, HTML, and a little CSS.

Cheerio ...
Cape Town, South Africa

Tutorials

Categories

TUTORIAL Your First Site - Intro to Javascript

Your First Site - Intro to Javascript

Reply to this discussion