HTML02---javaScript

HTML02 JavaScript

一 JavaScript概述

1. 什么是JavaScript

  • JavaScript是因特网上最流行的脚本语言。
  • 脚本语言不能单独使用,必须嵌入到其他语言中组合使用
  • JavaScript不能单独使用,必须和其他语言(HTML)结合使用
  • JavaScript由浏览器解释执行(解释一条,执行一条。故写代码时能用一条语句就不要用两条语句)
  • JavaScript代码:必须效率和可读性
  • JavaScript代码遇到错误,解析引擎停止

2. 作用及特点

  • 可以控制前端页面的逻辑操作书写规范
  • 可以控制CSS的样式;
  • JS可以对表单项进行校验, 和后台进行交互
  • JS可以对HTML元素进行动态控制(非重点)
  • 特点:
    • 安全性(没有访问系统文件权限,无法用来做木马病毒)
    • 跨平台性(浏览器有JS的解析器,只要有浏览器就能运行JS代码,和平台无关)
    • 交互性(JavaScript控制HTML元素)

3. 结合方式

  • 内部使用
    • <script type="text/javascript">JavaScript的代码</script>
  • 外部引用
    • <script type="text/javascript" src="javascript文件路径"></script>
    • 外部引用时script标签内不能有script代码,即使写了也不会执行

二 基本语法

1. 变量

JavaScript是一种弱数据类型的编程语言

变量可以用来保存任何类型的数据,定义变量的时候要使用var操作符,后面跟变量名(标识符同java)。

####1.1 基本数据类型

  • 字符串类型String

    • 单引号和双引号都是字符串 , 其余用法同java
  • 布尔类型Boolean(同java)

  • 数字类型number

    • 包括所有数字
    • 特殊number类型 : NaN(not a number) , 注意 : NaN != NaN
  • 空占位符null ( 表示对象不存在 )

  • 值未定义undefined

    • 值未定义。即声明变量未赋值,系统会自动赋值undefined
    • 变量声明未赋值时使用/对象的属性未赋值时使用 都会出现undefined

1.2 引用数据类型

  • Javascript常用对象-Boolean
  • Javascript常用对象-Number
  • Javascript常用对象-Array
  • Javascript常用对象-String
  • Javascript常用对象-Date
  • Javascript常用对象-Math
  • Javascript常用对象-RegExp

Boolean
  • 对象描述 : 在 JavaScript 中,布尔值是一种基本的数据类型。Boolean 对象是一个将布尔值打包的布尔对象。Boolean 对象主要用于提供将布尔值转换成字符串的 toString() 方法。

  • 对象使用 :

    new Boolean(value);	//构造函数
    Boolean(value);		//转换函数
    
  • 参数 : 参数 value 由布尔对象存放的值或者要转换成布尔值的值。

  • 返回值 :

    • 当作为一个构造函数(带有运算符 new)调用时,Boolean() 将把它的参数转换成一个布尔值,并且返回一个包含该值的 Boolean 对象。
    • 如果作为一个函数(不带有运算符 new)调用时,Boolean() 只将把它的参数转换成一个原始的布尔值,并且返回这个值。
  • 注意 : 如果省略 value 参数,或者设置为0、-0、null、""、false、undefined 或 NaN ,则该对象设置为 false。否则设置为 true(即使 value 参数是字符串 “false”)。


Number
  • 对象描述 : 在 JavaScript 中,数字是一种基本的数据类型。JavaScript 还支持 Number 对象,该对象是原始数值的包装对象。在必要时,JavaScript 会自动地在原始数据和对象之间转换。

  • 对象使用 :

    var myNum=new Number(value);
    var myNum=Number(value);
    
  • 参数 : 参数 value 是要创建的 Number 对象的数值,或是要转换成数字的值。

  • 返回值 : 当 Number() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 Number 对象。如果不用 new 运算符,把 Number() 作为一个函数来调用,它将把自己的参数转换成一个原始的数值,并且返回这个值(如果转换失败,则返回 NaN)。


Array
  • Array 对象用于在单个的变量中存储多个值。

  • 常用构造方法 :

    new Array();//空的
    new Array(size);//size为变量个数length
    new Array(element0, element1, ..., elementn);//基本同上,不常用
    
  • 当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。

  • Array对象常用方法 :

    concat()		---		连接两个或更多的数组,并返回结果.
    join()			---		把数组的所有元素放到一个字符串,元素通过指定的分隔符进行分割.
    pop() 			--- 	删除并返回数组的最后一个元素.
    shift() 		--- 	删除并返回数组的第一个元素.
    push()			---		向数组的末尾添加一个或更多元素,并返回新的长度.
    reverse()		---		颠倒数组中元素的顺序.
    slice()			---		从某个已有的数组返回指定的元素.
    sort()			--- 	对数组的元素进行排序.
    splice()		---		删除元素,并向数组添加新元素.
    toSource()		---		返回该对象的源代码.
    toString()		---		把数组转换为字符串,并返回结果.
    toLocaleString() ---	把数组转换为本地数组,并返回结果.
    unshift()		---		向数组的开头添加一个或者更多元素,并返回新的长度.
    valueOf() 		---		返回数组对象的原始值.
    

String
  • 对象描述 :

    • 字符串是 JavaScript 的一种基本的数据类型。
    • String 对象的 length 属性声明了该字符串中的字符数。
    • JavaScript 的字符串是不可变的(immutable),String 类定义的方法都不能改变字符串的内容。所有的方法都是返回新的字符串 , 而不是修改原来的字符串
  • String常用方法 :


Date
  • Date 对象用于处理日期和时间。
  • 创建Date对象时 , Date 对象会自动把当前日期和时间保存为其初始值。
  • Date常用方法 :

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-20ZRv0Ai-1606480565749)(D:\duoyi\01_学习笔记\img\JavaScript-date01.png)]

JavaScript-date02

JavaScript-date03


Math
  • Math 对象用于执行数学任务。
  • 注意:Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。
  • 您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
  • 常用方法 :

JavaScript-math01


RegExp
  • RegExp 对象表示正则表达式,它是对字符串执行模式匹配的强大工具。

  • 创建 RegExp 对象的语法:

    new RegExp(pattern, attributes);
    
  • 参数 :

    • 参数 pattern 是一个字符串,指定了正则表达式的模式或其他正则表达式。
    • 参数 attributes 是一个可选的字符串,包含属性 “g”、“i” 和 “m”,分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前,不支持 m 属性。如果 pattern 是正则表达式,而不是字符串,则必须省略该参数。
  • 返回值 :

    • 一个新的 RegExp 对象,具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串,那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。
    • 如果不用 new 运算符,而将 RegExp() 作为函数调用,那么它的行为与用 new 运算符调用时一样,只是当 pattern是正则表达式时,它只返回 pattern,而不再创建一个新的 RegExp 对象。

2. 运算符

2.1 算数运算符

  • 加号 : 除两个number类型相加为数字 , 其余情况下为字符串连接符
  • 其他运算符使用后,返回的结果都为number类型。
  • 不能转换成标准number类型的,转换为NaN(包括undefined),NaN参与运算,结果均为NaN
  • null自动转换为0
  • true转换为1;false转换为0

2.2 赋值运算符

  • 同java

2.3 比较运算符

  • == 比较值
    • === 比较值和类型。 如果变量值和变量类型都相同,那么true,只要有一个不同 false
      • !=比较值
      • !==全不等。比较值或比较类型,有一个不同即为不同,true. 值和类型都相同,那么false

2.4 逻辑运算符

  • && 逻辑与|| 逻辑或! 非 与java相同
  • 所有数据类型都会自动转换为Boolean类型进行运算
  • 0、-0、null、""、false、undefined 或 NaN,为false , 否则为true

2.5 条件运算符(三元运算符)

var val=(表达式)?value1:value2

  • 条件运算符 最终都是为了赋值
  • 表达式,最终都是boolean类型的运算

3. 流程控制语句

  • if语句、switch语句和for语句,均与java相同
  • for…in 循环:
    • 类似于Java的增强for循环(但有本质区别)
    • java中的变量是数组或集合中的元素
    • JavaScript中for in循环的变量是索引

4. JavaScript函数

####4.1 与java中方法的区别

  • JavaScript的函数可以理解位java中的方法
  • 面向函数编程思想 : 函数和方法的意义是一样的 , 但是函数可以作为对象的形式单独存在,可以作为方法的参数传递
  • JavaScript函数没有方法重载,一是定义方法时不必确定参数类型;二是调用方法时,可以传入多于定义数量的参数,方法体内按需使用,不会报错
  • 关于返回值:如果需要返回值,在方法体中直接添加return,便可直接使用;如不需要可不写

4.2 创建与调用函数

  • 在javascript中有一个特殊的对象arguments,我们可以通过它来获取所有函数中的参数。
<script type="text/javascript">
	//创建函数
	function add(a, b) {
		//在函数中如果要获取所有参数列表中的信息可以使用argument来操作
		for(var i=0;i<arguments.length;i++){
          	//以网页弹窗的形式打印
			alert(arguments[i]);
		}
	}
	add(1,2,3,4);
</script>

##三 JS的DOM对象

1. DOM定义

  • DOM — Document Object Module数据对象模型
  • JS可以通过DOM将HTML中的一切节点,转化为对象,对其进行操作
  • 基本DOM结构模型如下:

###2. DOM节点基本属性

  • 文档节点 : 一个HTML文件便是一个文档节点
  • 元素节点 : 每个HTML标签都是一个标签节点(包括html标签)
  • 属性节点 : 标签的各种属性就是属性节点
  • 文本节点 : 标签外的文本内容就是文本节点

3. DOM常用方法

JS为我们提供了一个现成的获取DOM模型的一个入口:Document对象

  • 我们可以通过Document对象获取其他对象
//返回对拥有指定 id 的第一个对象的引用 
document.getElementsById()
//返回对拥有指定 name 的第一个对象的引用 
document.getElementsByTagName()
//返回对拥有指定 class 的对象的引用 
document.getElementsByClass()

document.write("写到页面");

四 JavaScript事件

1. JS事件介绍

  • JavaScript事件便是记录用户在浏览器上的操作行为(包括用户在浏览器上可能会 单击 , 双击 , 鼠标滑过 , 输入框获得焦点 , 失去焦点操作)
  • 事件和方法绑定才有意义: 事件绑定
  • 事件通常与函数配合使用,这样我们可以通过发生的事件来驱动函数执行.

2. 常见事件

3. 事件绑定

  • 方法一:在事件发生的标签内,直接绑定

    <body>
      	<button onclick="hid()">点击隐藏图片</botton>
    	<img id="oneimg" src="url"/>
    </body>
    
    <script>
          function hid(){
          //使用DOM获取图片对象
          var img = document.getElementById("oneimg")
          img.hidden = true
        }
    </script>
    
  • 方法二:将事件绑定写入到JavaScript中

    <body>
      	<button id="onebt">点击隐藏</button>
    	<img id="oneimg" src="url" />
    </body>
    
    <script>
    	//定义隐藏图片的方法
        function hid(){
    	var img = document.getElementById("oneimg")
        img.hidden = true
        }
        
        //进行事件绑定
        document.getElementById("onebt").onclick = function(){
            hid()
        }
    </script>
    

五 JS对Cookie的操作

<script>
    //cookie是以键值对的形式存在,设置(添加)cookie
    document.cookie="userId=828";
    document.cookie="userName=hulk";
  
    //调用document.cookie方法,取出所有的cookie
    var cookies=document.cookie;
    //取出的cookie以字符串的形式存在
    document.writeln(cookies)//userId=828; userName=hulk

    //可以通过indexOf方法寻找键所在的索引
    var  cName = document.cookie.indexOf("userName=");//12
</script>
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页