Scribd
Upload
47 views5 pages

Javascript Tutorial: Requirement Set Up

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.

Uploaded by

denmark de vera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
47 views5 pages

Javascript Tutorial: Requirement Set Up

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.

Uploaded by

denmark de vera
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 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