Home » News » JavaScript

JavaScript

JavaScript

Why Study JavaScript?

  1. HTML is a markup language that is used to specify the content of web pages.
  2. Use CSS to determine how web pages should be laid out.
  3. Web page behavior can be programmed using JavaScript.

Intro

Learn JavaScript is a great place to start if you’re new to the language

This course will teach you how to use JavaScript to create web applications.

In lessons, you’ll learn and practice new syntax, functions, and concepts step by step, with real-world applications in challenges and projects.

The first 77 lessons, challenges, and projects (the first 7 chapters) are completely free; after that, you’ll be asked to upgrade (a one-time purchase that grants you access for five years) if you want to access the entire course. By selecting the Trial icon in the top-right corner, you can access the payment page. Before upgrading, we urge that you finish the free trial.

This course is compatible with mobile, tablet, and desktop computers.

JavaScript Where To


The <script> Tag

In HTML, JavaScript code is inserted between <script> and </script> tags.

Example

<script>
document.getElementById(“demo”).innerHTML = “My First JavaScript”;
</script>

Old JavaScript examples may use a type attribute: <script type=”text/javascript”>.
The type attribute is not required. JavaScript is the default scripting language in HTML.


JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when “called” for.

For example, a function can be called when an event occurs, like when the user clicks a button.

You will learn much more about functions and events in later chapters.


JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.

Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.


JavaScript in <head>

In this example, a JavaScript function is placed in the <head> section of an HTML page.

The function is invoked (called) when a button is clicked:

Example

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
  document.getElementById(“demo”).innerHTML = “Paragraph changed.”;
}
</script>
</head>
<body>

<h2>Demo JavaScript in Head</h2>

<p id=”demo”>A Paragraph</p>
<button type=”button” onclick=”myFunction()”>Try it</button>

</body>
</html>

JavaScript Display Possibilities

JavaScript can “display” data in different ways:

  • Writing into an HTML element, using innerHTML.
  • Writing into the HTML output using document.write().
  • Writing into an alert box, using window.alert().
  • Writing into the browser console, using console.log().

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML content:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id=”demo”></p>

<script>
document.getElementById(“demo”).innerHTML = 5 + 6;
</script>

</body>
</html>

Changing the innerHTML property of an HTML element is a common way to display data in HTML.


Using document.write()

For testing purposes, it is convenient to use document.write():

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
document.write(5 + 6);
</script>

</body>
</html>

Using document.write() after an HTML document is loaded, will delete all existing HTML:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<button type=”button” onclick=”document.write(5 + 6)”>Try it</button>

</body>
</html>

The document.write() method should only be used for testing.

Using window.alert()

You can use an alert box to display data:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

You can skip the window keyword.

In JavaScript, the window object is the global scope object, that means that variables, properties, and methods by default belong to the window object. This also means that specifying the window keyword is optional:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>
<p>My first paragraph.</p>

<script>
alert(5 + 6);
</script>

</body>
</html>


Using console.log()

For debugging purposes, you can call the console.log() method in the browser to display data.

You will learn more about debugging in a later chapter.

Example

<!DOCTYPE html>
<html>
<body>

<script>
console.log(5 + 6);
</script>

</body>
</html>


JavaScript Print

JavaScript does not have any print object or print methods.

You cannot access output devices from JavaScript.

The only exception is that you can call the window.print() method in the browser to print the content of the current window.

Example

<!DOCTYPE html>
<html>
<body>

<button onclick=”window.print()”>Print this page</button>

</body>
</html>

JavaScript Statements


Example

let x, y, z;    // Statement 1
x = 5;          // Statement 2
y = 6;          // Statement 3
z = x + y;      // Statement 4


JavaScript Programs

computer program is a list of “instructions” to be “executed” by a computer.

In a programming language, these programming instructions are called statements.

JavaScript program is a list of programming statements.

In HTML, JavaScript programs are executed by the web browser.


JavaScript Statements

JavaScript statements are composed of:

Values, Operators, Expressions, Keywords, and Comments.

This statement tells the browser to write “Hello Dolly.” inside an HTML element with id=”demo”:

Example

document.getElementById(“demo”).innerHTML = “Hello Dolly.”;

Most JavaScript programs contain many JavaScript statements.

The statements are executed, one by one, in the same order as they are written.

JavaScript programs (and JavaScript statements) are often called JavaScript code.


Semicolons ;

Semicolons separate JavaScript statements.

Add a semicolon at the end of each executable statement:

Examples

let a, b, c;  // Declare 3 variables
a = 5;        // Assign the value 5 to a
b = 6;        // Assign the value 6 to b
c = a + b;    // Assign the sum of a and b to c

When separated by semicolons, multiple statements on one line are allowed:a = 5; b = 6; c = a + b;

On the web, you might see examples without semicolons.
Ending statements with semicolon is not required, but highly recommended.

JavaScript White Space

JavaScript ignores multiple spaces. You can add white space to your script to make it more readable.

The following lines are equivalent:let person = “Hege”;
let person=”Hege”;

A good practice is to put spaces around operators ( = + – * / ):let x = y + z;


JavaScript Line Length and Line Breaks

For best readability, programmers often like to avoid code lines longer than 80 characters.

If a JavaScript statement does not fit on one line, the best place to break it is after an operator:

Example

document.getElementById(“demo”).innerHTML =
“Hello Dolly!”;


JavaScript Code Blocks

JavaScript statements can be grouped together in code blocks, inside curly brackets {…}.

The purpose of code blocks is to define statements to be executed together.

One place you will find statements grouped together in blocks, is in JavaScript functions:

Example

function myFunction() {
  document.getElementById(“demo1”).innerHTML = “Hello Dolly!”;
  document.getElementById(“demo2”).innerHTML = “How are you?”;
}

In this tutorial we use 2 spaces of indentation for code blocks.
You will learn more about functions later in this tutorial.


JavaScript Keywords

JavaScript statements often start with a keyword to identify the JavaScript action to be performed.

Here is a list of some of the keywords you will learn about in this tutorial:

KeywordDescription
varDeclares a variable
letDeclares a block variable
constDeclares a block constant
ifMarks a block of statements to be executed on a condition
switchMarks a block of statements to be executed in different cases
forMarks a block of statements to be executed in a loop
functionDeclares a function
returnExits a function
tryImplements error handling to a block of statements

JavaScript keywords are reserved words. Reserved words cannot be used as names for variables.

Leave a Reply

Your email address will not be published.