Javascript Variables:
- Variables are placeholders to store value.
- Variable must be unique
- Variables are case sensitive
- Variable names can contain letters, digits, underscores, and dollar signs. Variables are case sensitive. Reserved words cannot be used in names. Names must begin with letter, $ or _
Variable Declaration:
- Variable x is storing the value 10 and variable y is storing the value "hello world!"
var x = 10;
var y = "hello world!";
- Many variables can be declared in same line.
- Multiple variable can span into multiple lines.
var firstName = "John",
lastName = "Doe",
age = 34;
Data Types: JavaScript offers different data types to hold different kind of values. However you don't need to specify any data type since JavaScript is a dynamic type language meaning javascript engine dynamically resolves the data type.
- String: to hold text values or characters/alphabets.
- Number: numeric values
- Boolean: false or true
- Undefined: Undefined value
- Null: No value or nothing.
Other data types supported by JavaScript are
- Objects, Arrays and RegExp
Here is the result of the code that shows all the data types and how to declare them in javascript.
Code that displays the above output.
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>JavaScript Data Types</h2>
<p>When adding a number and a string, JavaScript will treat the number as a string.</p>
<table>
<tr>
<td>
<label id="">Declare a string value. Value must be enclosed in double quotes or single quotes </label>
</td>
<td>
<label id="lblString"></label>
</td>
</tr>
<tr>
<td>
<label id="">Declare a numeric value. No quotes needed.</label>
</td>
<td>
<label id="lblNumeric"></label>
</td>
</tr>
<tr>
<td>
<label id="">If string is added to a number, number will be treated as a string </label>
</td>
<td>
<label id="lblStringNumber"></label>
</td>
</tr>
<tr>
<td>
<label id="">If number is added to a string, number will be treated as a string </label>
</td>
<td>
<label id="lblNumberString"></label>
</td>
</tr>
<tr>
<td>
<label id="">Calculations are made left to right </label>
</td>
<td>
<label id="lblSumLeft"></label>
</td>
</tr>
<tr>
<td>
<label id="">If numbers to be added come after string, they are treated as string </label>
</td>
<td>
<label id="lblSumToRight"></label>
</td>
</tr>
<tr>
<td>
<label id="">Apostrophe. For sing quote's use \' </label>
</td>
<td>
<label id="lblApostrophe"></label>
</td>
</tr>
<tr>
<td>
<label id="">Quotes can be used inside the text as long as surrounding quotes do not match </label>
</td>
<td>
<label id="lblQuotes"></label>
</td>
</tr>
</table>
<script>
var x = "John Doe";
document.getElementById("lblString").innerHTML = x;
var x = "20";
document.getElementById("lblNumeric").innerHTML = x;
var x = "John Doe " + 20;
document.getElementById("lblStringNumber").innerHTML = x;
var x = 20 + " John Doe ";
document.getElementById("lblNumberString").innerHTML = x;
var x = 20 + 20 +" John Doe ";
document.getElementById("lblSumLeft").innerHTML = x;
var x = " John Doe " + 20 + 20;
document.getElementById("lblSumToRight").innerHTML = x;
var x = "I'm done. " + "<br>" + 'I\'m done too.'
document.getElementById("lblApostrophe").innerHTML = x;
var x = "My name is 'Dave'" + "<br>" + 'My name is "Dave"'
document.getElementById("lblQuotes").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
td {
height: 50px;
vertical-align: bottom;
}
</style>
</head>
<body>
<h2>Numbers, Arrays and Objects</h2>
<table>
<tr>
<td>
<label id="">Numbers can be written without decimals or with decimals.
<br>
Large numbers can be written as exponentials.
<br>
Boolean can have two values: True or False</label>
</td>
<td>
<label id="lblDecimal"></label>
</td>
</tr>
<tr>
<td>
<label id="">Array is used to define similar values.</label>
</td>
<td>
<label id="lblArray"></label>
</td>
</tr>
<tr>
<td>
<label id="">Object is written as name:value seperated by commas</label>
</td>
<td>
<label id="lblObject"></label>
</td>
</tr>
<tr>
<td>
<label id="">Undefined and null have same value but both are of different data type.</label>
</td>
<td>
<label id="lblNull"></label>
</td>
</tr>
<table>
<script>
var x1 = 23.00;
var x2 = 23;
var x3 = 23.67;
var x4 = 123e5;
var x5 = 123e-5;
var x = 5;
var y = 5;
var z = 6;
document.getElementById("lblDecimal").innerHTML = x1 + "<br>" + x2 + "<br>" + x3 + "<br>" + x4 + "<br>" + x5 + "<br>" + (x == y) + "<br>" + (x == z);
var states = ["NY", "NJ", "Virginia"]
document.getElementById("lblArray").innerHTML =states[0];
var employee = {firstName : "Doug", lastName : "Douglus", age : 50, deptt : "HR"};
document.getElementById("lblObject").innerHTML =
employee.firstName + employee.lastName + " is " + employee.age + " years old.";
document.getElementById("lblNull").innerHTML = typeof undefined + "<br>" + typeof null
</script>
</body>
</html>
No comments:
Post a Comment