Basic learning of JavaScript (1)

Old songs 2020-12-12 21:43:50
basic learning javascript


Value type ( Basic types ): character string (String)、 Numbers (Number)、 Boolean (Boolean)、 In the air (Null)、 Undefined (Undefined)、Symbol.

notes :Symbol yes ES6 A new type of raw data is introduced , Represents a unique value .

Reference data type : object (Object)、 Array (Array)、 function (Function).

js in   var name="Volvo XC60";        var name='Volvo XC60';    '  '  And " " The effect is the same   

=== Is absolute equality , That is, the data type and value must be equal .

JavaScript Array

The following code creates a code named cs Array of :

var cs=new Array();
cs[0]="Saab";
cs[1]="Volvo";
cs[2]="BMW";

perhaps (condensed array):

var cs=new Array("Saab","Volvo","BMW");

perhaps (literal array):  example ;var cs=["Saab","Volvo","BMW"];

JavaScript object

Object by {  } Separate . Inside the brackets , The properties of an object are in the form of name and value pairs (name : value) To define .

Attributes are separated by commas :    var test={name:"John", three:"Doe", id:666};

Objects can be addressed in two ways
1.name=test.name;         2.name=test["name"];
There are two ways to access object properties :
1.test.name;              2.test["name"];

 

 "JavaScript Objects are containers of variables ". however , We usually think that "JavaScript Objects are containers for key value pairs ".

Key value pairs are usually written as  name : value ( Keys and values are separated by colons ). Key value pairs are in JavaScript Objects are often called   Object properties .

 

Usually fullName() As a person A method of an object , fullName As an attribute .

If you use fullName attribute , Don't add  (), It will return the definition of the function ( Function expression ); Add brackets to output the result of function execution

document.getElementById("demo1").innerHTML = " Output function expression without parentheses :" + person.fullName;            Output function expression without parentheses :function() { return this.firstName + " " + this.lastName; }
document.getElementById("demo2").innerHTML = " Parenthesized output function execution results :" + person.fullName();      Parenthesized output function execution results :test  java

 

Local JavaScript Variable

stay JavaScript Variables declared within a function ( Use var) yes Local Variable , So you can only access it inside a function .( The scope of this variable is local ).

overall situation JavaScript Variable

Variables declared outside functions are overall situation Variable , All scripts and functions on the web page can access it .

JavaScript Lifetime of variables

JavaScript The lifetime of variables begins at the time they are declared .

Local variables are removed after the function runs .

Global variables are deleted after the page is closed .

 

Global variables created by assigning values to undeclared variables in non strict mode , Is a configurable property of a global object , You can delete .

var var1 = 1; // Global properties are not configurable 
var2 = 2; // Not used var Statement , Configurable global properties 
console.log(this.var1); // 1
console.log(window.var1); // 1
console.log(window.var2); // 2
delete var1; // false Cannot delete Local variables cannot be deleted 
console.log(var1); //1
delete var2; // Global attributes can be deleted
console.log(delete var2); // true Has deleted 
console.log(var2); // Has deleted Error reporting variable not defined 

JavaScript  Scope

stay JavaScript in , The scope is accessible variables , object , The set of functions

local variable : Can only be accessed inside a function .  Function parameters only work in functions , It's a local variable .

Global variables have   Global scope : All scripts and functions in the web page can be used . 

stay HTML in , The global variable is window object : All data variables belong to window object .

If a variable is not declared within a function ( Not used var keyword ), This variable is a global variable .

JavaScript Variable life cycle

JavaScript The variable life cycle is initialized when it is declared .

Local variables are destroyed after function execution .

Global variables are destroyed when the page is closed .

Your global variables , Or functions , You can override window Object variables or functions .

local variable , Include window Objects can override global variables and functions .

notes :Window Object represents an open window in the browser

 

common HTML List of events :

 

JavaScript Strings are used to store and process text .

stay JavaScript in , Strings are written in single or double quotation marks ;

The following table lists the special characters that can be escaped with escape characters in a string :

 

String properties and methods

attribute :        describe :

constructor         Returns the function that creates the string property

length   Returns the length of the string

prototype         Allows you to add properties and methods to an object

String method :

Method describe
charAt() Returns the character at the specified index position
charCodeAt() Returns the character at the specified index position Unicode value
concat() Concatenate two or more strings , Return the connected string
fromCharCode() take Unicode Convert to string
indexOf() Returns the location of the first occurrence of a specified character in a string
lastIndexOf() Returns the position of the last occurrence of the specified character in a string
localeCompare() Compare two strings in a local specific order
match() Find a match for one or more regular expressions
replace() Replace substrings that match regular expressions
search() Retrieve the value that matches the regular expression
slice() Extract a fragment of a string , And return the extracted part in the new string
split() Split a string into a substring array
substr() Extract the specified number of characters in the string from the starting index number
substring() Extract the character between two specified index marks in the string
toLocaleLowerCase() Convert the string to lowercase according to the host language environment , There are only a few languages ( Like Turkish ) With local case mapping
toLocaleUpperCase() Convert the string to uppercase according to the host language environment , There are only a few languages ( Like Turkish ) With local case mapping
toLowerCase() Convert string to lowercase
toString() Return string object value
toUpperCase() Convert strings to uppercase
trim() Remove white space at the beginning and end of a string
valueOf() Returns the original value of a string object

JavaScript Operator

Operator = For giving JavaScript Variable assignment .

Arithmetic operator + Used to add up values .

y=5:

Operator describe Example x Calculation results y Calculation results
+ Add x=y+2 7 5
- Subtraction x=y-2 3 5
* Multiplication x=y*2 10 5
/ division x=y/2 2.5 5
% modulus ( remainder ) x=y%2 1 5
++ Self increasing x=++y 6 6
x=y++ 5 6
-- Self reduction x=--y 4 4
x=y-- 5 4

JavaScript Assignment operator .

Assignment operators are used to give JavaScript Variable assignment .

Given  x=10  and  y=5, The following table explains the assignment operator :

Operator Example Equate to Calculation results
= x=y   x=5
+= x+=y x=x+y x=15
-= x-=y x=x-y x=5
*= x*=y x=x*y x=50
/= x/=y x=x/y x=2
%= x%=y x=x%y x=0

For strings + Operator

+ Operator is used to add text values or string variables ( Connect ).

To connect two or more string variables , Please use + Operator .

Add strings and numbers

Add two numbers , Returns the sum of a number , If a number is added to a string , Return string ,

x=5+5;
y="5"+5;
z="Hello"+5;

x,y, and  z  The output is :

10
55
Hello5

JavaScript  Compare   and   Logical operators

Comparison and logical operators are used to test  true  perhaps  false.

Comparison operator

Comparison operators are used in logical statements , To determine whether a variable or value is equal .

<p Given x=5, The table below explains the comparison operator :

How to use

You can use comparison operators to compare values in conditional statements , And then act on the results :

if (age<18) x="Too young";

Logical operators

Logical operators are used to determine the logic between variables or values .

Given x=6 as well as y=3, The following table explains the logical operators :

Conditional operator

JavaScript It also includes conditional operators that assign values to variables based on certain conditions .

<p> Click the button to judge the age .</p>
Age :<input id="age" value="18"/>
<p> Whether you have reached voting age ?</p>
<button onclick="myFunction01()"> Click button </button>
<p id="demo01"></p>
<script>
function myFunction01(){
var age,voteable;
age=document.getElementById("age").value;
window.alert(voteable=(age<18)?" Under age ":" Age reached ");
document.getElementById("demo01").innerHTML=voteable;
}
</script>

 JavaScript Multivariate operators

p>1?p<b?p>b:p=6:p=3
p>1?  whole  :p=3

1、 When p>1 When to return to p<b?p>b:p=6

  • 1.1、 When p<b When to return to p>b
  •  1.2、 When p>=b When to return to p=6

2、 When p<=1 Is to return p=3 So first execute 1

3、 In the example, when p=9 When , return p<b?p>b:p=6 Then perform 1.1, When p=9<12 when , return p>b, namely 9>12, The condition doesn't hold, so the final result is false.

 

JavaScript There are three kinds of logical operators in :

 

1. Take the opposite !

 

First, convert the data to Boolean values , Then reverse , The result is true or false.

 

<script type="text/javascript">
var a = [1,2,3];
var b = "hello";
var obj = new Object();
var d;
console.log(!""); //true
console.log(!d); //true
console.log(!a); //false
console.log(!b); //false
console.log(!obj); //false
</script>

 

2. Logic and &&

 

JavaScript Chinese logic is different from other languages , If the first operand is true( Or it can be transformed into true), The result is the second operands ,

If the first operand is false, The result is false( Short circuit calculation ), For some special values, the above rules are not followed .

( Personal understanding is : If the first operands of the operation are true, Then return the second operand , If not, the first operands are returned )

The return is not simple true still false, It's the specific value ;

If the first value is converted to a Boolean value of true, Just return the second value ; conversely , Returns the first value .

In plain English, it means : Which value is wrong will be returned , If it's all right , Returns the last value .

<script type="text/javascript">
var a = [1,2,3];
var b = "hello";
var obj = new Object();
var d;
console.log(true && 10); // The first operands are true, The result is a second operation , That is to say 10
console.log(false && b); // The first operands are false, result flase
console.log(100 && false); // The first operands are 100, result flase
console.log(undefined && false); // The first operands are undefined, result undefined
console.log(NaN && false); // The first operands are NaN, result NaN
console.log(null && false); // The first operands are null, result null
console.log('' && false); // The first operand is an empty string , The result is empty 
console.log(0 && 100); // The result is 0
console.log(5 && 100); //100
console.log(a && b); //hello
console.log(obj && 200); //200
</script>

 

3. Logic or ||

If the first operand is not false, The result is the first operands , Otherwise, it turns out to be the second operands . If the first operands can be converted to true,

The result is the first operands ( Personal understanding is : If the first operands of the operation are true, Returns the first operand , If not, the second operands are returned )

Same as && similar , The return is not simple true and false, It's the specific value .

This is from the beginning , Encounter can be converted into true Value , Just return that value , without true The last value is returned .

<script type="text/javascript">
var a = [1,2,3];
var b = "hello";
var obj = new Object();
var d;
console.log(true || 10); // The first operands are true, The result is the first operation , That is to say true
console.log(false || b); // The first operands are false, The result is the second operands b
console.log(100 || false); // The first operands are 100, result 100
console.log(undefined || 9); // The first operands are undefined turn false, result 9
console.log(NaN || false); // The first operands are NaN turn false, Results the second operands 
console.log(null || a); // The first operands are null turn false, result a
console.log('' || false); // The first operand is an empty string false, Results the second operands 
console.log(0 || 100); // The result is 100
console.log(5 || 100); //5
console.log(a || b); //a
console.log(obj || 200); //obj
</script>

 

 

author : Old songs
link :https://www.cnblogs.com/wdyjt/p/14125217.html
The copyright of this article belongs to the author and blog Park , Welcome to reprint , But without the author's consent, the original link must be given on the article page , Otherwise, the right to pursue legal responsibility is reserved

版权声明
本文为[Old songs]所创,转载请带上原文链接,感谢
https://qdmana.com/2020/12/202012122143402039.html

  1. css单位
  2. CSS unit
  3. 前端验证集合
  4. Front end validation collection
  5. Front end learning (4) -- response line, response head, response body
  6. Lesson 27: using time measuring tools to explore available spare time
  7. CSS 单位
  8. CSS unit
  9. 前端工具集合
  10. Front end Tools Collection
  11. Introduction to HTTP message format
  12. Introduction to new features of HTML5
  13. Common instructions for Vue
  14. Introduction of bootstrap Blazer component library
  15. HTML5 速览
  16. HTML5 quick view
  17. HTML表格自动排序
  18. For less than $1700, create a private cloud with openstack
  19. 前端编程之路一一HTML标签分类
  20. Front end Programming: HTML tag classification
  21. ColSpan and rowspan merging cells of HTML form elements
  22. JavaScript 日期时间格式化
  23. JavaScript date time formatting
  24. Classification of front end interview questions - html2
  25. CSS block elements
  26. HTML5 form detailed tutorial
  27. HTML5 form detailed tutorial
  28. HTML5新增的元素表
  29. New element table in HTML5
  30. 3D轮播插件vue-carousel-3d非官方最全文档
  31. 3D carousel plug-in vue-carousel-3d
  32. Uniapp (Vue general) integrates Tencent location service SDK -- multi platform small program general
  33. Slowhttptest slow attack tool use details
  34. HTML summary (2)
  35. Overview of CSS3
  36. Front end abnormal monitoring system
  37. 免费网站部署和免费数据库Serverless云存储资源汇总整理
  38. Free website deployment and collection of free database serverless cloud storage resources
  39. Vux form -- a form solution of base vux
  40. 可以直接用于HTML中的特殊字符表 unicode字符集
  41. Can be directly used in HTML special character table Unicode character set
  42. Detailed explanation of HTTP protocol
  43. HTTP request header and request response header
  44. CSS background深度解析
  45. Python web/HTML GUI
  46. Front end standard 2: HTML you know and don't know
  47. Some HTML tags
  48. HTML标签之table
  49. Table of HTML tag
  50. DataTables of jQuery plug-in
  51. Unity calls Google's free translation API (HTTPS interface). Young people don't speak martial arts. How can they speak in multiple languages
  52. Linux entry most commonly used commands, do not learn a bunch of useless commands
  53. Piziheng embedded: a list of common short-range wireless communication protocols (Wi Fi / Bluetooth / ZigBee / thread...)
  54. Naming rules for the front end team of ladder
  55. HTML logo related symbols
  56. Node . JS: development resources and technology stack arrangement
  57. Unity calls Google's free translation API (HTTPS interface). Young people don't speak martial arts. How can they speak in multiple languages
  58. Straighten out JavaScript (18) - statements and operators
  59. Employment information statistics network (interface document)
  60. css selector