目录
js%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F-toc" style="margin-left:80px;">html中嵌入js的三种方式
变量
函数
常见的函数：
数据类型：
js%E4%B8%AD%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%BD%AC%E6%8D%A2%EF%BC%9A-toc" style="margin-left:40px;">js中数据类型的转换：
1.string类型转int类型：
2.int类型转string类型：
返回值与运算符
类和对象
事件
js%E4%BB%A3%E7%A0%81%E7%9A%84%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F-toc" style="margin-left:40px;">js代码的执行顺序
js%E4%BB%A3%E7%A0%81%E4%B8%AD%E7%9A%84%E8%8A%82%E7%82%B9%3A-toc" style="margin-left:80px;">js代码中的节点:
捕捉回车键
void运算符
3 JavaScript包括三块: ECMAScript、DOM、BOM
innerText和innerHTML属性的区别
表单验证:
常见语句：
js%E7%9A%84%E4%B8%89%E7%A7%8D%E6%96%B9%E5%BC%8F">html中嵌入js的三种方式
1.直接写在事件之后定义
2.脚本文件
<script type="text/javascipt" src="js/1.js" >（中间不能写代码，否则会被覆盖。可以写alt=“”）</script>
变量
js中的变量分为全局变量（相当于java中的成员变量）和局部变量:
全局变量：指在程序中任何情况下都可以使用的变量。全局变量是在浏览器开始运行的时候开始开辟内存空间的，浏览器关闭后将不再使用全局变量的内存空间，全局变量的内存存储在浏览器的内存中，因此编程过程中尽量避免使用全局变量，以免占用过大的内存空间。
局部变量：指在函数体中定义的变量，局部变量只有在调用函数的时候开辟空间，函数体运行完，内存空间关闭，占用的空间较小。
在函数体中，如果不加var，也是局部变量。
var userName="小明" //定义全局变量myName
function myfun(){
var userName="小刚"; //定义局部变量userName
alert(userName);
}
myfun(); //调用的是函数中的局部变量，结果是“小刚”
alert(userName); //调用的是全局变量，结果是“小明”
var userName="小明" //定义全局变量myName
function myfun(){
userName="小刚"; //函数中不加var，定义的也是全局变量userName
alert(userName);
}
myfun(); //调用的是函数中的局部变量，结果是“小刚”
alert(userName); //调用的是最近的全局变量，结果是“小刚”
java是强类型语言，指在定义变量类型之后，该变量的类型就无法发生改变，强制类型转换只是强制转换，并不改变底层的数据类型。编译器强行固定变量的数据类型，称为强类型语言。
而JavaScript是弱类型转换，不需要编译，所以一个变量的类型是不固定的，同理返回的变量类型也是不固定的。
如果声明变量之后没有进行赋值，系统会自动进行赋值为undefined，undefined是一个值；
如果变量没有声明直接使用，会出现变量未声明错误。
F12键，命令器，控制台，网络这三个窗口最常用。
函数
JS中的函数有2种写法（相当于java中的方法），js中的函数只能通过调用才能显示出来，不调用的函数在运行结果中不显示。
javascript">1. function 函数名（形参列表）{
函数体
}
2.函数名=function（形参列表）{
函数体
}
function sum（a，b）{ //定义sum函数
return a+b;
}
<style="text/javascript",src="js/1.js">
var retvalue=sum(1,2); //会输出3
alert(retvalue);
var retvalue=sum("hack") //会输出jackundefined
alert(retvalue);
var retvalue=sum(); //会输出NaN（NaN是一个常量，不是一个值，Not a Number）
alert(retvalue);
var retvalue=sum(1,2,3); //会输出3（因为形参有两个，所以只会计算实参前面的2个）
alert(retvalue);js中没有函数重载（形参的数量、类型、顺序），因为js中同名函数会随程序的运行将前面的同名参数覆盖掉，所以js中的函数名必须是唯一的，只有通过函数名才能确定一个函数。
常见的函数：
| 函数名 | 返回值 | 描述 |
|---|---|---|
| isNaN() | true：不是一个数字 false：是一个数字 | |
| paraeInt() | 取整函数 | |
| parseFloat（） | 字符串转换成数字 | |
| Math.ceil() | Math是数学类，数学类当中有一个函数叫做ceil（），作用是向上取整。 | |
| 关于string类型的常用属性和函数 | ||
| indexOf | 获取指定字符串在当前字符串中第一次出现处的索引； | |
| lastIndexOf | 获取指定字符串在当前字符串中最后一次出现处的索引 | |
| replace | 替换 | |
| substr | 截取子字符串 | |
| substring | 截取子字符串 | |
| toLowerCase | 转换小写 | |
| toUpperCase | 转换大写 | |
| split | 拆分字符串 | |
常用属性：length 获取字符串长度
具体语法：https://www.bilibili.com/video/BV1Ft411N7R3?p=17&spm_id_from=pageDriver p17
回调函数：任何一个事件都会对应一个事件 —— 句柄，事件句柄是在事件前添加on。onXXX这个事件句柄出现在一个标签的属性位置上(事件句柄以“属性”的形式存在)。对于当前程序来说，sayHello函数被称为回调函数(callback函数)。回调函数的特点:自己把这个函数代码写出来了，但是这个函数不是自己负责调用，由其他程序负责调用该函数。
注册事件的两种方式：
一、直接在标签中使用事件句柄：
javascript"><!--以下代码的含义是:将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数。-->
<html>
<body>
<input type="button" value="hello" onclick="sayHello()"/>
</body>
</html>
<script>
function sayHe1lo(){
alert("hello js!");
}
</script>二、使用纯JS代码完成事件的注册：
<script>
//第一步:先获取这个按钮对象(document是全部小写， 内置对象，可以直接用，document就代表整个HTML页面)
var btn0bj = document . getElementById(”mybtn");
//第二步:给按钮对象的onclick属性赋值
btnObj .onclick = doSome; //注意:千万别加小括号，btnObj . onclick = doSome();这是错误的写法.
//这行代码的含义是,将回调函数doSome注册到click事件上.
var mybtn1 = document . getElementById( "mybtn1");
mybtn1.onclick = function(){ // 这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
alert("tes........."); //这个函数在页面打开的时候只是注册上,不会被调用，在click事件发生之后才会调
}
document . getElementById( "mybtn2"). onclick = function(){
alert("test2222222.........");
}
</script>java中也有回调函数机制：
public class MyClass{
public static void main(String[] args){
// 主动调用run()方法，站在这个角度看run( )方法叫做正向调用。
run();
}
//站在run方法的编写者角度来看这个方法，把run方法叫做回调函数。
public static void run(){
System. out. println("run...");
}数据类型：
js中有7种数据类型：
原始类型：
| 类型 | 默认值 | 描述 |
| Undefined | 只有一个值undefined | 没有给变量赋值，系统默认赋值undefined；也可以手动赋值undefined。 |
| Number | 数字类型（在java中分为6种类型），-1,0,1,3.14，......NaN,infinity都属于Number数据类型 | |
| String | 第一种：var s="abc"; 第二种：（使用JS内置的支持类String）：var s1=new String("abc"); 注意：String是一个内置的类，可以直接用，String的父类是Object。无论是小string还是大String，它们的属性和函数都是通用的。 | |
| Boolean | true和false | if后面的小括号中只能是true或false，函数boolean()可以将非布尔类型的数据转换成布尔类型，转换原则是有数据就是true，没有数据就是false |
| Null | 只有一个值null | |
js%E4%B8%AD%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E7%9A%84%E8%BD%AC%E6%8D%A2%EF%BC%9A">js中数据类型的转换：
1.string类型转int类型：
javascript">
//(1)parseInt方法:parseInt()。如果能转换成功就成功 否则NaN。尝试解析字符串的数字部分。
parseInt("abc") // Returns NaN.
parseInt("123abc") // Returns 123.
parseInt("123") //Return 12.3
var str="1250"
console.log(parseInt(str)); //1250
var str1="00100"
console.log(parseInt(str1))//100
var str2 = "0.01"
console.log(parseInt(str1)) //0 ———-这里的四舍五入 要注意
//(2).Number方法
var s = "5"
var i = new Number(s)
var str="1250"
console.log(Number(str)); //1250
var str1="00100"
console.log(Number(str1) ) //100
var str2 = "0.01"
console.log(Number(str1)) //0.01
发现parseInt方法在format’00’开头的数字时会当作二进制转十进制的方法进行转换，所以建议string转int最好用Number方法。
2.int类型转string类型：
javascript">(1)tostring()方法
var x=10
a = x.toString() //输出为string类型
alert(typeof(a));
(2)自动隐式转换
var x=10;
a = x +""; //JS会自动隐性转换，输出为string类型
alert(typeof(a));返回值与运算符
| null | ||
| undefined | ||
| NaN | Not a Number | 表示不是一个数字，但是属于数字类型。表示运算结果本应是一个数字但却不是一个数字 |
| null、undefined、NaN三个值的区别： alert(null==undefined); //ture alert(null==NaN); //false alert(undefined==NaN); //false | ||
| 运算符 | 名称 | 作用 |
| "=" | 赋值运算符 | 赋值（从右向左赋值） |
| "==" | 等同运算符 | 表示等值（类型不一定相同） |
| "===" | 全等运算符 | 表示等值同类型 |
javascript">var a=100;
var b="哈哈"
alert(a/b);
var c=100;
var d="abc"
alert(c+d) //100abc (类型不一样时加号表示连接符)
alert(10/3); //3.33333333335（进制转换问题，不必深究）
alert(10/0); //infinityjavascript">var a=1 //true
var b=0 //false
var c="" //false
var d="abc" //true
var e=null //false
var f=NaN //false
var g=undefined //false
var h=infinity //true
if(a){
alert(true）;
}
else{
alert（false）;
}类和对象
Object以及Object的子类：
1、Object类型是所有类型的超类，自定义的任何类型，默认继承object。
2、object类包括哪些属性?
prototype属性(常用的，主要是这个) :作用是给类动态的扩展属性和函
constructor属性
3、object类包括的函数：
toString()
value0f( )
toLocaleString()
4、在JS当中定义的类默认继承object，会继承object类中所有的属性以及函数换句话说，自己定义的类中也有prototype属性。
定义类的语法:
第一种方式:
function类名(形参){
}
第二种方式:
类名 = function(形参){
}
创建对象的语法:
new构造方法名(实参);/构造方法名和类名一致。
Symbol（ES6之后出现的）
typeof 可以动态实时判断数据类型（全部小写）：undefined、number、string、boolean、object、function
var a=null;
alert(typeof a); //会输出objectjava语言怎么定义类，怎么创建对象?
public.class.User{
private.String username ;
private.String. pas sword;
public User(){
public User(String username, String 'password){
this . username .= username ;
this. password .=. password;
User user = new User();
User user = new User("lisi","123");
JS语言怎么定义类，怎么创建对象?
User = function(username , password){
this.username = username;
this. password = password;
}
varu=new User();
var u = new User("zhangsan");
var u = new User("zhangsan" , "123");事件
| 类型 | 命令 | 事件 |
| 焦点 | blur | 失去~ |
| focus | 获得~ | |
| 鼠标 | click | ~单击 |
| dblclick | ~双击 | |
| mousedown | ~按下 | |
| mouseover | ~经过 | |
| mousemove | ~移动 | |
| mouseout | ~离开 | |
| mouseup | ~弹起 | |
| 键盘 | keydown | ~按下 |
| keyup | ~弹起 | |
| 表单 | reset | ~重置 |
| submit | ~提交 | |
| change | 下拉列表选中项改变，或文本框内容改变 | |
| select | 文本被选定 | |
| load | 页面加载完毕( 整个HTML页面中所有的元素全部加载完毕之后发生。) |
js%E4%BB%A3%E7%A0%81%E7%9A%84%E6%89%A7%E8%A1%8C%E9%A1%BA%E5%BA%8F">js代码的执行顺序
js%E4%BB%A3%E7%A0%81%E4%B8%AD%E7%9A%84%E8%8A%82%E7%82%B9%3A">js代码中的节点:
点击按钮的时候文本框变成复选框
捕捉回车键
void运算符
控制语句
1、if
2、switch
3、while
4、do... .while.。
5、for循环
6、break
7、continue T
8、for..in语句(了解)
9、with语句(了解)
public class Testt
public static void main(String[] args){
int[] arr = {1,2,3,4,5,6};
int[] arr2 = new int[5]; //等同于: int[] arr2 = {0,0,0,0,0};
String[] arr3 = {"a","b","c"};
String[] arr4 = new String[3]; //等同于: String[] arr4 = {null,nu1l,nu1l};
3 JavaScript包括三块: ECMAScript、DOM、BOM
ECMAScript: JS的核心语法(ES规范/ ECMA- 262标准)
DOM: Document Object Model (文档对象模型:对网页当中的节点进行增删改的过程)HTML文档被当做一棵DOM树来看待 。
var domObj = document . getElementById("id");
BOM: Browser Object Model (浏览器对象模型)
关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是BOM编程。
2、DOM和BOM的区别和联系?
BOM的顶级对象是: wi ndow
DOM的顶级对象是: document
实际上BOM是包括DOM的!
innerText和innerHTML属性的区别
相同点:都是设置元素内部的内容。t
不同点:
innerHTML会把后面的“字符串”当做一段HTML 代码解释并执行。
innerText，即使后面是一段HTML代码， 也只是将其当做普通的字符串来看待。
-->
<script type="text/javascript">
window. onload = function(){
var btn = document . getElementById("btn");
btn. onclick = function(){
//设置div的内容
//第一步:获取div对象
var divElt = document. getElementById("div1");
//第二步:使用innerHTML属性来设置元素内部的内容
// divElt. innerHTML = "fjdkslajfkdlsajkfldsjaklfds" ;
// divElt. innerHTML = "<font color='red'>用户名不能为空! </font>";
divElt. innerText = "<font color= 'red'>用户名不能为空! </font>";
}
</script>
正则表达式
1、什么是正则表达式，有什么用?
正则表达式: Regular Expression
正则表达式主要用在字符串格式匹配方面。
2、正则表达式实际上是一门门独立的学科，在Java语言中支持， C语言中也支持，javascript中也支持 。
大部分编程语言都支持正则表达式。正则表达式最初使用在医学方面，用来表示神经符号等。目前使用最多
的是计算机编程领域，用作字符串格式匹配。包括搜索方面等。
3、正则表达式，对于我们javascript编程来说，掌握哪些内容呢?
第一:常见的正则表达式符号要认识。
第二:简单的正则表达式要会写。
第三:他人编写的正则表达式要能看懂。
第四:在javascript当中， 怎么创建正则表达式对象! (new对象 )
第五:在javascript当中，正则表达式对象有哪些方法! (调方法 )
第六:要能够快速的从网络上找到自己需要的正则表达式。并且测试其有效性。
4、常见的正则表达式符号?
匹配除换行符以外的任意字符
\W匹配字母或数字或下划线或汉字
\s匹配任意的空白符
\d匹配数字
\b匹配单词的开始或结束
^
， 匹配字符串的开始
$匹配字符串的结束
*重复零次或更多次
+重复一次或更多次
?重复零次或一次
{n}重复n次
{n,} 重复n次或更多次
{n,m}重复n到m次
\W匹配任意不是字母，数字，下划线，汉字的字符
\S匹配任意不是空白符的字符
\D匹配任意非数字的字符
\B匹配不是单词开头或结束的位置
[^x]匹配除了x以外的任意字符
[^aeiou]匹配除了aeiou这几个字母以外的任意字符
正则表达式当中的小括号()优先级较高。
[1-9] 表示1到9的任意1个数字(次数是1次。)
[A-Za-z0-9]表示A-Za-z0-9中的任意1个字符
[A-Za-z0-9-]表示A-Z、 a-z、 0-9、 一，以上所有字符中的任意1个字符。
|表示或者
5、简单的正则表达式要会写
QQ号的正则表达式: ^[1-9][0-9]{4,}$
6、他人编写的正则表达式要能看懂?
email正则: ^\w+([-+. ]\w+)*@\w+([-.]\w+)\.\w+([-.]\w+)*$
7、怎么创建正则表达式对象，怎么调用正则表达式对象的方法?
第一种创建方式:
var regExp = /正则表达式/ flags;
第二种创建方式:使用内置支持类RegExp
var regExp = new RegExp(“正则表达式" , "flags");
关于flags:
g: 全局匹配
i: 忽略大小写
m:多行搜索(ES规范制定之后才支持m。)当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才以使用。
https://www.bilibili.com/video/BV1Ft411N7R3?p=34
表单验证:
(1)用户名不能为空
(2)用户名必须在6-14位之间
(3)用户名只能有数字和字母组成，不能含有其它符号(正则表达式)
(4)密码和确认密码一致，邮箱地址合法。
(5)统一失去焦点验证
(6)错误提示信息统一 在span标签中提示，并且要求字体12号，红色。
(7)文本框再次获得焦点后，清空错误提示信息，如果文本框中数据不合法要求清空文本框的value
(8)最终表单中所有项均合法方可提交
JSON
常见语句：
<script>
import的用法：（输入）
1.import a from "@/b" //a表示函数或者方法，b表示引入的.js文件的路径。
2.import { a } from 'b' //a表示定义的属性，b表示方法？
3.import _ from 'loadsh' //？
export default （输出）
data(){
return{
}
}
vuex状态管理
1.钩子函数
钩子函数是Windows消息处理机制的一部分，通过设置“钩子”，应用程序可以在系统级对所有消息、事件进行过滤，访问在正常情况下无法访问的消息。钩子的本质是一段用以处理系统消息的程序，通过系统调用，把它挂入系统。
2.相对于前端来讲
对于前端来说，钩子函数就是指在所有函数执行前，我先执行了的函数，即 钩住 我感兴趣的函数，只要它执行，我就先执行。
export default {
name: "draw",
data(){ // 定义变量source
return {
source:new ol.source.Vector({wrapX: false}),
}
},
props:{ //接收父组件传递过来的参数
map:{
//type:String
},
},
mounted(){ //页面初始化方法
if (map==map){
}
var vector = new ol.layer.Vector({
source: this.source
});
this.map.addLayer(vector);
},
watch: { //监听值变化：map值
map:function () {
console.log('3333'+this.map);
//return this.map
console.log('444444'+this.map);
var vector = new ol.layer.Vector({
source: this.source
});
this.map.addLayer(vector);
}
},
methods:{ //监听方法 click事件等，执行drawFeatures方法
drawFeatures:function(drawType){}
}
created:html加载（页面渲染）完成之前，执行。执行顺序：父组件-子组件
mounted:html加载（页面渲染）完成后执行。执行顺序：子组件-父组件
methods：事件方法执行
watch：watch是去监听一个值的变化，然后执行相对应的函数。
computed：computed是计算属性，也就是依赖其它的属性计算所得出最后的值，
可以进行数组拼接或者数组计算。
