– introduction of JavaScript
-
HTML, CSS, JavaScript (JS) are called the front three
-
HTML: Framework (which is a markup language)
-
Style of CSS:
-
JavaScript: Behavior (dynamically modifying HTML and CSS)
-
-
What can JavaScript do
- All dynamic effects on the page are made by JS
-
JavaScript is an interpreted programming/scripting language
-
The code can run without precompiling and with a browser
-
JavaScript is a weak language and its syntax is not as rigorous as Java’s
-
-
Relationship between JavaScript and Java
- Is the name is a bit similar, the name has origins, you can baidu
-
The development tools
- Hbuiler /hbuilerx: Writing small programs is convenient
- VScode: professional front-end tools
- Eclipse: No hint
- Idea: Hints are powerful
– Two ways to test JS
-
1. Create a static WEB project. After writing the HTML page, deploy the static WEB project
-
2. Drag the HTML page directly into the browser
– JavaScript can be written in three ways
-
Prepare a static Web project and write an HTML file
-
The first kind: embedded type
- In the body, use the A tag to implement javascript functionality
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<! Void (0); void(0); The href of the a tag is itself the jump path. If I set this value, I'm going to tell the a tag not to jump, just to execute my javascript code. Only a tag needs to set the jump path to no jump, other element tags can directly write JS code -->
<a href="javascript:void(0);" onclick="Alert" (' What are you... ')" >Point me ！！！！</a>
</body>
</html>
Copy the code-
The second,
- Use the script tag in the head tag
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! If you use script, and type is text/javascript, you can write JS code directly in the tag, which will be executed when the page loads.
<script type="text/javascript">
// tags can be used to write JS code, and when the page is executed from top to bottom, js code is executed directly
alert("The second way, I keep popping...")
</script>
</head>
<body>
<! Void (0); void(0); The href of the a tag is itself the jump path. If I set this value, I'm going to tell the a tag not to jump, just to execute my javascript code. Only a tag needs to set the jump path to no jump, other element tags can directly write JS code -->
<a href="javascript:void(0);" onclick="Alert" (' What are you... ')" >Point me ！！！！</a>
</body>
</html>
Copy the code- The third kind of
- External import: The import of external JS code via script tags
- Creating a JS file
alert("Third way: I jump out from the outside...")
Copy the code- Introduced in HTML
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! -- Third way: external import, by importing JS files, execute JS code -->
<script type="text/javascript" src="01_js.js"></script>
<! If you use script, and type is text/javascript, you can write JS code directly in the tag, which will be executed when the page loads.
<script type="text/javascript">
// tags can be used to write JS code, and when the page is executed from top to bottom, js code is executed directly
alert("The second way, I keep popping...")
</script>
</head>
<body>
<! Void (0); void(0); The href of the a tag is itself the jump path. If I set this value, I'm going to tell the a tag not to jump, just to execute my javascript code. Only a tag needs to set the jump path to no jump, other element tags can directly write JS code -->
<a href="javascript:void(0);" onclick="Alert (' First way: Click on your... ')" >Point me ！！！！</a>
</body>
</html>
Copy the code- Matters needing attention:
-
All three can be used, but the third is recommended because of the separation of responsibilities
-
Script is double-labeled, do not use single-labeled methods
-
Tags that introduce external JS can no longer write JS code internally and will be overwritten
-
– JavaScript variable
-
In the learning process of Java grammar, we declare variables explicitly declare a specific type of the keyword, and declare variables in JS is the use of the var keyword, no matter what kind of data type of variables, can use the var keyword to declare;
-
grammar
-
Var Variable name; Declare variables
-
Var Variable name = value; Declare variables and assign values
-
Declared assigned variable = value of another type; [Not recommended]
-
Do not declare variable = value; Used directly without declaring variables beforehand
-
-
The sample code
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! -- js variables define variables in Java using the keyword: string int Boolean... Define variables in JS, use: var keyword, there is a retention word in JS -->
<script type="text/javascript">
/* Define three types of variables */
var a = "Zhang Sanfeng";
var b = 18;
var c = true;
/* Use console.debug to print, you can see what you want to print on the console in the browser's debug interface. Internet Explorer does not support console.debug() printing, it can only print using alert() */
console.debug(a);
console.debug(b);
console.debug(c);
console.debug("-- -- -- -- -- -- -- -- -- -- -- --")
/* the typeof a variable: typeof this keyword can be used to show what type a variable is
console.debug(typeof a);
console.debug(typeof b);
console.debug(typeof c);
/* Define an empty variable to see what type */
var f;
console.debug(f);
/* If the variable has no value, it is always undefined */
</script>
</head>
<body>
</body>
</html>
Copy the code– JavaScript raw data type
-
An infinite number of
-
In JS grammar, numbers have value boundaries. The maximum number beyond the limit is Infinity, and the minimum number beyond the limit is -infinity. Infinite numbers cannot be used for numerical calculation. Return false if the data passed is infinite, or true if the data passed is finite
-
In JS, 1/0 is not an error because 0 is evaluated as a number that approaches 0 indefinitely
-
-
The number of
- The isNaN() function is also used in JS to determine if the current character is really not a number
-
Boolean (Boolean type)
- Boolean types, like Java, are represented by true and false
Note: 0, NaN, Undefined, empty string, and null can all be represented as false in JS syntax
-
String (String type)
- The char type does not exist in the JS syntax, so a sequence of characters enclosed by single or double quotes, the length of any string, can be obtained by accessing the length attribute
-
Null (empty object)
- Represents a nonexistent object with a single value, null
-
Undefined (undefined or uninitialized)
- Represents an object declared but not assigned, Undefined derived from null
-
JS to judge true or false
-
In JS, all variables can be judged true or false. Values with content or presence (value or object except 0) are generally considered true and values with no content or presence (“”,undefined,null, etc.) are considered false.
-
In JS, only 0, “”, undefined, NaN, false are false, the rest are true
-
– JavaScript logical operator
-
In JS there are also arithmetic operators, equality operators, logical operators of the operation, the operation of these operators and JAVA, we will show the difference with JAVA
-
The assignment operator
Note: The assignment operator is used the same way as in Java
- Arithmetic operator
Note: in JS strings can participate in the use of operators, which will become concatenation
- Comparison operators (relational operators)
-
The comparison operator is used to determine the size relationship between two variables: >, <, ==, <=, >=, ==,! =,! = = =
-
Differences with Java
-
(1) == : represents equality (it only compares content, not type)
-
(2) === : absolute equality (first compare type, then compare content)
-
(3)! == : Absolutely not
-
-
- Logical operator
-
&& : the logical AND operator, false again false
-
| | : logical OR operator, a true again
-
! : logical NOT operator, true is false, false is true
Note: Logic or operators are different from Java. In JS, the search starts with the first value, and if it finds a value that represents true, it returns that value, and if all are false, it returns the last false
-
– JavaScript flow control
-
JS has the same flow control statement as Java, the same usage
-
1. Branch:
-
(1) if statements
-
(2) the switch statement
-
-
2. The cycle:
-
(1) while statement
-
(2) the do – while statement
-
(3) the for loop
-
-
3. Break/continue statement
-
4. Ternary expressions
-
– JavaScript function
-
A function is a set of code statements that can be run at any time
-
The load-time () function can avoid execution and can be called multiple times
-
Grammar:
functionThe function name (The list of parameters){JS code [returnThe return value. ] }Copy the code-
JS functions are defined using the function keyword, which is different from Java. At the same time, functions are allowed to have a return value and do not need to define the return value type. The return value uses the keyword return.
-
JS function definition
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! } function call syntax: function name (){} function call syntax: function name (); Note: js functions do not return value types and do not have permission modifiers. If you want to return parameters, just use the return keyword -->
<script type="text/javascript">
// This is a function
function a() {
// You can write js code inside a function
console.debug("This is a js function...")}// Call the function
a();
console.debug("-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -")
// This is a function with a return value type
function b(){
console.debug("This is a function that returns a value...")
return "Zhang Sanfeng";
}
// This is to call a function with a return value and receive the return value
var bbb = b();
console.debug(bbb);
</script>
</head>
<body>
</body>
</html>
Copy the code- Overloading of JS functions (not present)
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<! If a function accepts an argument, it does not need to write the type of the argument, but only the name of the argument. If there are multiple functions with the same name, then only the last function (3) will be called. Conclusion: There is no concept of method overloading in JS.
<script type="text/javascript">
// This is a function with two arguments
function a(name , age) {
console.debug(name, age)
}
// This is a function of A that takes three arguments
function a(name, age , sex) {
console.debug(name, age , sex )
}
// This is a function of A that takes three arguments
function a() {
console.debug("This is a function with no parameters.")}// Call the function, passing in arguments
a("Zhang Sanfeng".19);
// But I don't
a();
</script>
</body>
</html>
Copy the code- Anonymous functions
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<! (function() {// js code})(function() {// js code})(function() {// js code})() {// js code}) Var fun = function() {// js code} --> var fun = function() {// js code} -->
<script type="text/javascript">
// First: call the function directly and execute it only once, followed by an empty parenthesis
(function() {
console.debug("This is the first anonymous function call...")
})()
// Second: no arguments
var fun = function() {
console.debug("This is the second way to anonymous functions...")}// Call an anonymous function
fun();
// The second type has parameters
var fun = function(name, age) {
console.debug(name , age)
}
// Call an anonymous function
fun("King of fish".25);
</script>
<body>
</body>
</html>
Copy the code– JavaScript global and local variables
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
/* Define global and local variables: */
var msg = "This is a global variable.";
function aaa() {
var name = "This is a local variable...";
console.debug(name);
}
aaa();
console.debug(msg);
/* If you do not use var to define a variable, it is a global variable, no matter where the variable is defined
var t = "Sun";
function bbb() {
q = "Ning Zetao";
}
bbb();
console.debug(t);
console.debug(q);
</script>
</head>
<body>
</body>
</html>
Copy the code– JavaScript object
- Local object
-
Native objects are objects that JS provides for us to use, just like the common classes that Java provides for us
-
Include: Object, Boolean, Number, Date, String, Array, etc., focus on Date, String and Array objects
-
There are many methods for these objects, and it is obviously difficult to remember them all. We can query API according to baidu W3CSchool Chinese document or W3CSchool. CHM offline document when we need to use it
-
- String object: a String object
- 1. Part of the API
- 2. Code examples
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// Create a string, not recommended
var str = new String("This is a string object...");
// Recommended
var aaa = "This is a string.";
console.debug(str.length);
console.debug(aaa.length);
console.debug("-- -- -- -- -- -- -- --");
// replace(separator,howmany)// Replace the string
// separator: Character to be replaced
// howmany: What character to replace with
var c = "Heartthrob";
// Note that after changing the string, you need to receive the latest value as an argument
c = c.replace("万"."Thousand");
console.debug(c);
// substring(start,stop) specifies two character extraction positions
// start: the starting position to extract
// stop: The endpoint location to extract
var t = "This is a string!!";
t = t.substring(1.4);
console.debug(t);
The indexOf() method returns the first occurrence of a specified string value in a string.
var q = "Zhang Sanfeng";
var num = q.indexOf("Three");
console.debug(num);
</script>
</head>
<body>
</body>
</html>
Copy the code- Date: indicates the Date object
- 1. Part of the API
- 2. Code examples
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// Retrieving date objects in JS is the same as in Java
var date = new Date(a);console.debug(date);
// getTime() returns the number of milliseconds since January 1, 1970.
var num = date.getTime();
console.debug(num)
/* getUTCDate() returns the day of the month (1-31) from the Date object based on world time. 1 4 getUTCDay() returns the day of the week (0 to 6) from the Date object based on world time. 1 4 getUTCMonth() returns the month (0 to 11) from the Date object based on world time. * /
console.debug("One day this month:"+date.getUTCDate())
console.debug("One day this week:"+date.getUTCDay())
console.debug("One month this year:" +(date.getUTCMonth() + 1))
</script>
</head>
<body>
</body>
</html>
Copy the code- Math: This object can be thought of as a Java toolclass concept, which is an object for number-related operations
- 1. Part of the API
- 2. Code examples
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// Math: Just think of it as a utility class
var num = 18;
var b = 19;
/* Max (x,y) returns the highest value of x and y. Min (x,y) returns the lowest value of x and y */
console.debug(Math.max(num,b));
console.debug(Math.min(num,b));
// round(x) rounds the number to the nearest whole number.
var t = "12.6";
console.debug(Math.round(t));
</script>
</head>
<body>
</body>
</html>
Copy the code– System function
-
System function is JS for us to prepare or package some functions (methods), to achieve a lot of functions. So we can use it directly.
-
So let’s remember the system functions, the important ones, and just go to the API for the rest
-
1. Part of the API
- 2. Code examples
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! -- isNaN() checks if a value is a Number Number() converts the value of an object to a Number parseFloat() parses a string and returns a float parseInt() parses a string and returns an integer
<script type="text/javascript">
// isNaN(num) checks if the argument is a number, if not true, and if a number is false
var num = "aa";
// True if the argument is not a number
False if the argument is a number
console.debug(isNaN(num));
console.debug("-- -- -- -- -- -- -- -- --")
// Number(y) converts the type of the object to a numeric type. If it is not a numeric type, the conversion fails, and NaN is returned
var y = "45";
console.debug(typeof y)
console.debug(typeof Number(y));
console.debug("-- -- -- -- -- -- -- -- --")
// parseFloat() parses a string and returns a float
// parseInt() parses a string and returns an integer
var o = "67";
var p = "12.23";
console.debug(parseFloat(o));
console.debug(parseInt(p));
</script>
</head>
<body>
</body>
</html>
Copy the code– Array Array
- JS array object
- 1. Part of the API
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! There are three ways to create an Array: new Array() is not recommended; new Array(size); new Array(element0, element0, ... , elementn); Var arr = [parameter 1, parameter 2...] ; -->
<script type="text/javascript">
// Array definition
/ / the first
var arr1 = new Array(a);console.debug(arr1);
/ / the second
var arr2 = new Array(5);
console.debug(arr2);
/ / the third kind
var arr3 = new Array("Zhang".18 , true);
console.debug(arr3);
// The fourth type is recommended
var arr4 = [Fire Breathing Baby.Mighty Baby."Water baby".The Eye boy];
console.debug(arr4);
// Call the array API to reverse the order of the arguments in the array
console.debug(arr4.reverse());
// The array gets the value
console.debug(arr4[2]);
// Array set values
arr4[10] = "The Hero of Liang Shan";
console.debug(arr4)
console.debug(arr4.length)
</script>
</head>
<body>
</body>
</html>
Copy the code<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! Var I = 0; var I = 0; i < arr.length; For (var I in arr){js} for(var I in arr){js} -->
<script type="text/javascript">
// Define an array
var arr = [Fire Breathing Baby.Mighty Baby."Water baby".The Eye boy];
console.debug(arr);
// The first way
for(var i = 0; i < arr.length; i++){console.debug(arr[i]);
}
console.debug("-- -- -- -- -- -- -- -- --");
// In the second way, I does not get arguments, but subscripts
for(var i in arr){
console.debug(arr[i]);
}
</script>
</head>
<body>
</body>
</html>
Copy the code– User-defined class
-
In ES5, there is no specialized class keyword to define objects as in Java, and creating classes in JavaScript is actually the same syntax as creating functions
- Function name (){}
-
One syntax has multiple meanings. If you want to make it clear in JavaScript that you are defining a method or a class, lower case is recommended for method names and upper case for class names
-
1. Customize a common class
- In JS, a function is both a class and a constructor, which is also a method
-
Code sample
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! - JS custom grammar is to define a function grammar note: in general, we in order to distinguish between function and a custom class, we will capitalize the first letter of the custom class in JS, this definition is a class, is also a constructor, he is also a method -- -- >
<script type="text/javascript">
function User() {}Create an object in Java: object name name = new object name ();
// Create an object in JS: var name = new object name ();
var user = new User();
console.debug(user);
// constructor
function Employee(username, password) {
// This refers to whoever called me
this.username = username;
this.password = password;
}
// Create an object based on the constructor
var emp = new Employee("Zhang fei".123456);
console.debug(emp)
// Get the parameters of the class
console.debug(emp.username);
// Change the value parameter in the class
emp.username = "Guan Er Ye";
console.debug(emp);
// You can also play with JS by adding member variables that do not exist
emp.sex = "true";
console.debug(emp)
// Delete the element from the class in JS
delete emp.password;
console.debug(emp);
</script>
</head>
<body>
</body>
</html>
Copy the code-
2. Define a class that contains variables and methods
- In addition to defining variables in JS, you can also define methods, the definition of methods is the same as the definition of anonymous functions
-
Code sample
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! In addition to defining variables, you can also define methods in JS. The definition of methods is the same as the definition of anonymous functions and the call is the object name. Method name (); -->
<script type="text/javascript">
function Employee(username, password) {
// This refers to whoever called me
this.username = username;
this.password = password;
this.say = function() {
console.debug("This is a method in the JS class...")}}// Create an object
var employee = new Employee();
// Call a method in the object
employee.say();
</script>
</head>
<body>
</body>
</html>
Copy the code-
Prototype: Extend native objects and add our own methods to native objects
- There is no way to format time in JS, but we can write one ourselves in Prototype
-
Code sample
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! Prototype: extend native objects and add our own methods to native objects
<script type="text/javascript">
Format the time in date as YYYY-MM-DD HH: MM :ss
var date = new Date(a);// Use the prototype keyword to extend the primitive Date object method. The name of the method I want to expand is called format
Date.prototype.format = function() {
// This is the JS code you want to extend to this method
return this.getFullYear() + "-"
+ (this.getMonth() + 1) + "-"
+ this.getDate() +""
+ this.getHours() + ":"
+ this.getMinutes() + ":"
+ this.getSeconds();
}
console.debug(date.format());
</script>
</head>
<body>
</body>
</html>
Copy the codeNote: this refers to whoever calls it
– BOM
- BOM stands for Browser Object Model
- An explanation of the two graphs above
-
(1) Opening a window is a window object;
-
(2) Use location in the window to represent the address bar;
-
(3) The history of the window is represented by history;
-
(4) The browser information is represented by Navigator;
-
(5) The contents of the window are represented by Document;
-
- window
-
The window object is the top level object in the BOM and can be omitted by default (that is, the window can be omitted when calling its function).
-
The Window object is relative to the Web browser, depending on the browser, in the browser global object refers to the Window object;
-
The Window object can fetch other BOM objects;
-
- Part of the API
- Pop-up box code example
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// View the window object
console.debug(window);
// Note: if it is a method that calls an object called window, you can omit window
// The first type: the most basic pop-up box
alert("alert");
window.alert("window.alert");
// Second: there is a confirm cancel pop-up box, return false if click Cancel, return true if click OK
var boo = window.confirm("This is the second popup...");
console.debug(boo);
// Third: displays a prompt box that allows the user to enter text
var str = window.prompt("Please tell me why it's gone...");
console.debug(str);
</script>
</head>
<body>
</body>
</html>
Copy the code- JS jump code example
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// View the location object
console.debug(window.location);
alert("Explosion in five seconds...")
// js jump href = jump address
window.location.href = "http://www.baidu.com";
</script>
</head>
<body>
</body>
</html>
Copy the code- JS periodic task code example
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! -- Parameter 1: the function to be executed Parameter 2: the interval in milliseconds setInterval()
<! -- The first: <script type="text/javascript"> Window.settimeout (function() {window.location.href = "http://www.baidu.com"; }, 5000); </script> -->
<! -- Second type: execute multiple timer -->
<script type="text/javascript">
var num = 5;
// This is a timer that executes multiple times, every second
window.setInterval(function() {
// Get the tag by ID
var time = document.getElementById("time");
// Set the value for the label
time.innerHTML = --num;
If num == 0, go to baidu
if(num == 0) {window.location.href = "http://www.baidu.com"; }},1000)
</script>
</head>
<body>
<span id="time">5</span>Seconds later jump to Baidu</body>
</html>
Copy the code- JS dynamic time code example
<! DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<! -- Parameter 1: the function to be executed Parameter 2: the interval in milliseconds setInterval()
<! -- Second type: execute multiple timer -->
<script type="text/javascript">
// Use the prototype keyword to extend the primitive Date object method. The name of the method I want to expand is called format
Date.prototype.format = function() {
// This is the JS code you want to extend to this method
return this.getFullYear() + "-"
+ (this.getMonth() + 1) + "-"
+ this.getDate() +""
+ this.getHours() + ":"
+ this.getMinutes() + ":"
+ this.getSeconds();
}
// This is a timer that executes multiple times, every second
window.setInterval(function() {
var date = new Date(a);// Get the tag by ID
var time = document.getElementById("time");
// Set the value for the label
time.innerHTML = date.format();
},1000)
</script>
</head>
<body>
<span id="time"></span>
</body>
</html>
Copy the code