Javascript language basics
-
Upload
farhan-faruque -
Category
Software
-
view
130 -
download
0
Transcript of Javascript language basics
![Page 1: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/1.jpg)
Javascript - Language BasicsFarhan Faruque
![Page 2: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/2.jpg)
SyntaxECMAScript’s syntax borrows heavily from C and other C-like languages such as Java and Perl.
![Page 3: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/3.jpg)
Case-sensitivity
In Javascript,everything is case-sensitive
![Page 4: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/4.jpg)
Identifiers➢ The first character must be a letter, an underscore (_), or a dollar
sign ($)➢ All other characters may be letters, underscores, dollar signs, or
numbers.By convention, ECMAScript identifiers use camel case
firstSecondmyCardoSomethingImportant
![Page 5: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/5.jpg)
Strict ModeStrict mode is a different parsing and execution model for JavaScript, where some of the erratic behavior of ECMAScript 3 is addressed and errors are thrown for unsafe activities.
To enable strict mode for an entire script, include the following at the top:“use strict”;
![Page 6: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/6.jpg)
Statementsvar sum = a + b //valid even without a semicolon - not recommendedvar diff = a - b; //valid - preferred
if (test)alert(test); //valid, but error-prone and should be avoided
if (test){alert(test); //preferred
}
![Page 7: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/7.jpg)
DATA TYPESThere are five simple data types (also called primitive types) in ECMAScript:➢ Undefined➢ Null➢ Boolean➢ Number➢ String There is also one complex data type called Object, which is anunordered list of name-value pairs.
![Page 8: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/8.jpg)
The typeof OperatorECMAScript is loosely typedUsing the typeof operator on a value returns one of the following strings:➢ “undefined” if the value is undefined➢ “boolean” if the value is a Boolean➢ “string” if the value is a string➢ “number” if the value is a number➢ “object” if the value is an object (other than a function) or null➢ “function” if the value is a function
![Page 9: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/9.jpg)
The Undefined TypeThe Undefined type has only one value, which is the special value undefined. var message;alert(message == undefined); //true
The typeof operator returns “undefined” when called on an uninitialized variable, but it also returns “undefined” when called on an undeclared variablevar message; //this variable is declared but has a value of undefinedalert(typeof message); //”undefined”alert(typeof age); //”undefined”
![Page 10: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/10.jpg)
The Null TypeThe Null type is the data type that has only one value: the special value null.a null value is an empty object pointer, which is why typeof returns “object” when it’s passed a null value in the following example:
var car = null;alert(typeof car); //”object”alert(null == undefined); //true
Any time an object is expected but is not available, null should beused in its place.
![Page 11: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/11.jpg)
The Boolean TypeThe Boolean type has only two literal values: true and false.All types of values have Boolean equivalents in ECMAScript.>> var message = “Hello world!”;>> var messageAsBoolean = Boolean(message);
DATA TYPE VALUES CONVERTED
TO TRUE VALUES CONVERTED VALUES CONVERTED TO FALSE
Boolean true false
String Any nonempty string “” (empty string)
Number Any nonzero number (including infinity)
0, NaN
Object Any object null
Undefined n/a Undefined
![Page 12: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/12.jpg)
The Number TypeNumber, which uses the IEEE-754 format to represent both integers and floating-point valuesvar intNum = 55; //integervar octalNum1 = 070;//octal for 56var hexNum1 = 0xA; //hexadecimal for 10
- Octal literals are invalid when running in strict mode and will cause the JavaScript engine to throw a syntax error.
![Page 13: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/13.jpg)
Floating-Point Valuesvar floatNum1 = 1.1;var floatNum2 = 0.1;var floatNum3 = .1;//valid, but not recommendedvar floatNum2 = 10.0; //whole number - interpreted as integer 10
For very large or very small numbers, floating-point values can be represented using e-notation.var floatNum = 3.125e7; //equal to 31250000var floatNum = 3e-17 ; //equal to 0.00000000000000003By default, ECMAScript converts any floatingpoint value with at least six zeros after the decimal point into e-notation
![Page 14: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/14.jpg)
Range of ValuesThe smallest number that can be represented in ECMAScript is stored in Number.MIN_VALUE5e-324 on most browsersthe largest number is stored in Number.MAX_VALUE1.7976931348623157e+308 on most browsers
- a number that cannot be represented by JavaScript’s numeric range, the number automatically gets the special value of Infinity.
To determine if a value is finite there is the isFinite() function.
![Page 15: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/15.jpg)
NaNNaN, short for Not a Number- indicate when an operation intended to return a number has failed. In ECMAScript, dividing a number by 0 returns NaN, which allows other processing to continue.NaN properties -
- any operation involving NaN always returns NaN- NaN is not equal to any value, including NaN.
ECMAScript provides the isNaN() function -to determine if the value is “not a number.”
alert(isNaN(NaN)); //truealert(isNaN(10)); //false
![Page 16: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/16.jpg)
Number ConversionsThree functions to convert nonnumeric values into numbers:➢ Number() casting➢ parseInt() function➢ parseFloat() fuction
Number() function performs conversions based on these rules:➢ Boolean values, true and false get converted into 1 and 0➢ null, Number() returns 0➢ undefined, Number() returns NaN.➢ strings, the following rules are applied:
➔ If the string contains only numbers, optionally preceded by a plus or minus sign, it is always converted to a decimal number
➔ string contains a valid floating-point format, such as “1.1”, it is converted into the appropriate floating-point numeric value
![Page 17: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/17.jpg)
Number Conversions➢ the string contains a valid hexadecimal format, such as “0xf”, it is
converted into an integer that matches the hexadecimal value➢ string is empty (contains no characters), it is converted to 0➢ string contains anything other than these previous formats, it is
converted into NaN.- when applied to objects, the valueOf() method is called and the returned value is
converted based on the previously described rules. If that conversion results in NaN, the toString() method is called and the rules for converting strings are applied.
var num1 = Number(“Hello world!”); //NaN
var num2 = Number(“”); //0
var num3 = Number(“000011”); //11
var num4 = Number(true); // 1
![Page 18: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/18.jpg)
parseInt() The parseInt() function examines the string much more closely to see if it matches a number pattern -
var num1 = parseInt(“1234blue”); //1234var num1 = parseInt(“”);//NaNvar num1 = parseInt(“0xA”);//10 - hexadecimalvar num1 = parseInt(22.5);//22var num1 = parseInt(“70”);//70 - decimalvar num1 = parseInt(“0xf”); //15 - hexadecimal
All of the different numeric formats can be confusing to keep track of. so parseInt() provides a second argument: the radix (number of digits) to usevar num = parseInt(“0xAF”, 16); //175
![Page 19: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/19.jpg)
parseFloat()works in a similar way to parseInt()
var num1 = parseFloat(“1234blue”); //1234var num1 = parseFloat(“0XA”);//0var num1 = parseFloat(“0908.5”); // 908.5var num1 = parseFloat(22.5);//22.5var num1 = parseFloat(“22.34.5”);//22.34var num1 = parseFloat(“3.125e7”); //31250000
Hexadecimal numbers always become 0. Because parseFloat() parses only decimal values, there is no radix mode.
![Page 20: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/20.jpg)
The String TypeStrings can be delineated by either double quotes (“) or single quotes (‘), so both of the following are legal:
var firstName = “Nicholas”;var lastName = ‘Zakas’;
The Nature of Strings- Strings are immutable
Converting to a String- use the toString() method toString() actually accepts a single argument: the radix in which to
output the number.
![Page 21: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/21.jpg)
String() casting The String() function follows these rules:➢ If the value has a toString() method, it is called (with no
arguments) and the result is returned.➢ If the value is null, “null” is returned.➢ If the value is undefined, “undefined” is returned.
![Page 22: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/22.jpg)
The Object Typevar o = new Object();var o = new Object; //legal, but not recommended
Object instance has the following properties and methods: ➢ constructor➢ hasOwnProperty(propertyName)➢ isPrototypeOf(object)➢ propertyIsEnumerable(propertyName)➢ toLocaleString()➢ toString() ➢ valueOf()
![Page 23: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/23.jpg)
OPERATORS
Operators are unique in ECMAScript in that they can be used on a wide range of values, including strings, numbers, Booleans, and even objects.
operators typically call the valueOf() and/or toString() method to retrieve a value
![Page 24: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/24.jpg)
Increment/Decrementtaken directly from C and come in two versions: prefix and postfix.The increment and decrement operators follow these rules regarding values:● When used on string that is a valid number then convert to numbers.
Variable is changed to number.● When used on string that is not a valid number then variable value change
to NaN● When used on Boolean - 0 for false ,1 for true. ● When used on an object, call its valueOf() method.if it returns NaN then
call toString() methods apply string rules.
![Page 25: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/25.jpg)
Logical NOT
alert(!false); //truealert(!”blue”); //false
alert(!!false); //falsealert(!!”blue”); //true
operand return
object false
empty string
true
nonempty string
false
number 0 true
any number other than 0
false
null true
undefined true
![Page 26: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/26.jpg)
Logical ANDWhen either operand is not a primitive Boolean, logical AND does not always return a Boolean value; instead, it does one of the following:➢ If the first operand is an object, then the second operand is always
returned.➢ If the second operand is an object, then the object is returned only if the
first operand evaluates to true .➢ If both operands are objects, then the second operand is returned.➢ If either operand is null , then null is returned.➢ If either operand is NaN , then NaN is returned.➢ If either operand is undefined , then undefined is returned.The logical AND operator is a short-circuited operation, meaning that if the first operand determines the result, the second operand is never evaluated.
![Page 27: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/27.jpg)
Logical ORif either operand is not a Boolean, logical OR will not always return aBoolean value; instead, it does one of the following:➢ If the first operand is an object, then the first operand is returned.➢ If the first operand evaluates to false , then the second operand is
returned.➢ If both operands are objects, then the first operand is returned.➢ If both operands are null , then null is returned.➢ If both operands are NaN , then NaN is returned.➢ If both operands are undefined , then undefined is returned.the logical OR operator is short-circuited. In this case, if the first operand evaluates to true,the second operand is not evaluated.
![Page 28: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/28.jpg)
Multiplicative OperatorsThere are three multiplicative operators in ECMAScript: multiply, divide, and modulus.
- These operators work in a manner similar to other languages but they also include some automatic type conversions when dealing with nonnumeric values.
![Page 29: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/29.jpg)
Multiplythe multiply operator also has the following unique behaviors when dealing with special values:
Operand-1 Operand- 2 Result
Number Number regular arithmetic multiplication
NaN any operand NaN
Infinity 0 NaN
Infinity any number other than 0 Infinity or – Infinity , depending on the sign of the second operand
Infinity Infinity Infinity
not number/anything not number/anything Number() casting calls
![Page 30: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/30.jpg)
Dividethe divide operator also has the following unique behaviors when dealing with special values:
Operand-1 Operand- 2 Result
Number Number regular arithmetic multiplication
NaN/any operand any operand/Nan NaN
Infinity Infinity Infinity
0 0 NaN
nonzero finite number 0 Infinity or – Infinity
Infinity any number Infinity or – Infinity
not number/anything not number/anything Number() casting calls
![Page 31: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/31.jpg)
Modulusthe divide operator also has the following unique behaviors when dealing with special values:
dividend divisor Result
Number Number regular arithmetic multiplication
infinite number finite number NaN
finite number 0 NaN
Infinity Infinity NaN
finite number infinite number dividend
0 nonzero 0
not number/anything not number/anything Number() casting calls
![Page 32: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/32.jpg)
Addthe divide operator also has the following unique behaviors when dealing with special values:
Operand-1 Operand- 2 Result
NaN NaN NaN
Infinity Infinity Infinity
–Infinity –Infinity –Infinity
+0 +0 +0
+0 -0 +0
-0 +0 +0
-0 -0 -0
![Page 33: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/33.jpg)
Addone of the operands is a string, then the following rules apply:➢ If both operands are strings, the second string is concatenated to the first.➢ If only one operand is a string, the other operand is converted to a string
and the result is the concatenation of the two strings.➢ If either operand is an object, number, or Boolean, its toString()
method is called to get a string value and then the previous rules regarding strings are applied.
![Page 34: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/34.jpg)
Subtractthe divide operator also has the following unique behaviors when dealing with special values:
Operand-1 Operand- 2 Result
number number normal arithmetic
NaN NaN NaN
Infinity infinity Nan
-Infinity -infinity Nan
-Infinity infinity Infinity
Infinity -infinity Infinity
string/Boolean/null/undefined string/Boolean/null/undefined Number() casting calls
![Page 35: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/35.jpg)
Subtractobject / any operand object / any operand valueOf() method is called
+0 +0 +0
-0 +0 -0
-0 -0 +0
![Page 36: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/36.jpg)
Relational OperatorsThe less-than ( < ), greater-than ( > ), less-than-or-equal-to ( <= ), and greater-than-or-equal-to ( >= )there are some conversions and other oddities that happen when using different data types. They are as follows:Operand -1 Operand-2 Result
number number numeric comparison
string string compare the character codes of each corresponding character in the string.
number any operand convert second operand to number and do comparison
object any operand call valueOf()if not available call toString()
Boolean any operand convert it to a number and perform the comparison
![Page 37: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/37.jpg)
Relational Operators➢ Whenever a number is compared to a string, the string is converted
into a number and then numerically compared to the other number.
var result = “a” < 3; //false because “a” becomes NaN
![Page 38: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/38.jpg)
Equality OperatorsOriginally ECMAScript’s equal and not-equal operators performed conversions into like types before doing a comparison.When performing conversions, the equal and not-equal operators follow these basic rules:➢ If an operand is a Boolean value, convert it into a numeric value before checking
for equality. A value of false converts to 0, whereas a value of true converts to 1.➢ If one operand is a string and the other is a number, attempt to convert the string
into a number before checking for equality.➢ If one of the operands is an object and the other is not, the valueOf() method is
called on the object to retrieve a primitive value to compare according to the previous rules.
![Page 39: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/39.jpg)
Equality OperatorsExpression
null == undefined true
“NaN” == NaN false
5 == NaN false
NaN == NaN false
false == 0 true
true == 2 false
undefined == 0 false
null == 0 false
“5” == 5 true
![Page 40: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/40.jpg)
Identically Equal and Not Identically Equal
The identically equal and not identically equal operators do the same thing as equal and not equal,except that they do not convert operands before testing for equality.
var result1 = (“55” == 55); //true - equal because of conversionvar result2 = (“55” === 55); //false - not equal because different data types
null === undefined is false because they are not the same type
![Page 41: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/41.jpg)
The for-in StatementThe for-in statement is a strict iterative statement. It is used to
enumerate the properties of an object.
for (var propName in window) {document.write(propName);
}
Object properties in ECMAScript are unordered
![Page 42: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/42.jpg)
Labeled Statements
start: for (var i=0; i < count; i++) {alert(i);
}
![Page 43: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/43.jpg)
The with StatementThe with statement sets the scope of the code within a particular object.each variable inside the statement is first considered to be a local variable. If it’s not found to be a local variable, the location object is searched to see if it has a property of the same name.
var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;
with(location){var qs = search.substring(1);var hostName = hostname;var url = href;
}
![Page 44: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/44.jpg)
The switch Statementswitch statement says, “If the expression is equal to the value, execute the statement.”
Although the switch statement was borrowed from other languages, it has some unique characteristics in ECMAScript. First, the switch statement works with all data types , so it can be used with strings and even with objects.
![Page 45: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/45.jpg)
FUNCTIONSFunctions are the core of any language, because they allow the encapsulation of statements that can be run anywhere and at any time.
Strict mode places several restrictions on functions:➤ No function can be named eval or arguments .➤ No named parameter can be named eval or arguments .➤ No two named parameters can have the same name.
![Page 46: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/46.jpg)
FUNCTIONS- An ECMAScript function doesn’t care how many arguments are passed in,
nor does it care about the data types of those arguments.- arguments in ECMAScript are represented as an array internally.- there actually is an arguments object that can be accessed while inside a
function to retrieve the values of each argument that was passed in- The arguments object acts like an array- changing the named argument does not result in a change to the
corresponding value in arguments .- the length of the arguments object is set based on the number of
arguments passed in, not the number of named arguments listed for the function.
- Any named argument that is not passed into the function is automatically assigned the value undefined.
![Page 47: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/47.jpg)
No OverloadingECMAScript functions cannot be overloaded in the traditional sense.
If two functions are defined to have the same name in ECMAScript, it is the last function that becomes the owner of that name.
![Page 48: Javascript language basics](https://reader033.fdocuments.net/reader033/viewer/2022042607/55a947531a28abb03e8b4761/html5/thumbnails/48.jpg)
Reference