What is JAVASCRIPT?

JavaScript is one of the top 3 languages a web developer must learn. JavaScript is a programming language that programs the behavior of web pages.

JavaScript is the world's most popular programming language.
JavaScript is the programming language of the Web.
JavaScript is easy to learn.

Changing HTML Elements

One of the most useful JavaScript HTML method is the getElementByID().

An example of this working is:

document.getElementById(“erovoutika”).innerHTML = “Hello Erovoutika!”
The example above selects the element with the id of “erovoutika” and changes the content of it to “Hello Erovoutika!”.

Changing HTML Attributes

You can also change the attribute of an element by indicating the attribute you want to change.

An example of this working is:

document.getElementById(“erovoutika”).style.fontSize = “35px”;
The example above changes the style attribute, specifically, the font size of the element to 35px making the element font larger.


Hiding Elements and Showing Elements

For hiding elements using JavaScript, a simple changing of the style attribute is all you need to do.

To demonstrate:

document.getElementById (“erovoutika”).style.display = “none”;

The example above hides the element with an ID of “erovoutika” by changing the style attribute, specifically the display style of the element to none. For showing the element again, we are just going to bring back the display of the style attribute to "block".

To demonstrate:

document.getElementById (“erovoutika”).style.display = “block”;

How to use JavaScript?

To use JavaScript, we are going to insert the <script> and </script> tag inside into either the <header> or <body> tag.

To demonstrate:

<!DOCTYPE html>
<html>
<head>
<script>
function erovoutikaFunc(){
document.getElementById(“Erovoutika”).innerHTML = “Hello Erovoutika”;
}
</script>
</head>
<body>
<p id="Erovoutika">Hello World!</p>
<button type="button" onclick="erovoutikaFunc()">Click</button>
</body>
</html>

External Javascript

JavaScript can also be placed in external files. Having an external JavaScript file can be very helpful when organizing your files. To make your external JavaScript included in your app, you can link the source of the external JavaScript.

To demonstrate:

This is the content of the External file named: myExternalScript.js

function erovoutika Function(){
document.getElementById(“erovoutika”).innerHTML = “General Erovoutika”
}
And this is the content of the main file:

<body>
<p id="erovoutika"></script>
<button type="button" onclick="erovoutikaFunction()">Click Me!</button>
<script src=”myExternalScript.js”></script>
</body>

The result of this code will be, upon clicking the button, the Hello There! Should be replaced with General Erovoutika.

You can also use the src attribute to reference JavaScript files from the web! As long as you entered the correct web address.

Outputting Data

There are several ways to display data in JavaScript, which are:

  • innerHTML – This is used to output data on HTML elements
  • document.write() – This is used to output data on HTML outputs
  • console.log() – This is used to output data on the browser console

With each of them having their advantages, like the console.log() is super helpful for debugging codes

JavaScript Values

There are two types of values in Javacript

  • Literals-Fixed Values
  • Variables-Variable Values

The most important syntax for Fixed Values or Literals are Numbers and Strings.
Variables are values that store data values. JavaScript uses the let, var, and const keywords to declare its variables.
To demonstrate:

let x = 10;
var y = 11;

To explain the code above, the we declared that x should have a value of 10 and that y with a value of 11.

JavaScript Comments

Comments are useful for the documentation of your JavaScript application, to put a comment on your application, you can put a double slash (//).

To demonstrate:

// console.log(“I’ll not be printed”)
console.log(“I’ll be printed”)

To explain the code above, the first console.log will not be printed since we put a double slash at the beginning of the line. You can also use a slash asterisk (/*) and asterisk slash (*/) to comment out multi-line block of code.

JavaScript Text Cases

JavaScript is a case-sensitive language meaning that firstName and firstname is not considered as a same variable.

JavaScript Functions and Events

A function is a block of JavaScript code that is executed when it is called.
For example, a function can be called when an event occurs, an event is when a user clicks a button somewhere on the website page.

JavaScript Operators

JavaScript uses arithmetic operators to perform computations.
To demonstrate:

(1 + 1) * 2

In an earlier example, you’ll see that we used = to declare the value of x, this is called assignment operator

JavaScript Names

Like any other programming languages, there are limitations on how you can name variables.

A JavaScript name must start with:

  • A letter, from A to Z or a to z
  • A dollar sign ($)
  • An underscore (_)

In an earlier example, you’ll see that we used = to declare the value of x, this is called assignment operator

JavaScript Functions

A function is a block of code that is designed to do a certain task. A function is executed when it is called somewhere in your JavaScript app.

To demonstrate:

function erovoutikaFunction(e1, e2){
return e1 + e2;
}
console.log(erovoutikaFunction(1, 2)) // 3

To explain the code above, the function erovoutikaFunction returns the sum of the two variables that the user have inputted within the function’s parameter.

Accessing Objects

There are two ways you can access a JavaScript object:

objectName.propertyName or objectName[“propertyName”]

Accessing Object Methods

To access an object method, you can call it together with the object name.

To demonstrate:

ErovoutikaIntern.fullName(); // John Doe

To explain the code above, the fullName method takes the firstName and lastName property of the erovoutikaIntern object.

Note: if you call the function without the parenthesis, it will show the method definition instead.

JavaScript Objects

Objects are variables too but objects can contain many types of values.

To demonstrate:

const erovoutikaIntern = { firstName: “John”,
lastName: “Doe”,
contactNumber: “09952112978” };

Object Methods

Objects can have methods that are like functions inside an object.

To demonstrate:

const erovoutikaIntern = { firstName: “John”,
lastName: “Doe”,
fullName: function() {return this.firstName + “ “ + this.lastName};

Conditional Statements

Conditional statements are used to perform different actions to a set of different conditions. In JavaScript we have these following conditional statements:

  • if – is executed when the specified condition is TRUE
  • else – is executed when the specified condition is FALSE
  • else if – is executed when the new specified condition is TRUE
  • switch – is executed when one of the many alternative blocks of code is true.

If Statement

is executed when the specified condition is TRUE.

To demonstrate:

var isDayTime = true
if (isDayTime == true) {
console.log(“Its daytime!”);
}

To explain the code above, the if condition checks if the variable isDayTime is true, which it is, so it will pass through this condition and outputs Its daytime!

Else Statement

is executed when the specified condition is FALSE.

To demonstrate:

var isDayTime = true
if (isDayTime == true) {
console.log(“Its daytime!”);
} else {
console.log(“Its nighttime!”);
}

To explain the code above, the if condition checks if the variable isDayTime is true, which is not true! So it moves to the else block where it outputs Its nighttime!.

Else If Statement

Is executed when the newly specified condition is TRUE.

To demonstrate:

var myNum = 5
if (myNum > 6) {
console.log(“Im greater!”)
}
else if (myNum < 6) {
console.log(“Im here!”)
}

To explain the code above, the if condition checks if the variable myNum is true, which is not! So it moves to the next condition in else if, upon checking, its true! So it will output Im here!.