【JavaScript】相关知识学习笔记

最新推荐文章于 2024-06-23 21:13:16 发布

源星海

最新推荐文章于 2024-06-23 21:13:16 发布

阅读量299

点赞数

分类专栏：初学笔记文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_49467214/article/details/121702844

版权

JavaScript笔记

定义:

JavaScript是一种基于对象和事件驱动的,并具有安全性能的脚本语言.

特点:

01.向HTML页面中添加交互行为

02.脚本语言,语法跟java类似

03.解释性语言,边执行边解释

组成:

01.ECMAScript

02.DOM

03.BOM

基本语法结构:

<script type = "text/javascript">
    <!--
		javascript语句
    -->
</script>

执行原理:

01.浏览器输入–>02.发送包含javascript的请求页面–>03.服务器解析HTML标签和javascript(减轻服务器压力)–>04.从服务器下载包含javascript的页面(返回响应).

网页中引用javascript的三种方式

01.使用< script>标签(内部样式)

//例如
</script> 
<script src="js/index.js" type="text/javascript" charset="utf-8">
</script>

02.直接写在HTML标签里(行内/内嵌样式)

<!-- 行内  事件驱动  点击事件:当你点击标签  触发事件 -->
<h1 onclick="javascri pt:alert('清除缓存成功!')">今天学习JavaScript了</h1>
//写在了h1标签里面,注意javascript是基于事件驱动的

03.外部js文件(外部样式)

跟内部样式一样,只不过多了一个引用过程

核心语法

变量/数据类型/数组/运算符号/控制语句/注释/输入输出/语法约定

ECMAScript

01.变量的声明

//先声明后赋值,后面的;可加可不加
var width(变量名);
width = 5;
//也可以边声明边赋值
var width = 5;
//也可以直接赋值(弱类型语言的优势),但不推荐

//同时声明并多个赋值
var a,b,c = 10;

02.数据类型

01. number 整数,浮点数…

02. string 字符串类型’'或""

03. null 空值(有赋值,但是赋的值为空)

04. undefined (没有初始值时,值等于null,但是两者并不相同)

05. object javascript中的对象`数组和null

06.boolean true或false

js 的数据类型是根据你所赋值而决定的

alert (typeof 变量名) – 弹窗查看变量的数据类型

document.writer("") – 输出语句

03.数组

01.length – 设置或返回数组中元素的数目

02.join() – 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔

03.sort() – 对数组排序

04.push() – 向数组末尾添加一个或更多元素，并返回新的长度

	<script type="text/javascript">
			// 数组的应用
			// 创建数组
			/* var arr = new Array(4)
			arr[0] = 1
			arr[1] = 2
			arr[2] = 3
			arr[3] = 4
			arr[4] = 5
			alert(arr[4]) */
			// 第二种创建方式
			/* var arr = new Array("zhangsan","lisi","wangwu")
			for (var i = 0; i < arr.length; i++) {
				alert(arr[i])
			} */
			// var arr = Array(1,2,3,4,6)
			// for (var i = 0; i < arr.length; i++) {
   
			// 	alert(arr[i])
			// }
			//  数组的方法
			// 将数组种的元素拼接成字符串
			/* var arr = Array["今天","天气","真凉爽"]
			arr.push("?")  // 往数组种添加元素
			alert(arr.join()) */
			// 排序
			var arr = Array(3,5,72,2,6,4,76)
			arr.sort()
			for (var i = 0; i < arr.length; i++) {
   
				alert(arr[i])
			}
		</script>

04.String对象

字符串对象.length = 变量中字符串的计数(长度)

例如:

var str = "this is JavaScript"
var strLength = str.length   //长度strLength = 18

方法:

/*charAt(index)--返回在指定位置的字符
index Of(str,index)--查找某个指定的字符串在字符串中首次出现的位置
substring(index 1, index 2)--返回位于指定索引index 1和index 2之间的字符串，并且包括索引index 1对应的字符,不包括索引index 2对应的字符
split(str)--将字符串分割为字符串数组*/
//例:
<script type="text/javascript">
			// String类型
			var str = "你的,商品,注册,商标了吗?";
			// 获取指定下标的字符
			//alert(str.charAt(2))
			// 获取注字下标
			//alert(str.indexOf("注"))
			//获取商品两个字  
			//alert(str.substring(2,4))
			// 获取字符串长度
			//alert(str.length)
			// 字符串拆分
			var arr = str.split(",")
			// 遍历数组
			for (var i = 0; i < arr.length; i++) {
   
				alert(arr[i])
			}	
		</script>
//例题:统计里面包含a跟A的字符串
<script type="text/javascript">
		//01.创建字符串数组
        var  strArr = ["America","Greece","Britain","Canada","China","Egypt"];
		//定义总计的变量
        var count = 0;
		document.write("在以下字符串中:"+"<br>");
		//for循环遍历
        for(var i in strArr){
   
            document.write(strArr[i]+"<br>");
			//设置条件字符串中a跟A的下标不等于-1
            if(strArr[i].indexOf("a")!=-1 || strArr[i].indexOf("A")!=-1){
   
                count++;
            }
        }
        document.write("共有"+count+"个字符串中包含字母a或A！");
		</script>

05.运算符号

		<script type="text/javascript">
			var a 
			var b = null
			alert(a === b)  // == :比较值  全等于(===) 比较地址值
		</script>

06.逻辑语句

输入: prompt("请输入你循环的次数:")
输出: alert("恭喜你,及格了!") 或者 document.write(strArr[i]+"<br>");

		<script type="text/javascript">
			// var i = prompt("请输入你循环的次数:")
			// 字符串转数值
			//i = parseInt(i)
            
            //if条件语句
            
			/* if(i < 70){
				alert("不及格,需要补考,下周一!")
			}else{
				alert("恭喜你,及格了!")
			} */
            
            //switch多分支语句
            
			/* switch (i) {
				case 1:
					alert("一年级")
					break;
				case 2:
					alert("二年级")
					break;
				default:
					break;
			} */
            
            //while循环
			
			/* while (i > 0){
				document.write("hello "+i)
				i--
			} */
            
			// for in
            
			var a= new Array("h","e","l","l","o")
			// 根据下标遍历
			/* for (var index in a) {
				document.write(a[index])
			} */

			// 跟增强for类似
			for (var item of a) {
   
				document.write(item)
			}
			
		</script>

07.调试程序

打开浏览器->源代码->打断点刷新浏览器单步运行

alert()

08.函数

//parseInt,parseFloat与isNaN

		<script type="text/javascript">
			//系统函数
			var str = "4"
			// 转换成数值类型(输出数值类型)
			alert(typeof parseInt(str))//转换成整形
			alert(typeof parseFloat(str))//转换成浮点型
			
			// 判断是否是数值类型 isNAN   is not a number:是不是一个数值
			if(isNaN(str)){
      //true:字符串  false:数值
				alert("字符串")
			}else{
   
				alert("数值")
			}
		</script>


//定义与调用有参无参函数
	<h1 onclick="toFun()">点我输入5次好好学习</h1>
//onelick-->点击触发事件
	<script type="text/javascript">
		// 函数 的语法 function 函数名(参数列表){代码 return}
			
		function toFun(){
   //(有参函数)
			for (var i = 0; i < 5; i++) {
   
				// 输出的是文档对象 会替换掉之前的文档对象
				document.write("<p>好好学习天天向上</p>")
			}
		}
			
		// 定义函数计算两个数的加法(无参函数)
		function add(num1,num2){
   
			return num1+num2
		}
		alert(add(6,8))
	</script>


//作用域
//看谁大谁小,括号跟语法

09.事件

属性	当以下情况发生时，出现此事件	FF	N	IE
onabort	图像加载被中断	1	3	4
onblur	元素失去焦点	1	2	3
onchange	用户改变域的内容	1	2	3
onclick	鼠标点击某个对象	1	2	3
ondblclick	鼠标双击某个对象	1	4	4
onerror	当加载文档或图像时发生某个错误	1	3	4
onfocus	元素获得焦点	1	2	3
onkeydown	某个键盘的键被按下	1	4	3
onkeypress	某个键盘的键被按下或按住	1	4	3
onkeyup	某个键盘的键被松开	1	4	3
onload	某个页面或图像被完成加载	1	2	3
onmousedown	某个鼠标按键被按下	1	4	4
onmousemove	鼠标被移动	1	6	3
onmouseout	鼠标从某元素移开	1	4	4
onmouseover	鼠标被移到某元素之上	1	2	3
onmouseup	某个鼠标按键被松开	1	4	4
onreset	重置按钮被点击	1	3	4
onresize	窗口或框架被调整尺寸	1	4	4
onselect	文本被选定	1	2	3
onsubmit	提交按钮被点击	1	2	3
onunload	用户退出页面	1	2	3

//示例:
<html>
	<head>
		<meta charset="utf-8">
		<title

最低0.47元/天解锁文章

源星海

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【JavaScript】相关知识学习笔记

JavaScript笔记定义: JavaScript是一种基于对象和事件驱动的,并具有安全性能的脚本语言.特点: 01.向HTML页面中添加交互行为 02.脚本语言,语法跟java类似 03.解释性语言,边执行边解释组成: 01.ECMAScript 02.DOM 03.BOM基本语法结构:<script type = "text/javascript"> </script&g
复制链接

扫一扫