Scribd Logo
Upload

Welcome to Scribd!

  • JavaScript Tutorial: Getting Started with Visual Studio Code

    Uploaded by

    denmark de vera
    13 views5 pages
    This document provides instructions for setting up a basic JavaScript environment using Visual Studio Code. It explains how to create an HTML file with script tags to write JavaScript code. Basic JavaScript concepts covered include using console.log() to output to the console, alert messages, variables, linking external JS files, and using getElementById() to modify the HTML document. The document directs the reader to a YouTube video for additional details on prompts and user input.

    Original Description:

    Original Title

    JAVASCRIPT TUTORIAL

    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 instructions for setting up a basic JavaScript environment using Visual Studio Code. It explains how to create an HTML file with script tags to write JavaScript code. Basic JavaScript concepts covered include using console.log() to output to the console, alert messages, variables, linking external JS files, and using getElementById() to modify the HTML document. The document directs the reader to a YouTube video for additional details on prompts and user input.

    Copyright:

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

    JavaScript Tutorial: Getting Started with Visual Studio Code

    Uploaded by

    denmark de vera
    This document provides instructions for setting up a basic JavaScript environment using Visual Studio Code. It explains how to create an HTML file with script tags to write JavaScript code. Basic JavaScript concepts covered include using console.log() to output to the console, alert messages, variables, linking external JS files, and using getElementById() to modify the HTML document. The document directs the reader to a YouTube video for additional details on prompts and user input.

    Copyright:

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

    JAVASCRIPT TUTORIAL

    Requirement
    Install Visual Studio Code

    Set Up
    Create a folder on your desktop as the folder for your project.
    Open the folder through the Visual Studio Code and create a file
    with .html extension. After creating your file name, type “doc”
    in and hit tab and save, and then you will have this lines of
    codes:

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        
    </body>
    </html>

    This is the bare bone of the html file where we can start our
    JavaScript program. First, is we have to create script tags
    <script></script> inside the body tags, like this,

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <script>
            
        </script>
    </body>
    </html>
    This is where we can store our JavaScript codes.

    Hello Word
    Inside the script tags, we will place our basic statement
    together with the string “Hello World” or “Hello Philippines”,
    like this:
    console.log('Hello Philippines!');

    To check if its running, right click the file name and select
    Open in Default Browser (or in other browser, depending on what
    other browser was installed in the computer). Or you can run the
    file inside the folder you created on your desktop.

    Once your default browser is open, right click and select


    “Inspect”, then you source code will be opened.
    In your source code, select the Console Tab and voila! here’s
    your string result:

    Alert Message

    To create an alert message in your browser, you can use the


    command “alert”, and then followed by the message, like this:

     <script>
            console.log('Hello Philippines!');
            console.log('Hello Philippines!');
            alert('Pree viet!');
        </script>

    Save the code and refresh your browser. That’s it!

    Linking JS and html files


    We can also link the JS file and the html with the same output as
    if the js code was created inside the html body. To do this, we
    can create a new file with js code (the same codes that we have
    created inside the html body):

    console.log('Hello Philippines!');
    alert('Mabuhay!')

    Once codes have been created, save the file using the extension
    “.js” . To check if the creation of the js file is successful, we
    can check the desktop folder we have created. It should display
    two files:

    Input the following lines into the html body, assuming that the
    name of the js file is home.

    <body>
        <script src="home.js"></script>
    </body>

    Refresh and run the browser.


    We can now focus on the newly created js file to add new codes
    here, which will be read by the html through the line of code we
    inserted.

    Variables
    In Javascript, variables can only be described by a single data
    type called “var”. This type covers both integers and string
    data. Example:

    var x = 'Jerome Macarilao';
    var z = 10;

    console.log('Hello ' + x);
    console.log(z);

    Document.GetElementbyID
    To modify html website through Javascript, we can use the
    getElementbyID command.
    You can also use any header tag depending on your preference.

    Prompt Command
    var name = prompt ('What is you name?');
    document.getElementById('sample').innerHTML = name;

    This prompt command displays an alert message asking a question,


    that once you insert the answer, your information will be
    displayed on the website.

    youtube.com/watch?v=Qqx_wzMmFeA
    to be continue from 15:50

    You might also like