Type/to search
0
Follow
20
Followers
Quick Start for JavaScript
Help
Created 2022-03-23 10:02:14  Updated 2022-03-23 15:12:15
 0
 957

Syntax Introduction

javascript
// The "console.log" in the text can be replaced by the Log function in the debugging of FMZ // The way of remarks is similar to C; this is a single line remark /* These are multi-line remarks */ // Statements can end with a semicolon doStuff(); // ... But the semicolon can also be omitted, whenever a new line is encountered, the semicolon is automatically inserted (except for some special cases) doStuff() // Because those special cases can cause unexpected results, we preserve the semicolon here /////////////////////////////////// // 1. Number, String and Operator // Javascript only has one number type (namely 64-bit IEEE 754 double) // double has 52 bits for fraction, precise enough to store integers as big as 9✕10¹⁵ 3; // = 3 1.5; // = 1.5 // All basic arithmetic operations work as you would expect 1 + 1; // = 2 0.1 + 0.2; // = 0.30000000000000004 8 - 1; // = 7 10 * 2; // = 20 35 / 5; // = 7 // Including division methods that are not evenly divisible 5 / 2; // = 2.5 // The bit operation is also same as that of other languages; when you do bit operation to the float // the float will convert into an unsigned integer *no more than* 32 bits 1 << 2; // = 4 // The grouping operator can control the precedence (1 + 3) * 2; // = 8 // There are three number types in non-numeric form Infinity; // the result of 1/0 -Infinity; // the result of -1/0 NaN; // the result of 0/0 // There is also boolean value true; false; // You can create strings by single or double quotation marks 'abc'; "Hello, world"; // Use operator ! to perform "logical NOT" operation !true; // = false !false; // = true // Strict equality === 1 === 1; // = true 2 === 1; // = false // Inequality != 1 !== 1; // = false 2 !== 1; // = true // More comparison operators 1 < 10; // = true 1 > 10; // = false 2 <= 2; // = true 2 >= 2; // = true // Use + to connect strings "Hello " + "world!"; // = "Hello world!" // You can also use < 、> to compare strings "a" < "b"; // = true // When using == to compare, the type will be converted "5" == 5; // = true null == undefined; // = true // ... except that you use === "5" === 5; // = false null === undefined; // = false // ... but that will result in a strange action 13 + !0; // 14 "13" + !0; // '13true' // You can use `charAt` to get the character in a string "This is a string".charAt(0); // = 'T' // ... or you can use `substring` to obtain a bigger part "Hello world".substring(0, 5); // = "Hello" // `length` is a property, so do not use (). "Hello".length; // = 5 // There are also two special values: `null` and `undefined` null; // To express the deliberately set null undefined; // To express the value not set yet (although `undefined` itself is actually a value) // false, null, undefined, NaN, 0 and "" are all false; others are regarded as logically true // Pay attention that 0 is logically false, while "0" is logically true, although 0 == "0" /////////////////////////////////// // 2. Variable, Array and Object // A variable needs to use the keyword `var` to make a declaration. Javascript is a dynamic programming language, // so you do not need to specify types and you assign with `=` var someVar = 5; // If you did not add `var` in the declaration, you will not get an error, either... someOtherVar = 10; // ... but the variable will be created in the global scope, not in the current scope defined by you // All variables without assignment will be set as undefined var someThirdVar; // = undefined // some abbreviated syntaxes for the math operations of variables: someVar += 5; // equal to someVar = someVar + 5; someVar now is 10 someVar *= 10; // now someVar is 100 // There are also abbreviations for auto-increment and auto-decrement someVar++; // someVar means 101 someVar--; // return to 100 // An array is an ordered list composed of any types var myArray = ["Hello", 45, true]; // The elements of an array can be accessed by the square brackets [] // The index of an array starts from 0 myArray[1]; // = 45 // An array is variable, with an variable length myArray.push("World"); myArray.length; // = 4 // Add or modify at the specified subscripts myArray[3] = "Hello"; // An object in javascript equals "dictionary" or "map" in other languages: it is a disordered collection of the key-value pair var myObj = {key1: "Hello", key2: "World"}; // Key is a string, but if the key itself is not a legal js identifier, the quotation mark is not necessary // The value could be any type var myObj = {myKey: "myValue", "my other key": 4}; // The object property can be accessed by subscripts myObj["my other key"]; // = 4 // ... or by '.', if the property is a legal identifier myObj.myKey; // = "myValue" // The object is variable; the value can also be modified or added with a new key myObj.myThirdKey = true; // If you want to obtain an undefined value, then return undefined myObj.myFourthKey; // = undefined /////////////////////////////////// // 3. Logic and Control Structure // The syntax introduced in this section is almost the same as that of Java // Statement `if` is the same as other languages var count = 1; if (count == 3){ // Execute when count is 3 } else if (count == 4){ // Execute when count is 4 } else { // Execute in other cases } // while loop while (true) { // infinite loop } // Do-while loop and While loop are similar, but the former at least will be executed once var input; do { input = getInput(); } while (!isValid(input)) // `for`loop is the same as that in C and Java: // Initialize; conditions for continuous execution; iteration for (var i = 0; i < 5; i++){ // Traverse 5 times } // && is logical AND; || is logical OR if (house.size == "big" && house.colour == "blue"){ house.contains = "bear"; } if (colour == "red" || colour == "blue"){ // Execute when colour is red or blue } // && and || are short circuit statements,which are very useful when setting initialization var name = otherName || "default"; // `switch` uses `===` to detect the equality // When each case is over, use 'break' // Or the case statement after the former will be executed grade = 'B'; switch (grade) { case 'A': console.log("Great job"); break; case 'B': console.log("OK job"); break; case 'C': console.log("You can do better"); break; default: console.log("Oy vey"); break; } /////////////////////////////////// // 4. Function, Scope and Closure // Function in JavaScript is defined by `function` function myFunction(thing){ return thing.toUpperCase(); } myFunction("foo"); // = "FOO" // Pay attention that the returned value has to start from the line of `return` // Or return `undefined`, due to the auto-completion of semicolon // Pay attention when you use Allman style function myFunction() { return // <- semicolon will automatically insert here { thisIsAn: 'object literal' } } myFunction(); // = undefined // Function in javascript is first class object, so function can be assigned to a variable // Also can be passed as parameter - such as a function processing an event: function myFunction(){ // This piece of code will be called after 5 seconds } setTimeout(myFunction, 5000); // Note: setTimeout is not a part of js language; it is provided by the browser and Node.js // The function object does not even need to declare its name - you can directly write the definition of one function into the parameters of another function setTimeout(function(){ // This piece of code will be called after 5 seconds }, 5000); // JavaScript has function scope; functions have their own scope and other codes do not have that if (true){ var i = 5; } i; // = 5 - not the undefined that we expect to get in other languages // That leads to theh mode of "immediately-invoked function expression" commonly used by people // Which can avoid some temporary variables spreading into the global scope (function(){ var temporary = 5; // We can access and modify the global object to access the global scope // In web browser, it is the object `window` // In other environments, such as Node.js, the name of the object can be different window.permanent = 10; })(); temporary; // Raise ReferenceError permanent; // = 10 // One of the most powerful functions of javascript is closure // If define one function in another function, then the inner function has the access privilege of all variables in the outer function // Even after the outer function is finished function sayHelloInFiveSeconds(name){ var prompt = "Hello, " + name + "!"; // The inner function is, by default, put in the local scope // Just like declared by `var` function inner(){ alert(prompt); } setTimeout(inner, 5000); // setTimeout is async, so sayHelloInFiveSeconds function will exit immediately // While setTimeout will call inner after that // However, for inner is "contained in form of closure" by sayHelloInFiveSeconds // inner can still access the variable `prompt`, when it is called in the final } sayHelloInFiveSeconds("Adam"); // "Hello, Adam!" will prompt after 5 seconds /////////////////////////////////// // 5. Object, Constructor and Prototype // Object can contains methods var myObj = { myFunc: function(){ return "Hello world!"; } }; myObj.myFunc(); // = "Hello world!" // When a function in the object is called, the function can access the object it depends on by `this` myObj = { myString: "Hello world!", myFunc: function(){ return this.myString; } }; myObj.myFunc(); // = "Hello world!" // But the environment the function accesses is actually its running environment, not the defined environment, that is, it really depends on how the function is called // So if the function is not in the context of the object when it is called, the operation of the function will fail var myFunc = myObj.myFunc; myFunc(); // = undefined // Correspondingly, a function can be specified as a method of an object, and be accessed by `this` // The member of the object, even if the function did not depend on the object when it is defined var myOtherFunc = function(){ return this.myString.toUpperCase(); } myObj.myOtherFunc = myOtherFunc; myObj.myOtherFunc(); // = "HELLO WORLD!" // When we call a function by `call` or `apply`, we can also specify an execution context for it var anotherFunc = function(s){ return this.myString + s; } anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!" // `apply` function is almost the same, and only one array in request to pass the parameter list anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!" // When a function receives a series of parameters, it is very useful if you want to pass an array Math.min(42, 6, 27); // = 6 Math.min([42, 6, 27]); // = NaN (uh-oh!) Math.min.apply(Math, [42, 6, 27]); // = 6 // But `call` and `apply` are just temporary. If we want the function to depend on the object, use `bind` var boundFunc = anotherFunc.bind(myObj); boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!" // `bind` can also be used to partially apply a function (currying) var product = function(a, b){ return a * b; } var doubler = product.bind(this, 2); doubler(8); // = 16 // When you call a function by `new`, an object will be created // And you can access the function by `this` // The function designed to be invoked like this is constructor var MyConstructor = function(){ this.myNumber = 5; } myNewObj = new MyConstructor(); // = {myNumber: 5} myNewObj.myNumber; // = 5

Read more

JavaScript: The Definitive Guide is a classic instructive reference book.

Related Recommendations
Comment
All comments (0)
No data
No data
  • 1
iPhone Download
Forums
PINE Language
© 2015 - ∞ INVENTOR PTE LTD (SG)