JS

  • JavaScript,是基于对象和事件驱动的浏览器脚本语言,不需要编译即可运行,是弱语言。
  • js的作用：
    • 1、js可以动态的修改html及css的代码（修改的是浏览器内存中的那一份代码）DOM操作
    • 2、js可以对表单进行校验
  • js由三部分组成：
    • 1、ECMAScript：这一部分主要是js的基本语法
    • 2、BOM：Brower Object Model浏览器对象模型,主要是获取浏览器信息或操作浏览器的,例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等
    • 3、DOM：Document Object Model文档(html)对象模型,此处的文档暂且理解为html,html加载到浏览器的内存中,可以使用js的DOM技术对内存中的html节点进行修改,用户从浏览器看到的是js动态修改后页面

js的引入方式:

1.内部js:也就是在html源码中嵌入js代码

格式：

1
2
3
4
5
6
7
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        alert("这里写你的js代码");
    </script>
</head>

<script>标签可以现在html页面中的任何地方。而且一个页面中可以有多个<script>标签.

2.外部js:也就是将js代码单独写成一个js文件(扩展名是.js而不是.javascript),在html代码中引入这个封装好的js文件

格式：

1
2
3
4
5
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../xxx.js"></script>
</head>

注意：无论是内部js还是外部js在html中引入的位置是随意的,<head>标签中可以引入,<body>标签一样可以引入,但js的引入有一个原则就是：在不影响页面功能的情况下js越晚加载越好,所以建议<script>标签写在<body>标签下面即可。

js的基本语法

注释

1
2
3
4
//单行注释
/*
 * 多行注释
 */

js变量定义

js是弱类型语言，不重视类型的定义，但js会根据为变量赋值的情况自定判断该变量是何种类型，js的变量的定义直接通过var关键字就行。

格式：var 变量名 = 值

js的数据类型

跟java一样,js的数据类型也分为基本数据类型(原始数据类型)和引用数据类型

  • 1、原始/基本数据类型：
    • 数字类型：number(包含了小数和整数)
    • 布尔类型：boolean
    • 字符串类型：string(在js中字符串类型包含了字符’’和””引起来的都是字符串)
    • 未定义类型：undefined
    • 空类型：null
    • 重要的转换：
      • 数字字符串 转 数字
      • parseInt
      • parseFloat
  • 2、引用数据类型：与java一样,js中的对象都是引用数据类型,所以你也可以使用我们熟知new来”造对象”
    • 例如：
      • 造一个上帝对象：var obj = new Object();
      • 造一个字符串对象：var str = new String();
      • 造一个日期对象：var date = new Date();
  • 在js中引用数据类型和基本数据类型的区别和java中一样。

js的运算符

  • 在js中,如下运算符除了极个别的,其他绝大多数的运算都是和java中一模一样的运算法则。
    • 1、赋值运算符：var x = 5；
    • 2、比较运算符：>、<、==、!=、===
    • 3、逻辑运算符：&&、||、!
      • 需要注意的是,在js中,不光boolean值能够参与逻辑运算。所有的值都能参与逻辑运算。
      • 在js中,非零,非null,非undefined理解成true,
      • 零,null,undefined理解成false。
    • 4、算数运算符:+、-、*、/、%
    • 5、三元运算符:条件?a:b
  • 与java的运算符一样,什么赋值运算符、逻辑运算符、运算运算符等等,不用把这些运算符都记住,写程序时自然会用就OK。下面说几个与java不一样的js运算符：
    • 1、===：全等运算符,不仅值相等而且类型也要相等才会返回true
    • 2、&& ||：逻辑运算符,js中只有双与和双或,没有单与和单或
    • 3、- * / : 算数运算符,js中数字字符串进可以进行数学运算 但+法运算除外因为字符串本身具备加法运算就是连接字符串
      • alert("44"-1);结果为43

js的逻辑语句

跟java一样,js也存在if、if-else、for、switch等逻辑语句,与java使用方式一致,此处不再一一阐述

js的函数

在js中,通过function关键字来定义函数

  • 1、普通函数：
    • 格式：
      1
      2
      3
      4
      5
      function 函数名(参数列表){
          js逻辑代码;
      }
      //函数调用：
      函数名(实际参数);
    • 注意：
      • 1.函数需要被调用才能执行。
      • 2.js中,如果函数需要返回值我们直接return就行了。定义函数的时候不需要声明返回值的类型,因为js是弱数据类型。
      • 3.在js中,如果我们需要给函数传递参数,那么我们直接写变量就行。也不需要声明传入变量的类型。
      • 4.在js中,不存在函数重载的概念,如果2个函数名一样,后面出现的函数会将前面出现的函数覆盖。
      • 5.如果函数的声明带有参数,调用时不带参数,函数可以正常被调用。
      • 6.如果函数声明时没有参数列表,调用的时候传入参数,函数也能照样执行。
      • 7.既然可以给函数传入参数,在js中,可以通过arguments来获取传入的参数。arguments是js专门用来存放参数的数组。
      • 8.可以给函数起个别名,然后通过别名来调用函数。
  • 2、匿名函数：
    • 匿名函数也就是没有名字的函数 
      1
      2
      3
      function(参数列表){
          js逻辑代码;
      }

js的事件

  • 什么是事件？
    • 我们用户发出的一些动作或者行为,这些能被js检测到,那么这些行为就叫做事件。
    • 当我们输入完用户名,鼠标光标移开的时候,这样的一个动作我们的js或者说浏览器是能够知晓这样一个动作的,所以这样的动作叫做事件。
    • 而我眼睛盯着浏览器看这么一个动作,浏览器并不知道,所以不是一个事件。
  • 事件的作用：
    • 我们可以给事件绑定一个函数,当事件触发的时候,就会执行这个函数。
  • js的事件是js不可或缺的组成部分,要学习js的事件,必须要理解如下几个概念：
    • 1.事件源：被监听的html元素
    • 2.事件：某类动作,例如点击事件,移入移出事件,敲击键盘事件等
    • 3.事件与事件源的绑定：在事件源上注册上某事件
    • 4.事件触发后的响应行为：事件触发后需要执行的代码,一般使用函数进行封装

      常用的事件

事件名 描述
onload 某个页面或图像被完成加载
onsubmit 当表单提交时触发该事件—注意事件源是表单form
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onblur 元素失去焦点
onfocus 元素获得焦点
onchange 用户改变域的内容
onkeydown 某个键盘的键被按下
onkeypress 某个键盘的键被按下或按住
onkeyup 某个键盘的键被松开
onmousedown 某个鼠标按键被按下
onmouseup 某个鼠标按键被松开
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
onmousemove 鼠标被移动

事件绑定函数

  • 1、方式一:<标签名 事件名=函数>
  • 2、方式二(动态绑定):
    • 格式：标签对象.事件名 = function(){}
    • 例如： 
      1
      2
      3
            document.getElementById("mydiv").onclick = function(){
      	alert("点的好");
      }

js的BOM(Browser Object Mode,浏览器对象模型)

是将我们使用的浏览器抽象成对象模型

js的BOM对象

  • 1.Screen对象:Screen对象中存放着有关显示浏览器屏幕的信息。
  • 2.Window对象:Window对象表示一个浏览器窗口或一个框架。
  • 3.Navigator对象:包含的属性描述了正在使用的浏览器
  • 4.History对象:其实就是来保存浏览器历史记录信息。
  • 5.Location对象:Location对象是Window对象的一个部分,可通过window.location属性来访问。

Window对象

  • Window对象此处学习它的三个作用：
    • 1.弹框的方法
    • 2.定时器
    • 3.全局方法
      (1)弹框的方法
  • 大家都用支付宝付款过，当我们付款的时候，支付宝经常会弹出一个框框，问我们是否确认付款。这样一个弹窗非常有必要，这样防止我们用户的误操作。
  • 1）提示框：alert(提示信息);
  • 2）确认框：confirm(提示信息);
  • 3）输入框：prompt(提示信息);
    (2)定时器
  • 顾名思义，定时器就是可以给我们运行的函数设置什么时候运行，怎么去运行。
    • 1）执行多次的定时器: setInterval(函数，毫秒值);
      • 这个定时器的作用是每隔一段时间就去执行指定的函数。
    • 2）执行一次的定时器: setTimeout(函数，毫秒值);
      1. 停止周期性的执行某个函数: clearInterval(id_of_setInterval);
      • id_of_setInterval:就是setInterval函数的返回值
        (3)常用的全局方法
  • 1）parseInt/parseFloat函数
  • 2）eval函数—特点：可以将字符串解析成js脚本 
    1
    2
    3
    4
       var jsonStr = "{'name':'lxy','age':'23','size':'36'}";
       //为什么要加上()呢？
    var json = eval("("+jsonStr+")");
    alert(json.age);

    Location对象

  • 重点记忆location.href可以在js中进行url访问
    1
    2
    3
    4
    5
    6
    <script type="text/javascript">
    	/*
    	 location.href去访问某个网址
    	 * */
    	location.href = "http://www.baidu.com";
    </script>

js的DOM(Document Object Model,文档对象模型)

html文档加载到浏览器的内存中后，我们认为形成了一颗DOM树，即html标签按照层级结构而形成了一颗“家谱树”，而任何一个html标签、标签属性和文本都是这个树上的节点元素。

js的DOM的操作方法

(1)标签元素的操作
  • 1）获得元素对象：
    • Document.getElementById();通过标签的属性值获取标签对象，返回的是单个的标签对象.
    • Document.getElementsByName();通过标签的name属性值获取标签对象，返回的是标签对象的数组。
    • Document.getElementsByTagName();通过标签的名称获取标签的对象,返回的是标签对象的数组
    • Document.getElementsByClassName();通过标签的class属性获取标签对象，返回的是标签对象的数组。
  • 2）创建一个新元素
    • Document.createElement(tagName);创建标签对象
  • 3）标签体的获取与设置：
    • Element.innerHTML:获取开始标签到结束标签之间的内容。包括标签
    • Element.innerText:获取开始标签到结束标签之间的文本，不包括标签
  • 4）子节点的操作
    • Element.hasChildNodes();判断当前标签对象下是否含有子节点。返回值是boolean值
    • Element.remove();删除当前标签对象
    • parentElement.removeChild(childElement);通过父标签对象删除子标签对象
    • parentElement.replaceChild(newChild,oldChild);替换父节点下的子节点。
    • parentElement.appendChild(ChildElement);向父标签下追加子标签对象
    • ParentElement.insertBefore(newElement,refElement);向父标签下指定的子节点前添加标签对象
      (2)属性的操作
  • 获得属性的值：element.getAtrribute(name);
  • 设置属性的值：element.setAtrribute(name,value);
  • 删除某个属性：element.removeAtrribute(name);

js的对象

与java一样，js也内置一些现成的对象供我们使用，js中内置对象有如下几个：

  • 1．Array对象
    • Array对象是数组对象，跟java中的数组一个意思，但是使用语法上稍微有些区别。
    • (1)创建数组对象的方式：
      • 创建一个空数组：var arr = new Array();
      • 创建一个指定大的数组：var arr = new Array(size);
      • 创建数组并填充元素：var arr = new Array(element0, element1, ..., elementn);
      • 直接创建元素数组：var arr = [element0, element1, ..., elementn];
    • (2)数组中元素的获取：跟java一样通过索引(从0开始)的方式获得数组中的元素：
      • 获得数组中的一个元素：arr[0]
      • 遍历获得数组中的所有元素： 
        1
        2
        3
        for(var i=0;i<arr.length;i++){
            alert(arr[i]);
        }
    • (3)多维数组操作:js中的数组跟java中的集合相似，也就是数组中的元素还是以是数组 
      1
      2
      3
      4
      5
      arr = [
      [1,2,3],
      [4,5,6],
      [7,8,9]
      ]
      • 获取数组中的8数字可以：arr[2][1]
  • 2．日期对象
    • (1)创建方式
      • 创建当前日期时间：var date = new Date();
      • 创建指定日期时间：var date = new Date(毫秒值);
      • 其中毫秒值为1970-01-01至今的时间毫秒值
    • (2)时间的获取
      • 获得年：getFullYear():从Date对象以四位数字返回年份。
      • 获得月：getMonth():从Date对象返回月份 (0 ~ 11)。
      • 获得星期：getDay():从Date对象返回一周中的某一天 (0 ~ 6)。
      • 获得日：getDate():从Date对象返回一个月中的某一天 (1 ~ 31)。
      • 获得毫秒值：getTime():返回1970-01-01至今的毫秒数。
  • 3．Math对象
    • Math对象是数学对象，是一个工具对象，因此Math对象不用使用new的方式创建，直接使用Math就可以调用对象内部的方法。
    • Math.abs(x):返回数的绝对值。
    • Math.ceil(x):对数进行上舍入。
    • Math.floor(x):对数进行下舍入。
    • Math.random():返回0~1之间的随机数。
    • Math.round(x):把数四舍五入为最接近的整数。
  • 4．RegExp对象 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <script type="text/javascript">
        /*
        js中的正则表达式要加上^  $;
        regExp.test(str);验证字符串的格式
        如果验证成功，那么返回true，失败返回false。
        */
        var regExp = new RegExp("^\\w{6}$");
        var username = "admin";
        var res = regExp.test(username);
        alert(res);
    </script>