javaScript入门笔记

什么是JavaScript（js）？
是一门跨平台、面向对象的脚本语言，来控制网页行为的，可以使网页可交互
java和JavaScript完全不同，语法类似。

javaScript引入方式

1. 内部脚本：将JS代码定义在html页面中。在HTML中，js代码必须位于script的包裹中。可以在html中的任何位置插入js。（一般放在body的结尾，因为加载js需要时间，先加载html能更快的展示页面给用户）
2. 外部脚本：将js代码定义在外部的js文件中，然后引入到html中：

<sceipt src="../js/demo.js"></script>  不能自闭和<sceipt src="../js/demo.js"/>

js语法

除了分号可有可无，以及弱类型，其他的都和java几乎一样。

1. 输出语句：

①window.alert()写入警告框（弹出来）
②document.write()写入html输出（在网页上）
③console.log()写入浏览器控制台（在开发者工具里）

2. 变量：

js用关键字var来定义变量，可以存放不同类型的。（variable）
var可以重复定义（覆盖），并且即使在代码块中，也是全局变量（作用域很大）
let（新增），和var几乎相同，但是不可以i重复定义，并且是局部变量
const（新增），常量，一旦声明，就不能改变

3. 数据类型

number string boolean unll undefined
利用type xx 可以查看数据类型。
类型转换：

转number：
字符串转number，如果字符串不是数字，会转成Nan类型（number的一种）
通过parseInt(str)转，直接用就行
boolean转number，true是1，false是0

转boolean：
number：0和nan转为false，其他都是true
string：空字符串转false，有内容就是true（有利于简化书写，判断空）
null和undefine都是false

4. 运算符

== 和 ===的区别：”20“ 和 20比较的时候有区别

5. 函数
   function xxx(参数1，参数2){
   return
   }
   这里和Java不同点是，形参不需要类型（弱类型语言，也不用写返回值类型，哟啊用function关键字。）
   调用就直接调。

   或者
   var add = function(参数列表){
   return xx
   }
   实参可以任意个数，但是没啥用，就是不会报错而已。

js对象

1. 数组Array
   更多方法参考：https://www.w3school.com.cn/jsref/jsref_obj_array.asp
   
   属性：length
   方法：push、splice

2. String对象
   更多方法参考：https://www.w3school.com.cn/jsref/jsref_obj_string.asp
   
   有个方法：trim（），去除前后两端的空白字符，java里也有

3. 自定义对象
   

4. BOM（browser object model）浏览器对象模型
   js将浏览器的各个组件部分封装成对象
   包括：
   Window:浏览器窗口对象
   Navigator浏览器对象(不重要，主要是浏览器这个软件的信息)
   Screen：屏幕对象（不重要）
   History：历史记录对象（有方法可以用于前进和后退）
   Location：地址栏对象（用于跳转到某ip location.href = “www.baidu.com”）

   window：
   
   confirm：点击确定返回true，点取消返回false。
   setInterval()，用法是传两个参数，第一个参数是函数，第二个参数是毫秒数
   ————————————————————————————————————

5. DOM（document object model）
   
   dom对象是一个标记文档的对象，html文档就是一个标记语言文档，所以浏览器在处理html的时候，也会把他变成dom对象。（dom分为xml dom和html dom）
   处理过程就是把一系列标签，变成一个一个对象，然后我们对这些对象操作，就可以实现与html的标签的操作。
   在js中，使用dom可以对html进行操作
   

首先要获取element对象（标签对象），就是用下面这些方法获取不同标签的对象，对于不同的标签，有不同的对象html对象，也有不同的方法和属性。
所有的对象都继承element。所以也都可以用父类的方法。

然后对这些对象操作来控制html，详细见文档
element 对象：https://www.w3school.com.cn/jsref/dom_obj_all.asp
Image 对象：https://www.w3school.com.cn/jsref/dom_obj_image.asp
等……

事件监听

如何在时间发生以后执行某些代码
比如鼠标移到哪里哪里就高亮，或者点击按钮后会有反馈

涉及到的内容是事件绑定：

方式一html和js耦合，不推荐
使用方式，见文档
https://www.w3school.com.cn/jsref/dom_obj_event.asp

应用案例：失去焦点就检测输入的用户名是否符合规范，符合就不显示内容，不规范就显示错误语句

//span是css里的，后边那个style=”display:none“是说，不显示，如果设置none为''，就会显示。
  <input type="text" name="namepace" id="name"><br>
    <span id="useerr" class="errmsg" style="display:none">错误</span><br>

<script>
    //获取document对象
    var usernamed = document.getElementById("name");
    //绑定onblur事件，失去焦点。意思是如果鼠标点了框以外的地方，
    // 让光标不再显示正在输入，就会执行这个事件对应的函数
    usernamed.onblur = function (){
        //获取输入框中的内容
        var use = usernamed.value;
        //判断用户名是否符合规范，长度6-12
        if(use.length >=6 && use.length <= 12){
            var err = document.getElementById("useerr");
            err.style.display = 'none';
            //正确不做处理
        }else {
            //错误，获取span语句对象，修改style为显示
            var err = document.getElementById("useerr");
            err.style.display = '';
        }
    }
</script>

正则表达式

定义了字符串组成的规则

用法：

//返回一个flag是Boolean类型的
var reg = /^\w{6,12}$/;
var str = "saffas";
var flag = reg,test(str);