Web Learning -- JavaScript -- Notes (I)

AsiaSun. 2022-06-23 16:40:59 阅读数:538

weblearningjavascriptnotes

JavaScript

JS It's script language , Line by line conversion to binary execution

JS The composition of :
ECMAScript、DOM、BOM

JS Three ways to introduce

  1. Direct reference :
    <input type="button" value=" Submit " onclick="alert(' Autumn fragrance ')">

  2. Reference in the document :

<script type="text/javascript">
alert(' Hello ');
</script>
  1. External file import :
<script src="js/my.js"></script>
script In the middle of the label , Stop writing code

my.jss in :

alert('hello word!')

HTML Double quotation marks are recommended in
JS Single quotation marks are recommended in

JS 's box

Input box :prompt(' Please enter text ');
pop-up :alert(' Hello ');
The controller sees the print itself :console.log(' Here is the content output from the console ');


Variable

JS Have Dynamic type , In the process of running , May have assigned different types of variables

Simple data type ( Basic data type )

Number、Boolean、String、Undefined、Null

Number

Number, integer 、 Character , Both can be used.
8 Hexadecimal said :0 At the beginning , by 8 Base number var num = 010;
16 Hexadecimal said :0x At the beginning , by 16 Base number

Data type conversion

There are two types of data type conversion :

  1. Implicit type conversion
  2. Display type conversion

” character string “ Convert to ” Numbers “

The data type is converted to Number:
Number(); Convert string to Number
There are two cases of conversion results
One is ” Numeric string “ Conversion success
One is , The conversion did not succeed , The output is NaN

NaN(Not a Number): The digital
console.log(' Hello ' - 100); The input result is NaN

isNaN() Judge whether it is a number , The return type is Boolean
Yes no numbers , return true
It's the number. , return false

parseInt(string); String to integer
parseFloat(string); Convert string to floating point

Not only can you put "123" transformation
Can also be "11.2sss" Medium 11.2 Bring up , Of course ± It can also identify

” Numbers “ Convert to ” character string “

  1. Add to empty string
  2. toString()
var a = 10;
a.toString()

Undefined type

Var a;
here ,a Not sure what type it is , be a Namely Undefined type

Implicit data conversion

console.log(18 == '18'); The result is true
== The data type will be converted by default , Will convert a string to a number

JS Basic grammar and swift Or java almost , Take notes of the following key points or different places

  • Pseudo array
  1. Having an array length attribute
  2. Stored by index
  3. It doesn't have some real array methods :pop()、push() Other methods

function

JS Function calls are common 4 Kind of :

  1. Call directly
  2. Call in expression
  3. Call in hyperlinks
  4. Called in events

Call in hyperlinks :
grammar :<a href="javascript: Function name "></a>

argument Is a pseudo array

argument What to do ?

When the formal parameters of a function , I don't know how many times , Don't write , And then, when called , Write any number of formal parameters
then , Inside the function , Use argument You can receive the arguments

When receiving , Is received as a pseudo array

 <script >
function func(){

console.log(arguments);
}
func(1, 2, 3, 5);
</script>

 Insert picture description here

arguments: Parameters
arguments Is a of the current function Built-in objects
All functions have a built-in arguments object ,arguments Object All parameters passed

Anonymous functions

 <script >
var func = function(){

console.log(' Anonymous functions ');
};
func();
</script>

func It's a variable. , It's not a function name
The function is anonymous

If it's inside a function , Variables that are not directly assigned are declared , Also a global variable

??? Black question mark

 <script >
function func(){

num = 10;
};
func();
console.log(num);
</script>

Pre parse

JS The code is created by JavaScript Parser to execute .
JS The parser is running JS There are two steps to code :
Pre parse and Code execution

Pre parse :JS The engine will turn JS Everything in it var and function Upgrade to Current scope Of front
That is to say
Pre analysis is divided into :

  1. Variable pre parsing ( Variable Promotion )
  2. Function pre parsing ( Function enhancement )

Variable Promotion

Is to promote all variable declarations to the front of the current scope Do not promote assignment operations

give an example :

console.log(num);
num = 10;

The above code , amount to :

var num;
console.log(num);
num = 10;

therefore ,num No assignment , I don't know what kind of , newspaper :undefined

Function enhancement

Is to raise all function declarations to the front of the current scope Don't call functions

give an example :

func();
var func = function() {

console.log(22)
}

Report errors :func is not a function

as a result of :
The above code is equivalent to :

var func;
func();
func = function() {

console.log(22)
}

Defines a variable func, And then call func(), No, , So wrong reporting

Suggest : Function calls are always written after function declarations

Fallible collective statements :
var a = b = c = 9;
amount to :
var a = 9; b = 9; c = 9;b and c Direct assignment , No, var Statement , therefore , When Global variables see !!!

The right collective statement :
var a = 9, b = 9, c = 9;

You can write directly :var a = 9; var b = 9; var c = 9; No mistake


JS object

// Created an empty object 
var obj = {
};

A simple object :

 <script >
var obj = {

// Properties or methods , Take the form of key value pairs 
uname: ' Zhang San ',// Multiple objects are separated by commas 
age: 18,
sex: ' male ',
sayHi: function(){
// Method after colon , With an anonymous function 
console.log('Hi');
}
};
console.log(obj.uname);// Properties of the calling object , Use .
console.log(obj['age']);// Properties of the calling object , Or use this method ( Similar dictionary value )
obj.sayHi();
</script>

Variable 、 attribute 、 function 、 Distinction of methods

Variables and attributes are used to store data

var num = 10;
var obj = {

age: 18;
}

Variable , Not inside the object
attribute , Inside the object , No declaration required

Both functions and methods implement a function
function : Outside the object
Method : Inside the object

Another way to create objects :

 var obj = new Object();
obj.uname = ' Li Si ';
obj.age = 10;
obj.sayHello = function() {

console.log('Hello');
}
console.log(obj.uname);
obj.sayHello();

Constructors

The syntax format of the constructor

function Constructor name (){
this. attribute = value ;
this. Method = function() {}
}
new Constructor name ();

Take a chestnut :

function Star(uname, age, sex) {

this.uname = uname;
this.age = age;
this.sex = sex;
this.sing = function (musicName){

console.log(uname + ' Singing 《' + musicName + '》');
}
}
var zs = new Star(' Zhang San ', 18, ' male ');
console.log(typeof zs);
console.log(zs);
console.log(zs.uname);
zs.sing(' Dare to ask where the road lies ');

Print the results :

object
Star {
uname: ' Zhang San ', age: 18, sex: ' male ', sing: ƒ}
Zhang San
Zhang San is singing 《 Dare to ask where the road lies 》
  • The first letter of the constructor should be capitalized ( Buttocks )
  • Constructors don't need return, You can return the result

Traverse all objects of the object

Use for in Method

for(var k in zs){

console.log(k);
console.log(zs[k]);
}

Built-in objects

Namely JS Provide us with the object , For our use , The more the better

JS There are three kinds of objects :

  1. Custom object
  2. Built-in objects
  3. Browser object

Built-in objects
You can refer to MDN

Math

Math.floor(1.1); Rounding down 1
Math.ceil(1.1); Rounding up 2
Math.round(1.1); rounding 1
Math.random();[0, 1) Between


Array

Array operation
push(), Add to the back of the array ,push There is a return value , The return value is the length of the new array
unshift(), Add a value to the front of the array , There are also return values , It is also the length of the new array
pop(), Delete the last element of the array , And returns the value of the deleted element
shift(), Delete the first element of the array , Also returned is the value of the deleted element

Array flip :array.reverse();

Array sorting :array.sort();

var array = [12, 3, 5, 88, 72];
array.sort();
console.log(array);

Running results :(5) [12, 3, 5, 72, 88]
Its order , Is the first sorting result of cardinality sorting , This is not what we want , that , What if you really implement sorting ?

You can give sort Pass a function :

var array = [12, 3, 5, 88, 72];
array.sort(function(a, b){

return a-b;// Sort from small to large 
return b-a;// Sort from large to small 
});
console.log(array);

Array to find the index of the element :

indexOf(); Find the index of the element from front to back
lastIndexOf(); Find the index of the element from back to front

Take a chestnut :

var array = [12, 3, 5, 88, 72, 12];
console.log(array.indexOf(12));
console.log(array.lastIndexOf(12));
console.log(array.lastIndexOf(120));// If you can't find it , return -1
Print the results :
0
5
-1

Array to string :

arr.toString();
arr.join();

Let's take an example :

var array = [12, 3, 5, 88, 72];
console.log(array.toString());
console.log(array.join('~'));// You can customize the spacer 
console.log(array.join(''));
Print the results :
12,3,5,88,72
12~3~5~88~72
12358872

Time object

var date = new Date();
 Insert picture description here

character string

String search

var str = '12345123';
console.log(str.indexOf('2'));// Look for the element 2
console.log(str.indexOf('2', 2));// Look for the element 2, From the position 2 Start looking for 
Print the results :
1
6

Other operations of strings :

String truncation
var str = 'aabcdefgaadsd';
console.log(str.substr(0, 3));// from index 0 Start , Interception length 3
Print the results :
aab
String replacement
var str = 'aabcdefgaadsd';
console.log(str.replace('a', 'b'));// In the string a Replace with b Only the first one will be replaced , The latter does not replace 
Print the results :
babcdefgaadsd
String to array
var str = '123,234,455';
console.log(str.split(','));// Use commas to separate strings 
Print the results :
['123', '234', '455']

Simple data types and complex data types

Simple data type , Also known as Value type , Put it in the stack
Complex data type , Also known as Reference type , Put it in the pile

Value type :string、number、boolean、undefined、null
Reference type :
In storage , Only the address is stored
adopt new Keyword created objects ( System object 、 Custom object ), Such as Object、Array、Date etc.

版权声明:本文为[AsiaSun.]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/174/202206231552178852.html