JS1

最新推荐文章于 2021-05-24 22:56:49 发布

Stitch__

最新推荐文章于 2021-05-24 22:56:49 发布

阅读量258

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/Stitch__/article/details/82956462

js 专栏收录该内容

2 篇文章

订阅专栏

javaScript:

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言

（与Java一点关系都没有）

也就是说它可以直接嵌套在页面中使用，他的解释器就是浏览器

组成部分：

ECMAScript : JS的基础语法（规定了：关键字）

BOM : 浏览器对象模型

DOM ：文档对象模型

作用：

修改html 页面的内容/// 修改html 的样式 /// 完成表单的验证

JS可以在页面上直接写，也可以独立出去JS文件.js

JS 和html 如何整合：

方式一：页面上直接写

将JS代码放在<script></script>（放在那里都可以）标签中，一般放在head 标签中

方式二：导入JS文件

通过script标签的src属性导入

<script type="text/javascript" src="js/1.js" ></script>

JS 中变量的声明：

var 变量名=初始化值;

var 变量名；（使用的时候在再始化）

注意：var 可以省略，但是建议不省略

一行的末尾要加上;(一般不要省略)

虽然和Java没什么关系但是有些规律是相似的(比如变量的声明)
变量的类型：

JS的数据类型:
原始类型:
   Null
   String
   Nubmer
   Boolean
   Undefined
   通过typeof 运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,还以可以判断出具体属于哪一种类型
   使用null弹出的值为object
引用类型:类型就是类

JS中最重要的部分就是事件和函数：

JS 是一个事件驱动语言,你只有触发这个事件的时候才会去做这件事
做事的也是函数

1.JS中的事件驱动函数:
函数定义格式:
方式一:
       function 函数名(){函数体}
   注意:函数不需要声明返回值的类型,函数的调用和一般语言中的调用没什么区别
方式二:
       var 函数名=function(参数){
           函数体
       }

2.JS中的事件:
   常见事件:
       单击事件:onclick
       表单提交事件:onsubmit 加载form表单上 οnsubmit="return 函数名()" 注意函数返回值为Boolean 类型
       双击事件:
       页面加载事件:onload
3.JS 事件和函数的绑定:
方式一:
   通过标签的事件属性: <xxx οnclick="函数名(参数)"></xxx>
方式二:
   给元素派发事件(注意内存中一定要先存在这个元素)
   document.getElementById("id值").οnclick=fuction(参数){...}
   document.getElementById("id值").οnclick=函数
   (注意内存中一定要先存在这个元素)

总结：其实两种方式在本质上都是一样的，都是利用元素的时间属性，时间属性的值为函数。
解决办法:
将它放到元素加载成功之后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function butCli(){
				alert("试试就试试");
			}
			function init(){
				alert("页面加载成功");
				//document.getElementById("btu").onclick=butCli2;//也可以在页面加载成功后再运行
			}
			var butCli2 =function(){//函数的定义
			alert("2试试就试试");
		}
		</script>
	</head>
	<body onload="init()">
		<input type="button" value="点击我试试" onclick="butCli()" />
		<input type="button" value="2点击我试试"  id="btu"/>
	</body>
	<script>
		//因为JS是至上而下运行的,如果这个在前面,通过id 获得的元素是一个空值,就会出错
		document.getElementById("btu").onclick=butCli2;//定义好的函数
	</script>
</html>

4.JS获取元素:

方式一:var obj=documnet.getElementById("id值");
获取元素的value属性的值:
obj.value;
获取元素的标签体中的内容:
obj.innerHTML;

补充 : 运算符:
比较运算符:< <= > <=
   1.如果两边都是数字,比较对的规则和java 是一样的
   2.如果一边为数字,另一边为字符串形式的数字,则字符串会被转换为数字 3>"2"
   如果一边为数字,另一边为字符串,则直接返回false(无法比较) 3>"hello"
   3.两边都是字符串时,则比较ascii码
等性运算符:
1.== :判断值是否相同
2.=== :不仅要判断值是否相等还要判断类型是否相等