JS basic syntax
一，Output
1. Use windows.alert() to pop up an alert box
window.alert(5 + 6);
2. Use windows.confirm(); pop up a confirmation box
confirm("按下按钮!");
3. Use windows.prompt(title,content) to pop up a dialog box
person=prompt("请输入你的名字","Harry Potter");
4. Use the document.write() method to write the content to the HTML document
document.write("<h1>这是一个标题</h1>")
document.write can only be used in HTML output streams . If you use it after the document has loaded (such as in a function), it will overwrite the entire document.
5. Use innerHTML to write to the HTML element
document.getElementById("demo").innerHTML = "段落已修改";
6. Use console.log() to write to the browser's console
console.log("six");
Second, the data type
1. Basic data types
String, Number, Boolean, Null, Undefined, Symbol
Symbol is a new primitive data type introduced by ES6 that represents a unique value.
have to be aware of is:
==: equal
===: absolutely equal
2. Reference data types
Object (Object), Array (Array), Function (Function), and two special objects: Regular (RegExp) and Date (Date)
3. JS has dynamic type
JavaScript has dynamic type. This means that the same variable can be used as different types:
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
4. The typeof keyword can get the data type
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {
name:'John', age:34} // 返回 object
5. JS creation and access
方法一：
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
方法二：
var cars=new Array("Saab","Volvo","BMW");
方法三：
var cars=["Saab","Volvo","BMW"];
6, JS object creation and access
Objects are separated by curly braces. Inside parentheses, an object's properties are defined as name and value pairs (name : value). Properties are separated by commas:
//创建
var person={
firstname:"John", lastname:"Doe", id:5566};
//访问
name=person.lastname;
name=person["lastname"];
7, Undefined and Null
Undefined This value indicates that the variable does not contain a value.
A variable can be emptied by setting its value to null.
var person;
var car="Volvo";
document.write(person + "<br>");
document.write(car + "<br>");
var car=null
document.write(car + "<br>");
null and undefined are equal in value but not in type:
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
In JavaScript, null is used for objects and undefined is used for variables, properties and methods.
An object may be null only if it is defined, otherwise it is undefined.
If we want to test for the existence of an object, an error will be thrown if the object is not yet defined.
Incorrect usage:
if (myObj !== null && typeof myObj !== "undefined")
The correct way is that we need to use typeof first to check if the object is defined:
if (typeof myObj !== "undefined" && myObj !== null)
8. Declare variable type
When you declare a new variable, you can use the keyword "new" to declare its type:
JavaScript variables are all objects. When you declare a variable, you create a new object.
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
Third, the object
1. Create object method
methodName : function() {
// 代码
}
2, call the object method
objectName.methodName()
objectName.methodName
Usually fullName() is used as a method of the person object, and fullName is used as a property.
If you use the fullName attribute without adding (), it will return the definition of the function: for
example:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
Name : function()
{
return this.firstName + "-----" + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.Name;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.Name();
Fourth, the function
1. Function definition A
function is a block of code wrapped in curly braces. The keyword function is used in front of it:
//无参函数
function functionname()
{
// 执行代码
}
//带参函数
function myFunction(var1,var2)
{
//代码
}
//带返回值的函数
function myFunction(a,b)
{
return a*b;
}
2, function call
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<button onclick="myFunction('Bob','Builder')">点击这里</button>
V. Events
1. Triggering of HTML events
<some-HTML-element some-event='JavaScript 代码'>
<some-HTML-element some-event="JavaScript 代码">
2, six common HTML time
| event | describe |
|---|---|
| onchange | HTML element changes |
| onclick | User clicks on HTML element |
| onmouseover | Occurs when the mouse pointer moves over the specified element |
| onmouseout | Occurs when the user moves the mouse away from an HTML element |
| onkeydown | User presses a keyboard key |
| onload | The browser has finished loading the page |
3. What can the event do?
Event-triggered JS functions can be used to handle form validation, user input, user behavior, and browser actions.
Six, process control
1，for/in
For looping through data of unknown size
grammar structure
var person={
fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
for example:
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
function myFunction(){
var x;
var txt="";
var person={
fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
Seven, type conversion
1. The constructor property
The constructor property returns the constructor of all JavaScript variables.
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{
name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {
}.constructor // 返回函数 Function(){ [native code] }
Use the constructor property to see if the object is an array (containing the string "Array"):
function isArray(myArray) {
return myArray.constructor.toString().indexOf("Array") > -1;
}
You can use the constructor property to see if the object is a date (containing the string "Date"):
function isDate(myDate) {
return myDate.constructor.toString().indexOf("Date") > -1;
}