Scribd Logo
Upload

Welcome to Scribd!

  • 8 views

    2 - Introduction To JS

    Uploaded by

    dany
    This document provides an introduction to JavaScript and how to make web pages interactive. It discusses: 1) JavaScript allows web pages to respond to user input like clicks or key presses, making pages dynamic rather than static. 2) The tutorial creates a basic JavaScript function to change the background color when buttons are clicked. It links the JavaScript file to HTML and calls the function on button clicks. 3) When the buttons are clicked, the JavaScript function is activated, changing the body background color to the parameter passed via the HTML button onclick attributes.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    2 - Introduction To JS

    Uploaded by

    dany
    8 views5 pages
    This document provides an introduction to JavaScript and how to make web pages interactive. It discusses: 1) JavaScript allows web pages to respond to user input like clicks or key presses, making pages dynamic rather than static. 2) The tutorial creates a basic JavaScript function to change the background color when buttons are clicked. It links the JavaScript file to HTML and calls the function on button clicks. 3) When the buttons are clicked, the JavaScript function is activated, changing the body background color to the parameter passed via the HTML button onclick attributes.

    Original Description:

    Original Title

    2 - Introduction to JS

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an introduction to JavaScript and how to make web pages interactive. It discusses: 1) JavaScript allows web pages to respond to user input like clicks or key presses, making pages dynamic rather than static. 2) The tutorial creates a basic JavaScript function to change the background color when buttons are clicked. It links the JavaScript file to HTML and calls the function on button clicks. 3) When the buttons are clicked, the JavaScript function is activated, changing the body background color to the parameter passed via the HTML button onclick attributes.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    8 views5 pages

    2 - Introduction To JS

    Uploaded by

    dany
    This document provides an introduction to JavaScript and how to make web pages interactive. It discusses: 1) JavaScript allows web pages to respond to user input like clicks or key presses, making pages dynamic rather than static. 2) The tutorial creates a basic JavaScript function to change the background color when buttons are clicked. It links the JavaScript file to HTML and calls the function on button clicks. 3) When the buttons are clicked, the JavaScript function is activated, changing the body background color to the parameter passed via the HTML button onclick attributes.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 5

    2017

    Introduction
    JavaScript to
    KAINOS WORK EXPERIENCE
    PETER MCAREE
    What is JavaScript?
    So far, we have covered off HTML & CSS. You should now know that both of these together,
    are how webpages are structured and styled.

    From the previous tutorials, you have created a number of different webpages using HTML
    & CSS. These pages that you have created all display static content. They don’t respond to a
    user clicking a mouse or typing a key.

    JavaScript is another programming language used to make web pages interactive or


    dynamic. It runs on the user’s computer and doesn’t require continual downloads (like
    reloading different web pages).

    Throughout this quick tutorial, you’ll learn about some of the functions of JavaScript and
    learn how to apply them to the webpages that you’ve already created. You’ll also get to
    explore a JavaScript library that has many built in functions that make our lives a lot easier
    when it comes to programming.

    2
    Kainos Work Experience
    Gettin’ Interactive
    We’re going to be using the same IDE that we have previously been using – Visual Studio
    Code.

    Just like it colour coded and provided us with type-ahead for HTML and CSS, it will also do
    the same with JS.

    Go ahead and open up VS Code in the same directory that we have been using before – the
    folder that you created on the desktop. Open up our index.html page that we created right
    at the start, the code should look a little similar to this:

    Go ahead and create two new buttons within the body of your HTML, just below the
    paragraph that we have on line 11. Save your file and open it up in a browser, it should look
    something like the following:

    3
    Kainos Work Experience
    Create a new file called ‘app.js’ in the same way that we’ve created files before. You’ll
    notice that JavaScript files have the extension .js, VS Code will recognise this.

    Write the following code in app.js:

    Now let’s quickly walk through what we’ve just written:

    ● Our keyword function in JS defines that we want to declare a function. A function in


    JS is a block of code that whenever it is called (or activated) will do something.
    ● changeBackgroundColour is the name of our function. This allows us to easily call it
    in our HTML.
    ● The brackets straight after the name is something called the parameters of the
    function. In this case, whenever we call the function in the HTML, we are going to
    put the colour we want the background change to within these – you’ll see what I
    mean when we look at the HTML.
    ● The curly braces define where the code to be executed starts and finishes.
    ● The code on line 2 is simply setting the background colour of the body to the colour
    that we pass through in the parameters. Think of it like:
    o <body style=”background-color: colour”></body>
    o Where colour is the parameter that we pass through.
    4
    Kainos Work Experience
    So now we have some JavaScript and we also have some HTML. How do we link the two
    together?

    Firstly, we need to link the JS file that we’ve just created to the HTML. This is done in a
    similar way to linking CSS files to the HTML, take a look:

    As you can see on line 5, we have inserted <script></script> tags. We have set the src
    attribute to the name of our JS file ‘app.js’. By doing this, we can now access any functions
    that we have written in our JavaScript file in our HTML.

    Now that we have linked the two files, we need to use the function that we have just
    created. Earlier on, you created two different buttons. What we want to do now is, when we
    click one button, we want to change the background colour to red and when we click the
    other one, we want to change it to yellow.

    Add the following to your HTML code where you have created your buttons:

    Save your files, view it in a browser and click the two buttons – does it work? What is
    happening?

    Let’s talk through our HTML:

    ● We have added the ‘onclick’ attribute to both of our buttons.


    ● As you can see, we are setting the onclick attribute to the name of our function:
    changeBackgroundColour().
    ● This calls/activates the function that we created in our JavaScript.
    ● And for the parameters, we are passing through a different colour for each button.

    5
    Kainos Work Experience

    You might also like