前端网页三剑客------JavaScript基础

火星&辉

已于 2022-01-25 19:01:59 修改

阅读量807

点赞数

分类专栏： javaweb基础文章标签： javascript 前端开发语言 java

于 2022-01-25 18:50:37 首次发布

本文链接：https://blog.csdn.net/m0_51500007/article/details/122690509

版权

javaweb基础专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前端网页三剑客------JavaScript基础

一、基础语法

1、引入方式
	行内JS：在标签内部编写JS代码，配合事件使用。
		<input type="button" value="幸运大抽奖" onclick="alert()" >
		
	内嵌JS：通过script标签嵌入JS代码，可以出现在任意位置，数量不限。
		<script>
            alert('helloworld');
            alert('are you ok?');
   	 	</script>
   	 	
	外部JS：通过script标签的scr属性，引入脚本文件*.js【只能用于引用，不能再写JS代码】
		<script src="./js/demo.js"></script>
		
2、注释
	单行：//
	多行：/**/
	
3、数据类型
	（1）Undefined:Undefined类型只有一个值即undefined。当声明的变量未初始化时，默认值就是undefined。
    （2）Object:表示对象的类型，比如时间、数组等对象
    （3）Boolean:表示真假，只有两个值true和false。
    （4）Number:表示任意数字，在JS中所有值类型统称为数字类型。
    （5）String:字符串类型用单引号或者双引号赋值。
    
4、变量【通过typeof(变量名)查看变量的数据类型】
	声明：
		var 变量名 = 变量值；		//  `变量的数据类型随着值的改变而改变`
		
5、运算符【==相等  ===全等】
	(1)算术运算符:+  -   *  /  %   ++   -- 等。
    (2)赋值运算符:=   +=   -=   *=  /=   %= 等。
    (3)比较运算符:> 、< 、>= 、<=、==、!=、===(全等)
    (4)逻辑运算符:&&(短路与)、||(短路或)、!(非)
    (5)条件（三元）运算符:表达式 ? 值1 : 值2 (表达式为true取值1，表达式为false取值2) 
    以上所有运算符的使用与java类似。
    
6、流程控制语句
	if...else...  
	switch 
	while
	do...while
	for
	增强for
	以上所有流程控制语句和Java类似。
	
7、增强for
	(1)for...in：【i表示数组索引】
		for(var i in arr){}
	(2)for...of：【i表示数组元素】
		for(var i of arr){}
		
8、函数
	function 方法名(形参){
		方法体；
		return 结果；
	};
   js函数的特点：
    （1）形参类型、返回值类型不用写
    （2）同名方法被覆盖，不存在重载
    （3）调用时，之和方法名（函数名）有关

二、常用对象

1、Array数组对象

1、创建数组：
  （1）var arr = new Array();			//空数组 
  （2）var arr = new Array(默认长度)	 //默认长度的数组
  （3）var arr = [元素列表];			 //具有初始值的数组
2、特点：
	（1）长度可变
	（2）存储的数据类型任意
3、length属性：
	获取数组长度、元素个数
4、常用方法：
  （1）join(参数); 将数组元素通过指定的字符拼接成字符串
  （2）push(); 向数组的末尾添加一个或更多元素，并返回新的长度

2、Date日期对象

1、创建
	var date = new Date() 	// 获取当前时间。
2、常用方法
	（1）toLocaleString()：转换日期格式
		toLocaleDateString():只显示年月日
		toLocaleTimeString():只显示时分秒
    （2）getTime()：返回 1970 年 1 月 1 日至今的毫秒数
    （3）getHours()：返回小时数。
    （4）getMinutes()：返回分钟数。
    （5）getSeconds()：返回秒数

3、Math数学对象

1、Math对象不用创建，直接调用方法使用。
2、常用方法：
	（1）random()：返回 0 ~ 1 之间的随机数
    （2）max(x,y)：返回 x 和 y 中的最大值
    （3）min(x,y)：返回 x 和 y 中的最小值
    （4）ceil(x)：向上取整       
    （5）floor(x)：向下取整
    （6）round(x)：四舍五入取整
    （7）abs(x)：绝对值
3、属性
	PI：圆周率

4、String字符串对象

1、创建：
	var str = "abc"; // string类型  
	var str = new String("abc"); // object类型
2、常用方法：
  （1）length()：获取字符串长度
  （2）startsWith()：是否以某个字符开头
  （3）endsWith()：是否以某个字符结尾 
  （4）截取字符串：
        substring(start,end)：截取，含头不含尾
        substr(start,end)：截取，指定长度
  （5）根据某个字符拆分字符串 返回数组 split()
   (6) 判断字符串中是否存在指定字符  indexOf()
   (7) 转换大写  toUpperCase()
   (8) 转换小写  toLowerCase()

三、正则表达式

1、单个字符：如 [a]、 [ab] 、[a-zA-Z0-9]
2、元字符：元字符就是指那些在正则表达式中具有特殊意义的专用字符   \d 任意数字    \w 任意数字字母下划线
3、量词符号：
	?：表示出现0次或1次
	*：表示出现0次或多次
	+：表示出现1次或多次
	{m,n}：表示m=<数量<=n
4、开始结束符号:
	^ 开始
	$ 结束
5、创建正则表达式对象：
	（1）var reg = new RegExp("正则表达式");
	（2）var reg = /正则表达式/;
6、测试正则验证的方法：
	test(参数)：验证指定的字符串是否符合正则定义的规范
	true/false = 正则表达式对象.test(用户填写的字符串);
        true：字符串匹配成功
        false：字符串匹配失败
7、怎么创建正则表达式对象？
	第一种方式：
		var regExp = /正则表达式/flags;
	第二种方式：使用内置支持类RegExp
		var regExp = new RegExp("正则表达式",flags);			
	  关于flags：
		g  全局匹配
		i  忽略大小写
		m  多行搜索（ES规范制定之后才支持） 当前面是正则表达式的时候，m不能用。只有前面是普通字符串的时候，m才可以使用。

四、事件

为页面元素对象绑定事件：
	（1）在标签中指定事件的属性：<button id="btn" onclick="func01()">点击事件</button>
	需要在脚本中，先行定义好func01这个方法~
	（2）获取标签元素绑定事件：document.getElementById("btn").onclick = function(){}
	第二种绑定事件用到的是匿名函数，直接书写方法体代码即可
常见事件：
		blur 失去焦点
        focus 获得焦点
        
        keydown 键盘按下
        keyup 键盘弹起
        keypress 键盘按住不放

        click 鼠标点击
        dblclick 鼠标双击

        mousedown 鼠标按下
        mouseover 鼠标悬停
        mousemove 鼠标移动
        mouseout 鼠标离开
        mouseup 鼠标弹起

        reset 表单重置
        submit 表单提交

        change 下拉列表选中项改变，或文本框内容改变
        select 文本被选定
        load 页面加载完毕（整个HTML页面中所有的元素全部加载完毕之后发生）


        任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on
        onXXX这个事件句柄出现在一个标签的属性位置上。（句柄以属性的形式存在）

在这里插入图片描述

五、DOM操作【操作html文档对象】

在这里插入图片描述

1、获取元素对象

document.getElementById(id)：通过id获取，返回单个元素。
document.getElementsByTagName(name)：通过标签名获取，返回元素数组。
document.getElementsByClassName(name)：通过类名获取，返回元素数组。
document.getElementsByName(name)：通过名称获取，返回元素数组。

2、操作元素属性

第一套方法：
    获取元素属性:  页面元素.属性名;
    设置元素属性:  页面元素.属性名 = 值;
第二套方法
  	设置：标签对象.setAttribute("属性名","属性值");
  	获取：标签对象.getAttribute("属性名");
	删除：标签对象.removeAttribute("属性名");

3、操作元素样式

1、直接操作：页面元素.style.样式名="值"；
2、间接操作：
	通过修改class属性间接操作元素样式
	页面元素.setAttribute(“class”, “类名1 类名2”)

4、操作元素内容

innerHTML：操作内容，可以识别标签
innerText：操作内容，只能识别文本

双标签：innerHTML属性
单标签input、双标签select、textarea：value属性

六、BOM【浏览器对象模型】

在这里插入图片描述

简介：
	Bom有一个核心的对象window，window对象包含了6个核心模块
        document:文档对象
        Frames:html的自框架
        History:浏览记录
        Location:页面地址
        Navigator:浏览器信息
        Screen:屏幕信息

Window对象

方法：
	弹窗方法：
		alert(); 带确认按钮的警告框
        confirm(); 带确认按钮、取消按钮的对话框 
        prompt(); 带输入的对话框【不常用】
        
    定时器方法：
		1、周期定时器：按照指定的周期来调用函数或代码串，执行多次。
		  定义：var timeid=Window.setInterval(code,millisec);
		  清除：window.clearInterval(timeid);                       

		2、超时定时器(一次性定时器)：在指定的毫秒数后调用函数或代码串，只执行一次。
          定义：var timeid=Window.setTimeout(code,millisec);
          清除：window.clearTimeout(timeid);
            参数说明：
                code:执行代码
                millisec:时间间隔，以毫秒为单位
                timeid：定时器

History对象

1、window.history 对象包含浏览器历史。
2、方法：
（1）history.back()  后退
（2）history.forward()   前进
 (3)history.go(i)
        i>0：前进i次
        i<0：后退i次

Location对象

属性：
	href  路径
方法：
	reload():刷新当前页面

单位

            timeid：定时器
History对象
1、window.history 对象包含浏览器历史。
2、方法：
（1）history.back() 后退
（2）history.forward() 前进
(3)history.go(i)
i>0：前进i次
i<0：后退i次
Location对象
属性：
href 路径
方法：
reload():刷新当前页面