Getting Started with JavaScript

5 Getting Started with JavaScript
5.1 Introduction
HTML: Responsible for Web page structure
CSS: Responsible for Web page aesthetics
JavaScript: Responsible for user interaction with the browser.
5.2 Javacript.
At 1994, Netscape developed the LiveScript language, the Navigator browser (the LiveScript language is implanted in the browser)
Microsoft's IE browser, then spent $2 billion to develop JScript

1995, Sun Company, launched jdk1.1. Talk about cooperation. livescript-"JavaScript

1998, US online acquisition of Netscape.

2003, directly off Netscape. Netscape 6.7 billion dollars. 20 million dollars to build a smart Fund (Firefox)

JavaScript JScript syntax is different. ECMA (European Manufacturers Union)

Syntax for SCIRPT:
1) Basic syntax (ECMA specification)
2) BOM programming (no unification)
3) DOM Programming (no unification)
--------------------------------------------------------------------------------------------------------------- --------

1.1 JavaScript uses
JavaScript comments: Single line//Multiple lines/* */
CSS comments: CSS Multiline Comment/* */
HTML comment:<!--Comment--

Common functions:
Alert ("Cue box");
document.write ("Output content to browser");

How to use javascript:
1) Internal javacript:
A) Use the <script> tag in the HTML page to write the JS content in the <script> tag body
b) Drawbacks: and HTML code mixed together, not good maintenance, not good reuse

2) external JavaScript (recommended)
Note: You cannot import using <script src= "01.js"/> Empty label mode

1.2 Variables and data types

1) Definition and assignment variables: var variable name = value;
var a = 10;
var a = 20;
var b = 3.14;
var c = ' C ';
var d = "Hello";
var e = true;
var f = new Object ();
Attention:
1) Use the var keyword to define variables, Var can be omitted, but it is not recommended to omit Var
2) variables can be defined repeatedly in JS, and the variables defined later will overwrite the previous variables.
3) JS is a weakly typed language, using var to define any data type
4) The type of the variable in JS is determined by the value of the variable, so only the non-assignable variable is defined, which is an unassigned variable (undefined).
A variable that is not assigned cannot be used

typeof (Variable): View the data type of the variable

2) JS data type classification:
A) Number: Number type regardless of integer or decimal
b) String: String type, regardless of character or string
C) Boolean
D) Object type

1.3 Type conversion function
String->number (integer): parserint (variable)
String->number (decimal): parserfloat (variable)

1.4 operator
1) Arithmetic operator: +-*/%
2) comparison operator: > < >= <= = =
3) Logical operators: && | | !
4) Three-mesh operator: expression? The result of true: false results


1.5 Flow control statements
/*
If statement
if (expression) {
Statement
}else{
Statement
}

The conditions can be:
Boolean value: true: Set; false: Not valid
Number: Non-0: established; 0: not established
String: Non-empty string: set; empty string: Not valid
Object: Non-null: set; NULL: not established
*/
/*
if (null) {
Alert ("condition");
}else{
Alert ("Condition not established");
}
*/


/*
Swtich statements
Swtich (variable) {
Case Option 1:
Statement
Break If it does not break, the following option's statement will continue
Case Option 2::
Statement
Break
Default
Default
}

Attention:
Condition of Case:
1) can be a constant. String,number
2) can be a variable. (Java is not a variable)
3) can be an expression (Java cannot)
*/
/*
var i = "B";
var B = "B";
switch (i) {
Case "a":
document.write ("You have selected a");
Break
Case B:
document.write ("You have selected B");
Break
Case "C":
document.write ("You chose C");
Break
Case "D":
document.write ("You have chosen D");
Break
Default
document.write ("You chose the other");
Break
}
*/
/*
var age = 20;
Switch (TRUE) {
Case AGE&GT;=18:
document.write ("He is an adult");
Break
Case AGE&LT;18:
document.write ("He is a minor");
Break
}
*/

/*
For statement:
for (initialization statement; Conditional judgment statement; Process Control statement) {
Loop Body Statement
}

Requirements: Print 10 times on page HelloWorld
Requirement: Sum of 1-100
*/
/*
var result = 0;
for (Var i=1;i<=100;i++) {
Result+=i;
}
document.write ("The result is:" +result);
*/

/*
While statement
Initialize statement
while (conditional judgment statement) {
loop body statement;
Conditional control statements;
}

Execution process:

Requirements: Print 10 times on the page HelloWorld;
*/
/*
var i = 1;
while (i<=5) {
document.write ("helloworld<br/>");
i++;
}
*/

/*
Do-while statements
initialization statements;
do{
loop body statement;
Conditional control statements;
}while (judging conditional statements)

Requirements: Print 10 times on the page HelloWorld;

*/

With statement: convenient function invocation
With (object) {
Method of directly writing an object without writing the name of the object
}


1.6 Functions

function definition:
Function name (formal argument list) {
Statement
}

Call Function:
Function name (actual argument list);

Attention:
1) JS functions are defined using a function, but the form parameter list cannot use var keyword
2) JS function can have a return value, directly return with return keyword, do not need to declare the return value type
3) JS does not have the concept of method overloading, the function defined later overrides the previous function.
4) The number of formal parameters and actual parameters in JS can be inconsistent and can still be called.
5) Each function of JS hides an array called arguments, which is used to receive the actual parameter values passed by the function call simultaneous.
6) After the arguments array receives the actual parameters, it assigns the formal parameters sequentially from left to right, if the actual parameter quantity is greater than the formal parameter, the remaining actual parameters are lost.

Attention:
Actual parameters < formal parameters: NaN
Actual parameters > Formal parameters: Take the previous actual parameters, the following parameters are missing

Case: Define a function, enter the month, you can query the number of days to the month
1,3,5,7,8,10,12 Otsuki 31 days
4,,6,9,11 Xiao Yue 30 days
2 small Month 28 days

1.7 Object-based programming
Built-in objects
1.String objects
Method One: Define a String Object
var str1 = new String ("Hello");
var str2 = new String ("Hello");
document.write ("Result:" + (STR1==STR2) + "<br/>");
ValueOf (): The method returns the contents of an object
document.write ("Result:" + (Str1.valueof () ==str2.valueof ()));

Way two:
var str1 = "Hello";
var str2 = "Hello";
document.write ("Result:" + (STR1==STR2) + "<br/>");

Common methods:
CharAt (Index): Returns the contents of the specified index
IndexOf (String): Returns the index position of the first occurrence of the specified character
LastIndexOf (String): Returns the index position of the last occurrence of the specified character
FontColor ("Red"): add color directly to a string
Split ("string"): Cuts a string with the specified string, returns an array of strings
SUBSTRING (start,end); Intercept string, start: Start index, end: Ending index
SUBSTR (Strat,[length]) intercept string, start: Start index Length: truncated string Lengths


Number Object
Method One: Define the Number Object
var num1 = new number (20);
var num2 = new number (20);
Way two:
var num1 = 20;
var num2 = 20;
Contrast
document.write ((num1==num2) + "<br/>");
document.write (Num1.valueof () ==num2.valueof ());


Boolean Object
var B1 = new Boolean (true);
var b2 = new Boolean (true);
document.write ((B1==B2) + "<br/>");
document.write (B1.valueof () ==b2.valueof ());


Math Object
Common methods:
1) ceil (): Rounding up. If you have a decimal part, direct +1.
2) Floor (): Rounding down. If there is a fractional part, the fraction is lost directly, poly integer digit
3) Round (): rounded rounding. Full 5 in one
4) Random (): Generates a random 0-1 decimal. Contains 0, does not contain 1
5) Max (): Returns the maximum value
6) min (): Returns the minimum value
var num = 3.50;
document.write (Math.ceil (num) + "<br/>");
document.write (Math.floor (num) + "<br/>");
document.write (Math.Round (num) + "<br/>");
document.write (Math.Round (Math.random () *100) + "<br/>");
document.write (Math.max (10,6,54,23,76) + "<br/>");
document.write (Math.min (10,6,54,23,76) + "<br/>");


Date Object
Date Created
var date = new Date (); Take the current system date time Java:simpledateformat object YYYY-MM-DD format
document.write (date); Default format
Format: June 01, 2015 15:12 30 seconds
Year
document.write (Date.getfullyear () + "year");
Month
document.write ((Date.getmonth () +1) + "month");
Day
document.write (Date.getdate () + "Day");
Week
document.write ("Week" +date.getday () + "&nbsp;");
When
document.write (date.gethours () + "Time");
Score of
document.write (date.getminutes () + "min");
Seconds
document.write (Date.getseconds () + "SEC");

<body>
The current date is: <span id= "Datetip" ></span>
</body>
<script type= "Text/javascript" >
function Gennewdate () {
The current time of generation of a system, format: 2015-06-01 15:22:30
var date = new Date ();
String for the current date time
var datestr = date.getfullyear () + "-" + (Date.getmonth () +1) + "-" +date.getdate () + "&nbsp;" +date.gethours () + ":" +date.getminutes () + ":" +date.getseconds ();
Put the date string in span
Get the Span object
var datetip = document.getElementById ("Datetip"); Read a label that is not loaded, cannot read the
Set the innerHTML property of a span to assign a value to span
DATETIP.INNERHTML=DATESTR;
}

Set the timer to call 1 tasks (functions) per number of milliseconds
Window.setinterval ("Gennewdate ()", 1000);
</script>



Array Object
Way one: Create an array
1.1 Specifying the array length
var arr = new Array (3);

1.2 Array length not specified, default 0 elements
var arr = new Array ();

1.3 Specifying specific content
var arr = new Array (Ten, "Hello", true);

Mode two: Do not need new, directly specify the content
var arr = [Ten, "Java", false];


Attention:
1) The length of the array changes as the element is added, without worrying about an exception where the index is out of bounds.
2) The array of JS can hold any type of element.

Common methods:
Join (String): Concatenate all the elements of an array with the specified string, eventually forming a new string
Reverse (): Reverses the elements in the array
Sort (): Sorting (numbers by small to large, letters by a-Z)

Common Properties: Length array

For-in statement (after the array is finished speaking, and the normal for loop traversal comparison):
for (var traversal in array) {

}
var arr = [10,20,30,40];
Function: Iterating through an array
Requirements: defining arrays for traversal

Getting Started with JavaScript