JavaScript Can Change HTML Content
JavaScript Can Change HTML AttributesJavaScript Can Change HTML Styles (CSS)
<script>
In HTML, JavaScript code must be inserted between <script> and </script> tags.
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
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.External JavaScript
NOTE-:External scripts cannot contain <script> tags.
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().
JavaScript Programs
- A computer program is a list of "instructions" to be "executed" by the computer.
- In a programming language, these program instructions are called statements.
- JavaScript is a programming language.
- JavaScript statements are separated by semicolons(Ending statements with semicolon is not required, but highly recommended.).
- Most JavaScript programs contain many JavaScript statements.
- The statements are executed, one by one, in the same order as they are written.
- JavaScript ignores multiple spaces. You can add white space to your script to make it more readable.
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
JavaScript is Case Sensitive
All JavaScript identifiers are case sensitive.
JavaScript Type Operators
typeof -> Returns the type of a variable
instanceof -> Returns true if an object is an instance of an object type
JavaScript Data Types
JavaScript variables can hold many data types: numbers, strings, objects and more:
var length = 16; // Numbervar lastName = "Johnson"; // Stringvar x = {firstName:"John", lastName:"Doe"}; // Object
var length = 16; // Numbervar lastName = "Johnson"; // Stringvar x = {firstName:"John", lastName:"Doe"}; // Object
JavaScript Objects
JavaScript objects are written with curly braces.
Object properties are written as name:value pairs, separated by commas.
Example
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Undefined
In JavaScript, a variable without a value, has the value undefined. The typeof is also undefined.
Example
var person; // Value is undefined, type is undefined
var person; // Value is undefined, type is undefined
Null
In JavaScript null is "nothing". It is supposed to be something that doesn't exist.
Unfortunately, in JavaScript, the data type of null is an object.
JavaScript Function Syntax
function name(parameter1, parameter2, parameter3) {
code to be executed
}
code to be executed
}
Function Invocation
The code inside the function will execute when "something" invokes (calls) the function:
- When an event occurs (when a user clicks a button)
- When it is invoked (called) from JavaScript code
- Automatically (self invoked)
Function Return
When JavaScript reaches a return statement, the function will stop executing.
JavaScript Objects
Object Properties
The name:values pairs (in JavaScript objects) are called properties.
The name:values pairs (in JavaScript objects) are called properties.
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
Accessing Object Properties
You can access object properties in two ways:
objectName.propertyName
or
objectName["propertyName"]
Accessing Object Methods
You access an object method with the following syntax:
objectName.methodName()
Automatically Global
If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.
Example
myFunction();
// code here can use carName
function myFunction() {
carName = "Volvo";
}
JavaScript Debugging
- console.log() Method
- Setting Breakpoints
- debugger Keyword
JavaScript Hoisting
- JavaScript Declarations are Hoisted
- In JavaScript, a variable can be declared after it has been used.
- In other words; a variable can be used before it has been declared.
Hoisting is JavaScript's default behavior of moving all declarations to the top of the current scope (to the top of the current script or the current function).
JavaScript Initializations are Not Hoisted
JavaScript only hoists declarations, not initializations.
Note-: Declare Your Variables At the Top
Hoisting is (to many developers) an unknown or overlooked behavior of JavaScript. If a developer doesn't understand hoisting, programs may contain bugs (errors). To avoid bugs, always declare all variables at the beginning of every scope.JavaScript Use Strict
Strict mode makes it easier to write "secure" JavaScript.
- Strict mode changes previously accepted "bad syntax" into real errors.
- As an example, in normal JavaScript, mistyping a variable name creates a new global variable. In strict mode, this will throw an error, making it impossible to accidentally create a global variable.
- In normal JavaScript, a developer will not receive any error feedback assigning values to non-writable properties.
- In strict mode, any assignment to a non-writable property, a getter-only property, a non-existing property, a non-existing variable, or a non-existing object, will throw an error.
"use strict";
x = 3.14; // This will cause an error
x = 3.14; // This will cause an error
Note-: The "use strict" directive is only recognized at the beginning of a script or a function.
Loading JavaScript in HTML
Use simple syntax for loading external scripts (the type attribute is not necessary):
<script src="myscript.js"></script>
Accessing HTML Elements
A consequence of using "untidy" HTML styles, might result in JavaScript errors.
These two JavaScript statements will produce different results:
var obj = getElementById("Demo")
var obj = getElementById("demo")
Never Declare Number, String, or Boolean Objects
Always treat numbers, strings, or booleans as primitive values. Not as objects.
Don't Use new Object()
- Use {} instead of new Object()
- Use "" instead of new String()
- Use 0 instead of new Number()
- Use false instead of new Boolean()
- Use [] instead of new Array()
- Use /()/ instead of new RegExp()
- Use function (){} instead of new Function()
Document Object Model
When html document is loaded in the browser, it becomes a document object. It is the root element that represents the html document. It has properties and methods. By the help of document object, we can add dynamic content to our web pageThe document object represents the whole html document.
To Understand Javascript engine follow the link
http://developer.telerik.com/featured/a-guide-to-javascript-engines-for-idiots/
