js---javaScript基础知识

javascript是脚本语言，这门语言可用于html和web。

javascript是一种轻量级的编程语言。

是可以插入html页面的编程代码，插入后，通过浏览器执行。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>document.write("<h3>hihihihi</h3>")</script></body>
</html>

javascript的用法

html中的脚本必须位于script与script中

脚本可以被放置在HTML页面的<body><head>部分

<script>标签

如需在html页面中插入javascript.,请使用<script>标签。

javascript代码会在页面加载时执行

可以在javascript文档中放入不限数量的脚本。

也可以把脚本保存到外部文件中，外部文件通常包含被多个网页使用的代码。

外部javascript文件的文件扩展名是.js。

如果需要使用外部文件，在script标签中的src属性设置该.js文件。

javscrpt事件

通常，我们需要在某个事件发生时执行代码。比如当用户点击按钮时。

如果把javascript代码放入函数中，就可以在事件发生时调用该函数。

javascript显示数据

javascript可以通过不同的方式来输出数据

使用window.alert（）弹出警告框。

使用document.write（）方法将内容写到html文档中.

使用innerHtml写入html元素

使用console.log()写入到浏览器的控制台。

外部JS的优势

分离了html和代码

使html和js更易维护和阅读

已缓存的js文件可以加速页面加载

外部引用

可以通过完整url或相对于当前网页的路径引用外部脚本

文件中的脚本

js显示方案

js能够使用不同方式显示数据

window.alert（）写入警告框

document.write写入html输出

innerHtml 写入html元素

console.log()写入浏览器控制台

js语句

js语句是由web浏览器执行的命令，这些命令告诉浏览器要做的事情是什么

js代码是js语句的顺序，浏览器会按照编写顺序依次执行每条语句

他由值、运算符、表达式、关键词、注释组成。

分号分隔js语句

js会忽略多个空格

可以通过反斜杠对代码进行换行

eg:document.write("你好\世界")

js值

js语句定义了两种类型的值：混合值/变量值

混合值被称为字面量，变量值被称为变量。

js注释

单行注释//

多行注释/* */

js变量

变量用来存储信息的容器可以存储值或表达式。

变量的命名规则：必须以字母开头，对大小写敏感

声明创建变量

使用var关键词声明变量，变量生命后，若没有赋值，变量为空，值为undefined

向变量赋值，使用等号

变量值可以被重新声明

一条语句可以声明多个变量。用逗号分开变量就可以了。

var name="lili",age=18;

声明变量类型，可以使用关键词new

eg:var name=new String;

js变量均为对象，当你声明了一个变量时，就创建了一个新的对象。

变量值的类型

字符串用“”包围，数值不用。

变量可分为全局变量、局部变量。这个内容在后面

js数据类型

基本类型-值类型：字符串String 数字Number 布尔Boolean 对空 Null 未定义 Undefined Symbol（独一无二的值）

引用数据类型：对象 Object 数组 Array 函数Function

字符串是也引号中的任意文本

数字是数字。可以带小数点。eg:1、2/3...

布尔（逻辑）只能有两个值，true/false

undefined 表示变量不含有值，可以将值得变量设置为null来清空变量

js对象

js对象是拥有属性和方法的数据。

js对象是变量的容器.

对象也是一个变量，但对象可以包含多个值,每个值以name:value对呈现.也称为对象属性

eg：var car={name:“lili”,model:500,color:"white"};

对象定义：

var xx={}

对象可以跨越多行，空格跟换行看你需求。

对象属性

js对象是键值对的容器。键值对的通常写法为：name:value。

键值对在js对象中通常称为对象属性。

访问对象属性

有两种方式访问

person.lastName;

person["lastName]

对象方法

对象的方法定义了一个函数，并作为对象的属性存储

对象方法通过添加（）调用

访问对象方法，不加（）会返回函数的定义

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style></style></head><body><script>var person={name:"lili",age:"18",cute:function(a){return a}}// 加了（）console.log(person.cute(1));//1//不加（）console.log(person.cute);//function(a){return a}</script></body>
</html>

js函数

函数是由事件驱动的或者当他被调用时执行的可重复使用的代码块

函数是包在花括号{}中的代码块，前面有关键词fuction

调用函数时，就会执行函数内的代码

调用带参数的函数

在调用函数时，你可以向他传值，这些值就被称为参数。

参数可以在函数内使用。参数用逗号分隔，

声明函数时，参数就等于变量。

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

带有返回值的函数

通过return 可以把函数值返回到调用它的地方。

在使用return语句时，函数会停止执行，并返回指定的值.

注意：整个js代码不会停止执行,仅仅是函数。js继续执行的代码在调用函数的地方开始。

返回值也可以传递到函数的参数中。

在你希望仅仅退出函数时，也可以使用return语句，返回值是可选的。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style></style></head><body><script>//1.return 返回值function cute(){var x=5;return x;}console.log(cute());//5// 2.return后的语句不再执行function pink(){var x=8;return x; //到这里之后，他就不往下走了var y=9;console.log(y);}console.log(pink());//8//return 的停止只是在函数内，其他地方js语句会继续执行function green(){var x=10;return x;}console.log(green());//10var j=100;console.log(j);//100//对照组function yellow(){var x=20;return x;var y=11;if(y>x){console.log("love");}}console.log(yellow());//20// return的难点是与条件语句相结合使用// 仅对于个人function red(a,b){if(a>b){return 1;}return x=a+b}console.log(red(4,5));//9console.log(red(5,4));//1</script></body>
</html>

js变量的生命周期

js变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

向未声明的js变量分配值

如果把值赋给未声明的变量，该变量将被自动作为window的一个属性。

非严格模式下给未声明的变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

暂时想不起来是哪个方法可以看了。

js作用域

作用域是可访问变量的集合

在js中，对象和函数同意也是变量。

在js中，作用域为可以访问变量、对象、函数的集合。

js函数作用域：作用域在函数内修改？---啥意思

js局部作用域

变量在函数内声明，变量为局部作用域

局部变量：只能在函数内部访问。

局部变量只作用于函数内，所有不同的函数可以使用相同名称的变量。

局部函数在函数开始执行时创建，函数执行完后局部函数会自动销毁。

<body><Script>function  cute(){//变量c只能在函数内访问var c="lili"console.log(1+typeof(c));//string }cute();console.log(typeof(c));//undefined 函数外不可访问</Script></body>

js局部变量

在js函数中使用了var声明的变量是局部变量，所有只能在函数内部访问它。同时这个变量的作用域也是局部的。所以，这样你就可以在不同的函数中声明名称一样的变量。

只要函数运行完毕，本地变量就会被删除。

函数参数只在函数内起作用，是局部变量

js全局变量

变量在函数外定义，就是去全局变量。

全局变量有全局作用域，网页中所有脚本和函数都可以使用

如果函数在函数内没使用var声明变量，这个变量就是全局变量。

在html中。全局变量是window对象，所有数据变量都属于window对象。

你的全局变量，或者函数，可以覆盖 window 对象的变量或者函数。
局部变量，包括 window 对象可以覆盖全局变量和函数。----也不懂这两句话是什么意思

<body><Script>var c="lili"function  cute(){//变量c函数内外都可以访问var c="lili"console.log(1+typeof(c));//string }cute();console.log(typeof(c));//string</Script></body>

<body><Script>var c="lili"console.log(window.c);console.log(c);</Script></body>

js事件

html事件是发生在html元素上的事情。

当在html页面中使用js时，js可以触发这些事件。

html事件

html事件可以是浏览器行为，也可以是用户行为。

以下是html事件的实例：

html页面完成加载

html input 字段被改变时

html按钮被点击

通常，当事件发生时，你可以做些事情。

在事件触发时，可以执行js代码。

html元素中可以添加事件属性，使用js代码来添加html元素。

// 单双引号都可以 event事件
<htmlElement event="js代码">

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!-- // 例子一 --><button onclick="getElementById('demo').innerHTML=Date()">现在时间为？</button><p id="demo"></p><!--   // 例子二//代码修改自身元素的内容 --><button onclick="this.innerHTML=Date()">现在的时间是?</button></body>
</html>

js代码一般都是通过事件属性来调用

<htmlElement事件名=“event”>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><button onclick="displayDate()">点我吧！(๑′ᴗ‵๑)Ｉ Lᵒᵛᵉᵧₒᵤ❤</button><p id="demo">我会显示时间哟！⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄</p><script>function displayDate(){document.getElementById("demo").innerHTML=Date();}</script></body>
</html>

html事件有

onchange html元素改变

onclick 用户点击html元素

onmouseover 用户在一个html元素上移动鼠标

onmouseout 用户从一个html元素上移开鼠标

onkeydown 用户按下键盘按键

onload 浏览器已完成页面额加载。

....

js可以做什么

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作。

页面加载时触发事件

页面关闭时触发事件

用户点击按钮执行动作

验证用户输入内容的合法性

......

可以使用多种方法执行js事件代码

html事件属性可以直接执行js代码

html事件属性可以调用js函数

为html元素指定自己的事件处理程序

阻止事件的发生

.....

以后需要补的内容他们到底长啥样

js字符串

js字符串常用于存储和处理文本。

字符串是可以插入到引号中的任意字符。引号单双引号都可以。

但是注意：字符串的引号之间的特殊情况，引号中包引号。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>  </head><body ><script>var cute="she name is'lili'";console.log(cute);</script></body>
</html>

字符串索引长度

字符串索引从0开始

length 可以计算字符串长度

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>  </head><body ><script>var cute="she name is'lili'";console.log(cute.length);console.log(cute[0],cute[4]);</script></body>
</html>

字符串 --转义字符

转义字符将特殊字符转换为字符串字符

转义字符可以用于转义引号换行等其他字符

\` 单引号

\'' 双引号

\\ 反斜杠

\n 换行

\r 回车

\t tab 制表符

\b 退格符

\f 换页符

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>  </head><body ><script>var st="We are so cute "me" only me";console.log(st);var cl='You are beautiful 'you' I lied to you';console.log(cl);</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>  </head><body ><script>var str="We are so cute \"me\" only me";console.log(str);var cool='You are beautiful \'you\' I lied to you';console.log(cool);</script></body>
</html>

字符串属性

constructor 返回创建字符串属性的函数

length 返回字符串的长度

prototype 允许向对象添加属性和方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>  </head><body ><script>var str="We";console.log(str.constructor);console.log(str.length);</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>// 自己写一个trim方法function trim(){var retValue=this;//this是string对象var ch=retValue.substring(0,1);//检查第一个字符是否为空字符while(ch==" "){retValue=retValue.substring(1,retValue.length);ch=retValue.substring(0,1)}ch=retValue.substring(retValue.length-1,retValue.length);// 检查最后一个字符是否为空字符while(ch==""){retValue=retValue.substring(0,retValue.length-1);ch=retValue.substring(retValue.length-1,retValue.length);}// 检查是否有两个连续的空字符while(retValue.indexOf(" ")!=-1){retValue=retValue.substring(0,retValue.indexOf("  "))+retValue.substring(retValue.indexOf(" ")+1,retValue.length);}//返回处理后的字符串return retValue;}//将自定义的方法附加到string对象String.prototype.trim=trim//使用自定义方法var meString="this   is a new book"console.log(meString);console.log(meString.trim());</script></body>
</html>

字符串方法----这部分需要看视频

charAt() 返回指定索引位置的字符

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title>  </head><body ><script>var str="We";console.log(str.charAt(1));</script></body>
</html>

charCodeAt() 返回指定索引位置字符的Unicode值

  <script>var str="We";console.log(str.charCodeAt(1));</script>

concat() 链接两个或多个字符串，返回连接后的字符串

  <script>var str="We";var cc="cute";console.log(str.concat(cc));</script>

fromCharCode() 将Unicode 转换为字符串

  <script>var n=String.fromCharCode(121);console.log(n);</script>

indexOf() 在字符串中搜索传入的字符串，并返回位置，没找到返回-1-----字符串位置方法

indexOf() 方法从字符串开头开始查找子字符串

疑惑----这个空格到底怎么算的？

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var str="cute";var str1="we are cute";console.log(str.indexOf("c"));//0console.log(str.indexOf("u"));//1console.log(str1.indexOf("we"));//0console.log(str1.indexOf("are"));//3console.log(str1.indexOf("cute"));//7console.log(str1.indexOf("me"));//-1  没找到它</script></body>
</html>

lastIndexOf() 在字符串中搜索传入的字符串，并返回位置，没找到返回-1-----字符串位置方法

注意：这里的Index--I是大写，写成小写会报错

lastIndexOf()方法从字符串末尾开始查找子字符串

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var str="cute";var str1="we are cute";console.log(str.lastIndexOf("e"));//3console.log(str.lastIndexOf("u"));//1console.log(str1.lastIndexOf("we"));//0console.log(str1.lastIndexOf("are"));//3console.log(str1.lastIndexOf("cute"));//7console.log(str1.lastIndexOf("me"));//-1  没找到它// 注意：lastindexof 与indexof的区别console.log(str1.indexOf("e"));//1console.log(str1.lastIndexOf("e"));//10</script></body>
</html>

match() 找到一个或多个正则表达式的匹配-------不是很明白

match()接受一个参数，可以是一个正则表达式字符串，也可以是RegExp对象，这个等于RegExp的exec()

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var str="cat,bat,sat,fat,love";let pattern=/.at/;let matches=str.match(pattern);console.log(matches);//console.log(matches.index);//0console.log(matches[0]);//catconsole.log(pattern.lastIndex);//0</script></body>
</html>

search() 检索与正则表达式相匹配的值------不是很明白

search(）接受一个参数，可以是一个正则表达式字符串，也可以是RegExp对象，这个方法返回模式第一个匹配的位置索引，如果没有返回找到返回-1，search（）始终从字符串开头向后匹配模式。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var str="cat,bat,sat,fat,love";let search1=str.search(/at/);console.log(search1);//1</script></body>
</html>

replace() 替换与正则表达式匹配的子串---------没写完

replace（）简化子字符串替换操作，这个方法接受两个参数，第一个参数可以是RegExp对象/一个字符串（这个字符串不会转换为正则表达式），第二个参数可以是一个字符串/函数。如果第一个参数是字符串，就只会替换第一个子字符串，要想替换所有子字符串，第一个参数必须为正则表达式并且带全局标记。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var text="cat,bat,sat,fat";let result=text.replace("at","ond");//cond bat,sat,fatconsole.log(result);//result=text.replace(/at/g,"ond");console.log(result);//cond,bond,sond,fond</script></body>
</html>

localCompare() 比较两个字符串

如果按照字母表顺序，字符串应该排在字符串参数前头，则返回负值，一般是-1，不过具体情况请具体分析

如果字符串与字符串参数相等，则返回0

如果按照字母表顺序，字符串应该排在字符串参数后头，则返回正值

split() 把字符串分隔为子字符串数组

slice() 提取字符串的片段，并在新的字符串中返回被提取的部分

subString() 提取字符串中两个指定的索引号之间的字符

substr() 从起始索引号提取字符串中指定数目的字符

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var str="we are cute";// 正值//传入一个值console.log(str.slice(3));//are cuteconsole.log(str.substring(3));//are cuteconsole.log(str.substr(3));//are cute//传入两个值console.log(str.slice(3,6));//are console.log(str.substring(3,6));//are console.log(str.substr(3,6));//are cu  第二个参数表示返回几个数// 负值//传入一个值console.log(str.slice(-3));//ute  将所有负值参数都当成字符串长度加上负参数值。console.log(str.substring(-3));//we are cute   substring()方法会将所有负参数值都转换为0。console.log(str.substr(-3));//ute substr()方法将第一个负参数值当成字符串长度加上该值，将第二个负参数值转换为0//传入两个值console.log(str.slice(3,-3));//uteconsole.log(str.substring(3,-3));//are  cconsole.log(str.substr(3,-3));//  无值</script></body>
</html>

toLocalLowerCase() 根据主机的语言环境把字符串转为小写，只有几种语言，eg:土耳其语，地方特有的大小写映射

toLocalUpperCase() 根据主机的语言环境把字符串转为大写，只有几种语言，eg:土耳其语，地方特有的大小写映射

toLowerCase() 把字符串转换为小写

toUpperCase() 把字符串转换为大写

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var str="my cute";var cc="CC CC"// 变小写console.log(cc.toLocaleLowerCase());// 变大写console.log(str.toLocaleUpperCase());//变小写console.log(cc.toLowerCase());//变大写console.log(str.toUpperCase());</script></body>
</html>

trim() 移除字符串首尾空白

trimLeft()移除字符串开头空白

trimRight()移除字符串结尾空白

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var str="     we are cute         "var str1="11     we are cute       11"console.log(str.trim())console.log(str.trimLeft());console.log(str.trimRight());console.log(str1.trim())console.log(str1.trimLeft());console.log(str1.trimRight());</script></body>
</html>

valueOf() 返回某个字符串对象的原始值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var str="我喜欢你";console.log(str);console.log(str.valueOf());</script></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>let cute=new Date();console.log(cute);let cool=new Date().valueOf();console.log(cool);</script></body>
</html>

toLocalString() 返回字符串对象值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var str="我喜欢你";console.log(str);console.log(str.toLocaleString());  //加了个e</script></body>
</html>

toString() 返回字符串对象值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>var str="我喜欢你";console.log(str);console.log(str.toString());</script></body>
</html>

js运算符

+ 进行相加

- 进行相减

* 进行相乘

/ 用于相除

% 取模（余数）

++ 自增

-- 自减

+的特殊用法

js赋值运算符

= 用于赋值

+= x+=y x=x+y

-= x-=y x=x-y

= x=y x=x*y

/= x/=y x=x/y

%= x%=y x=x%y