Hey!! Friends, welcome to our new article of Javascript tutorial. Here we will start from where we finished in the previous article. In the previews article, we talked about the fundamental part of javascript Tutorial for Beginners.
Here we started the tutorial with Variables, Operator.
If you missed the previous article, then check once JavaScript Tutorial.
| What’s inside: Placement Javascript code in HTML File Variable Operators FAQs: |
Placement Javascript code in HTML File
We can add the JavaScript code anywhere in an HTML document. There are not any restrictions for putting code in the file. However, the most preferred ways to include JavaScript in an HTML file are as follows −
- The Script tag in the <head>…</head> section.
- Script in <body>…</body> section.
- The Script tag in <body>…</body> and <head>…</head> sections.
- Script tag in an external file and then include in <head>…</head> section.
Javascript Variables
If you know any programming languages, then you are familiar with this word. The variables can be thought of as named containers. You can place the data into these containers and then refer to the data by merely naming the container.
The variable of JS is a “named storage” for data. We can use variables to store different data like goodies, visitors, and other data. It should be declared only once, and repeated declaration of the same variable is an error.
- Like other languages, variables in javascript are the identifiers to store data values in the code.
Var is the keyword for declaring a variable.‘=’Is the operator to assign a value to a variable.- The variable must start with _ or $ or letter. 99temp is an invalid type, whereas _99temp is a suitable type of declaration.
- In ES2015 (ECMAscript), there are two different ways to declare introduced variables- let and const. We can use these two keywords to define variables(now recommended).
Note: JavaScript have 63 keywords.
If you want to concatenate the string description of two variables’ values, use the + sign:
var val1='' Tom'';
var val2='' jerry'';
var val3= var1+var2;Try-it-out – 1
The Assigning two strings with values “This is,” “JavaScript.” Concatenate these strings. Find the length of the resultant string using “.length.”
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables Example</h2>
<p id="demo"></p>
<script>
var price1 ="This is";
var price2 = " Javascript";
var total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>Try-it-out – 2
Write a javascript program to convert ⁰C (Celsius) to ⁰F (Fahrenheit). You can prompt the user for input ⁰C using window.prompt. The formula for converting ⁰C to ⁰F is
F = (9 * C/5) + 32
var c=30;
var F=(9*c/5)+32;
console.log("Fahrenheit temp. is "+ F);JavaScript Operators
At first, we have to know that What is an Operator? The simple expression 5 + 5 is equal to 10. Here 5 and 5 are they called operands, and ‘+’ is called the operator.
JavaScript supports the following types of operators.
- Assignment operators
- Arithmetic operators
- Comparison operators
- Logical operators
- String operators
- Conditional operators
Assignment Operators in JavaScript
- The most programming languages = is the assignment operator.
- The Variables can be declared either by key var and value OR simply by assigning values directly. Ex – var x = 43; OR x = 43 ;
- An explicit type declaration is not necessary.
- The same variable can be put values of different data types. To know the kind of a variable, use the kind of operator.
For Example:
var x = "hello"; var x = true;
console.log(typeof x); //returns BooleanComparison Operators
- The JavaScript has operators like <, >, !=, >=, <= to compare 2 operands.
- What is unique about JavaScript is the == and === operators?
- The == compares the operands and returns true without considering their data type. Ex: var a = 10, b= “10”;
- If the (a==b) results are accurate due to the same value, they carry but ignores data types differentiation.
- However, if the (a===b) results are false as they are of different data types.
Standard Arithmetic Operators
The Arithmetic operators of JavaScript are used to perform arithmetic on numbers; several different Arithmetic operators are here:
| Operator | Description |
|---|---|
| + | Addition |
| – | Subtraction |
| * | Multiplication |
| ** | Exponentiation (ES2016) |
| / | Division |
| % | Modulus (Division Remainder) |
| ++ | Increment |
| — | Decrement |
- Addition + Ex: [5 + 8]
- Subtraction – Ex: [49 – 38]
- Division / Ex: [ 49 / 7]
- Multiplication * Ex: [28 * 2]
More on Arithmetic Operators
- The Modulus % to return the remainder of a division – Ex: 50 % 7 is 1
- Increment ++ to increment the operand itself by 1 – Ex: If x=4, x++ evaluates to 5
- The Decrement — to decrement the operand itself by 1 – Ex: if x= 10, x—- evaluates to 9
Logical Operators
In The javascript AND &&, OR ||, NOT ! are the logical operators often used during conditional statements to test the logic between variables?
-
Expr1 && Expr2 returns true if both are true, else returns false. Expr1 || Expr2 returns true if either is true.- The !Expr1 operates on a single operand to convert true to false and vice versa.
String Operator
The string operator is zero or more characters written inside quotes. You can also use the quotes inside a string, but always remember they should not match the string quotes:
For Example:
var answer1 = "It's alright";
var answer2 = "He is called 'Joe'";
var answer3 = 'He is called "Josh"';The Operator + is used to concatenate strings. x = “Hello”; y = ” World “; x + y; /* Returns “Hello World” *
String Length
The length of property returns the length of a string:
For Example:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Properties Example</h2>
<p>The length property of JS returns the length of a string=</p>
<p id="sample"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("sample").innerHTML = txt.length;
</script>
</body>
</html>Output of the following code:
JavaScript String Properties Example
The length property of JS returns the length of a string=
FAQs:
1. Is the given assignment a valid variable assignment? var product cost = 3.45;
Ans: No, there would be no space between the variable name.
2. Where is the ideal place to load the external JavaScript file in your HTML document?
Ans: Towards the end of the body to increase the performance of the webpage
3. What is true about variables?
Answer:- Variables are case sensitive
4. What is the value of C? var a = 100; var b = “10”; var c = a + b;
Answer:-10010
The variables, operators, are the starting stage of learning any programming languages. The forthcoming article will cover If..else and loops etc. of this JavaScript tutorial for beginners. JavaScript Tutorial for Beginners
Please stay with us on this journey :).