js笔记

最新推荐文章于 2024-03-08 23:01:16 发布

uchiha711

最新推荐文章于 2024-03-08 23:01:16 发布

阅读量123

点赞数

分类专栏： javeweb

本文链接：https://blog.csdn.net/uchiha711/article/details/83001382

版权

javeweb 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JS简介

JS是什么
- js是可以嵌入到html中，是基于对象和事件驱动的脚本语言
  - 脚本语言：脚本语言又被称为扩建的语言，或者动态语言，是一种解释型语言，由解释器来运行，用来控制软件应用程序，脚本通常以文本保存，只在被调用时进行解释或编译
- 特点：
  (1)交互性
  (2)安全性：js不能访问本地磁盘
  (3)跨平台：浏览器中都具备js解析器
JS可以做什么
- js能动态的修改(增删)html和css的代码
- 能动态的校验数据
JS组成
- ECMAScript（核心）/BOM（浏览器对象模型）/DOM（文档对象模型）
JS被引入的方式
- 内嵌脚本
```
<input type="button" value="button" onclick="alert('xxx')" />
```
- 内部脚本
```
<script> // type="text/javascript" 已经不用导入 JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
	alert("xxx");
</script>
```
- 外部脚本
  首先先创建一个.js文件
  其次在html中引入
```
<script type="text/javascript" src="demo1.js"></script>
```
  在导入外部js文件的<script>中不能再写js代码
- JS代码放在哪儿
  JS代码的插入位置
  视频说JS代码插在哪里都可以但是在不影响html功能的前提下越晚加载越好但是在链接和笔记中说<script>一般会写在<head>标签中

JS基本语法

变量
- 变量是用于存储信息的容器，javascript中的变量与我们在java中的变量一样。
  在javascript中使用用 var 运算符（variable 的缩写）加变量名定义的
```
	var x = 5;
	x = 'javascript';
	var y = "hello";
	var b = true;
```
- JavaScript 变量名称的规则：
  变量对大小写敏感（y 和 Y 是两个不同的变量）
  变量必须以字母或下划线开始
  注意：由于 JavaScript 对大小写敏感，变量名也对大小写敏感。
数据类型
- 在ECMAScript中，变量可以存在两种数据类型，即原始类型与引用类型。
  - 原始类型
    - number:数字类型
      在javascript中任何数字都看成是Number类型，它即可以表示32位整数，也可以表示64位浮点数。八进制首数字必须是0,十六进制使用0x开始。
    - string:字符串类型
      在js中可以使用单引号声明
    - boolean:布尔类型
    - null:
      调用typeof显示为object
      该类型只有一个值null,表示尚未存在的对象。值undefined实际上是从值null派生出来的。因此null==undefined得到的结果是true.
    - undefined:
      该类型只有一个值undefined.表示的是未初始化的变量
  - 引用类型
```
		java:	Object obj = new Object();
		js:		var obj = new Object();
					var num = new Number();
```
    ECMAScript 定义了“对象定义”，逻辑上等价于其他程序设计语言中的类。也就是说，遇到引用值，所处理的就是对象。
    常用的javascript对象有 Boolean,Number,Array,String,Date,Math,RegExp.
类型转换
- boolean/string/number的原始值是伪对象，这意味着它们实际上具有属性和方法。
- 转成string
  toString();
- 转成number
  parseInt()
  parseFloat()
  string可以将数字字符串转换成number 如果“123a3sd5” 转成123
  只有对 String 类型调用这些方法，它们才能正确运行；对其他类型返回的都是 NaN。
- 强制类型转换
  - 使用强制类型转换可以访问特定的值。
    ECMAScript 中提供了三种强制类型转换：
    1. 把给定的值转换成Boolean类型
    2. 把给定的值转换成数字
    3. 把给定的值转换成字符串
运算符与表达式
- 一元运算符
  - ++自加/- - 自减
  - void运算符
    void 运算符对任何值返回 undefined。该运算符通常用于避免输出不应该输出的值，例如，从 HTML 的<a> 元素调用 JavaScript 函数时。要正确做到这一点，函数不能返回有效值，否则浏览器将清空页面，只显示函数的结果。例如：
    <a href="javascript:window.open('about:blank')">Click me</a>
    如果把这行代码放入 HTML 页面，点击其中的链接，即可看到屏幕上显示 “[object]”。这是因为 window.open() 方法返回了新打开的窗口的引用。然后该对象将被转换成要显示的字符串。要避免这种效果，可以用 void 运算符调用 window.open() 函数：
    <a href="javascript:void(window.open('about:blank'))">Click me</a>
    这使 window.open() 调用返回 undefined，它不是有效值，不会显示在浏览器窗口中。
    提示：请记住，没有返回值的函数真正返回的都是 undefined。
- 赋值运算符
  var x = 5;
- 算术运算符
  +: 遇到字符串变成连接
  -：先把字符串转成数字然后进行运算
  *: 先把字符串转成数字然后进行运算
  /: 先把字符串转成数字然后进行运算
- 逻辑运算符
  && || ！
- 比较运算符
  < > = >= <=
  - 返回boolean
  - 数字与字符串比较将字符串转换成数字
- 等性运算符
  - ECMAScript提供了两套等性运算符：等号与非等号用来处理原始值，全等号与非全等号来处理对象。
  - 执行类型转换的规则如下：
    1.如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1。
    2.如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字。
    3.如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串。
    4.如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
  - 在比较时，该运算符还遵守下列规则：
    1.值 null 和 undefined 相等。
    2.在检查相等性时，不能把 null 和 undefined 转换成其他值。
    3.如果某个运算数是 NaN，等号将返回 false，非等号将返回 true。
    4.如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。
  - 全等号=== 只有在无需类型转换就相等的情况下才返回true
  - !==表示在无需类型转换就不相等的情况下返回true
- 三元运算符
  var max = (num1 > num2) ? num1 :num2;
- 类型运算符
  typeof:判断数据类型返回我的数据类型
  instanceof：判断数据类型是否是某种类型
  var obj = new Object();
  alert(typeof obj);//object
  alert(obj instanceof Object);//true

逻辑语句

if-else
switch
for

for in

var arr = [1,3,5,7,"js"];
	 for(index in arr){//index代表角标
		//alert(index);  //输出角标
		alert(arr[index]);
	 }

while
do while
- 末尾分号警告

JS内建对象

number
- 创建方式：
  var myNum = new Number(value);
  var myNum = Number(value);
- 属性和方法：
  - toString()
  - valueOf()
Boolean
- 创建方法：
  var bool = new Boolean(value);
  var bool = Boolean(value);
- 属性和方法：
  - toString()
  - valueOf()
String
- 创建：
  var str = new String(s);
  var str = String(s);
- 属性和方法：
  - length
  - charAt():返回索引字符
  - charCodeAt():返回索引字符unicode
  - indexOf()
  - lastIndexOf()
  - split()
  - substring():提取字符串中两个指定的索引号之间的字符
  - substr():从起始索引号提取字符串中指定数目的字符
  - toUpperCase()
Array
- 创建：
  var arr = new Array()
  var arr = new Array(size);
  var arr = new Array(element0,element1,....);
  var arr = [];
  var arr = [1,2,5,"abc"];
- 属性和方法
  - length
  - join():把数组的所有元素放入一个字符串
  - pop():
  - push():
  - reverse()
  - sort()
Date
- 创建
  var myDate = new Date();
  var myDate = new Date(毫秒值); //代表从1970-1-1到现在的一个毫秒值
- 属性和方法
  - getFullYear
  - getMonth() //0-11
  - getDate
  - getDay() //星期 0-6
  - getTime() ：返回1970-1-1午夜到指定日期（字符串）的毫秒值
  - toLocalString():获取本地时间格式的字符串
Math
- 创建
  - 无需创建，通过把 Math 作为对象使用就可以调用其所有属性和方法。
- 属性和方法
  - PI:
  - abs():绝对值
  - ceil():对数进行上舍入
  - floor():对数进行下舍入
  - pow(x,y):返回x的y次幂
  - random()
  - round():四舍五入
RegExp
- 创建
  var reg = new RegExp(pattern);
  var reg = /^正则$/;
- 规则和写法
  - [0-9]
  - [A-Z]
  - [a-a]
  - [A-z]
  - /d 数据
  - /D 非数字
  - /w 查找单词字符
  - /W 查找非单词字符
  - /s 查找空白字符
  - /S 查找非空白字符
  - n+ 匹配n出现的至少一次
  - n* 匹配0次或多次
  - n？匹配0次或1次
  - {m} 匹配m次
  - {l,g} 匹配最少l次最多g次
- 方法
  - test(str):检索字符串中指定的值，返回true或false
- 练习自己想

JS的函数

定义方式
- 普通方式
  - 语法：function函数名（参数列表）{函数体}
  - 示例：
    function method(){ alert("xx"); } method();
- 匿名函数
  - 语法：function(参数列表){函数体}
  - 示例：
```
 	var method = function(){
 		alert("x");
 		};
 	method();
```
- 对象函数
  - 语法： new Function(参数1，参数2，…函数体);
  - 注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
  - 示例：
```
	var fn = new Function("a","b","alert(a+b)");
	fn(2,5);
```

函数的参数
- 形参不用var修饰
- 形参和实参的个数不一定相等
- arguments是一个数组会将传递的实参进行封装

	function fn(a,b,c){
		//var sum = a+b+c;
		//alert(sum);
		for(var i = 0;i < arguments.length;i++){  //arguments是个数组 会将传递的实参进行封装
			alert(arguments[i]);
		}
	}
	fn(1,2,4,8);

返回值
- 在定义函数时不必表明是否具有返回值
- 返回值仅仅通过return关键字就可以 return后的代码不执行
```
	function fn(a,b){
		return a+b;
		//alert("xxxx");
	}
	alert(fn(2,3));
```
js的全局函数
- 编码和解码
  - encodeURI()
    decodeURI()
  - encodeURIComponet() decodeURIComponent()
  - escape()
    unescape()
  - 三者区别：
    - 进行编码的符号范围不同，实际开发中常用第一种
      具体区别
- 强制转换
  - Number()
  - String()
  - Boolean()
- 转成数字
  - parseInt()
  - parseFloat()
- eval()
  - 将字符串当作脚本进行解析
```
	//var str = "var a=2;var b=3;alert(a+b)";
	//eval(str);
	function print(str){
		eval(str);
	}
	print("自定义逻辑");
```

js事件

事件

事件源

响应行为

js常用事件

onclick：点击事件
onchange：域内容被改变的事件
例：二级联动

<select id="city">
	<option value="bj">北京</option>
	<option value="sh">上海</option>
	<option value="tj">天津</option>
</select>
<select id="area">
	<option>海淀</option>
	<option>朝阳</option>
	<option>东城</option>
</select>
<script type="text/javascript">
var select = document.getElementById("city");
select.onchange = function () {
    var optionVal = select.value;
    switch(optionVal){
        case 'bj':
            var area = document.getElementById("area");
            area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>"
            break;
        case 'sh':
            var area = document.getElementById("area");
            area.innerHTML = "<option>浦东</option><option>浦西</option><option>杨浦</option>"
            break;
        case 'tj':
            var area = document.getElementById("area");
            area.innerHTML = "<option>河西</option><option>西青</option><option>南开</option>"
            break;
        default:
            alert("error");	
        }
    };
</script>

onfocus: 获得焦点的事件
onblur:失去焦点的事件
- 例：当输入框获得焦点的时候，提示输入的内容格式。当输入框失去焦点的时候，提示输入有误

	<label for="txt">name</label>
	<input id="txt" type="text" /><span id="action"></span>
	<script type="text/javascript">
		var txt = document.getElementById("txt");
		txt.onfocus = function(){
			//友好提示
			var span = document.getElementById("action");
			span.innerHTML = "用户名格式最小8位";
			span.style.color = "green";
		};
		txt.onblur = function(){
			//错误提示
			var span = document.getElementById("action");
			span.innerHTML = "对不起 格式不正确";
			span.style.color = "red";
		};
	</script>

onmouseover:鼠标悬浮的事件

onmouseout：鼠标离开的事件

例：div元素鼠标移入变为绿色移出恢复原色

		#d1{background-color: red;width:200px;height: 200px;}
		<div id="d1"></div>
		<script type="text/javascript">
			var div = document.getElementById("d1");
			div.onmouseover = function(){
				this.style.backgroundColor = "green";
			};
			div.onmouseout = function(){
				this.style.backgroundColor = "red";
			};
		</script>

onload:加载完毕的事件

等到页面加载完毕在执行onload事件所指向的函数
注意script的位置

		<span id="span"></span>
		<script type="text/javascript">
			window.onload = function(){
				var span = document.getElementById("span");
				alert(span);
				span.innerHTML = "hello js";
			};
		</script>

事件的绑定方式

将事件和响应行为都内嵌到html标签中
<input type="button" value="button" onclick="alert('xxx')"/>
将事件内嵌到html中而响应行为用函数进行封装

	<input type="button" value="button" onclick="fn()" />
	<script type="text/javascript">
		function fn(){
			alert("yyy");
		}
	</script>

将事件和响应行为与html标签完全分离

		<input id="btn" type="button" value="button"/>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				alert("zzz");
			};
		</script>

this关键字
- this经过事件的函数进行传递的是html标签对象

		<input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
		<script type="text/javascript">
			function fn(obj){
				alert(obj.name);
			}
		</script>

阻止事件的默认行为

IE：window.event.returnValue = false;

W3c：传递过来的事件对象.preventDefault();
//部分ie版本支持W3c

	if(e&&e.preventDefault){
		alert("w3c");
		e.preventDefault();
	//IE标签
	}else{
		alert("ie");
		window.event.returnValue = false;
}

//通过事件返回false也可以阻止事件的默认行为
		<a href="demo11.html" onclick="return false">点击我吧</a>

阻止事件的传播

IE：window.event.cancelBubble = true;

W3c：传递过来的事件对象.stopPropagation();

if(e&&e.stopPropagation){
	alert("w3c");
	e.stopPropagation();
//IE标签
}else{
	alert("ie");
	window.event.cancelBubble = true;
}

js的bom

window对象

弹框的方法：
- 提示框：alert
- 确认框：confirm(“确认信息”);
  - 有返回值：如果点击确定返回true 如果点击取消返回false
- 输入框：prompt(“提示信息”);
  - 有返回值：如果点击确认返回输入框的文本，点击取消返回null
open方法：
- window.open("url");

定时器：

setTimeout(函数,毫秒值);
		setTimeout(
			function(){
				alert("xx");
			},
			3000
		);
clearTimeout(定时器的名称);
		var timer;
		var fn = function(){
			alert("x");
			timer = setTimeout(fn,2000);
		};
		var closer = function(){
			clearTimeout(timer);
		};
		fn();
setInterval(函数,毫秒值);
clearInterval(定时器的名称)
		var timer = setInterval(
		function(){
			alert("nihao");
		},
		2000
	);
	var closer = function(){
		clearInterval(timer);
	};

定时器示例：注册后5秒钟跳转首页

<script type="text/javascript">
	var time = 5;
	var timer;
	timer = setInterval(
		function(){
			var second = document.getElementById("second");
			if(time>=1){
				second.innerHTML = time;
				time--;
			}else{
				clearInterval(timer);
				location.href="../jsCore/demo10.html";
			}
		},
		1000
	);
</script>

location
- location.href=“url”;

history

back();
forward();
go();

<a href="demo7.html">后一页</a>
<input type="button" value="上一页" onclick="history.back()">
<input type="button" value="下一页" onclick="history.forward()">

<input type="button" value="上一页" onclick="history.go(-1)">
<input type="button" value="下一页" onclick="history.go(1)">

js的dom

html文件加载到内存之后会形成一颗dom树，根据这些节点对象可以进行脚本代码的动态修改
在dom树当中一切皆为节点对象
菜鸟教程
 操作汇总

uchiha711

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js笔记

JS简介JS是什么js是可以嵌入到html中，是基于对象和事件驱动的脚本语言脚本语言：脚本语言又被称为扩建的语言，或者动态语言，是一种解释型语言，由解释器来运行，用来控制软件应用程序，脚本通常以文本保存，只在被调用时进行解释或编译特点：(1)交互性(2)安全性：js不能访问本地磁盘(3)跨平台：浏览器中都具备js解析器JS可以做什么js能动态的修改(增删...
复制链接

扫一扫