js的简单实用（1）

最新推荐文章于 2022-10-22 16:41:34 发布

hzf_123

最新推荐文章于 2022-10-22 16:41:34 发布

阅读量240

点赞数

分类专栏： javaee

本文链接：https://blog.csdn.net/hzf_123/article/details/77731804

版权

javaee 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. js：JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
组成部分:
ECMAScript:js基础语法(规定关键字运算符语句函数等等...)
BOM:浏览器对象模型
DOM:文档对象模型
2. js和html的整合
把js代码放在<script></script>标签中
外部生成独立的js文件，通过<script></script>标签的src属性导入。注意：使用了src属性，<script></script>标签中的语句就不执行了
3. js中变量声明:
var 变量名=初始化值;
4. js的数据类型:
原始类型:(5种) 通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
Null
String
Number
Boolean
Undefined
用法: typeof 变量|值;若变量为null,使用typeof弹出的值 object
使用typeof的返回值
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的 (引用类型：和java里面类的对象差不多)

<!DOCTYPE html>
<!--js的导入-->
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--将js代码放在<script></script>标签中，一般放在head标签中-->
		<!--<script type="text/javascript">alert('12')</script>-->
		<!--通过独立的js文件   用script标签的src属性导入-->
		<!--<script type="text/javascript" src="../js/1.js" ></script>-->
		<script type="text/javascript">
			var s=123;
			alert(typeof(s));//number //数字类型
			s=null;
			alert(typeof(s)) // object //值为空
			var ss;
			alert(typeof(ss)) //undefined 未初始化
			var y=new Number();
			alert(typeof(y)) //object  引用类型
		</script>
	</head>
	<body>
	</body>
</html>

5. js:事件驱动函数
函数定义格式:
方式1:
function 函数名(参数){
函数体;
}
注意:函数不用声明返回值类型
参数不需要加类型
函数调用的时候函数名(参数)
js中的事件:
常见的事件:
单击: onclick
表单提交: onsubmit 加在form表单上的 οnsubmit="return 函数名()" 注意函数返回值为boolean类型
页面加载: onload

js事件和函数的绑定:
方式1:
通过标签的事件属性 <xxx οnclick="函数名(参数)"></xxx>
js获取元素:
方式1:
var obj=document.getElementById("id值");
获取元素的value值
obj.value;
获取元素的标签体中的内容
obj.innerHTML;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function but(){
				alert('这是一个按钮')
			}
			function but2(){
				//js 获取元素的内容
				var obj=document.getElementById("but2");
				//获取元素的value属性
				alert(obj.value);
				//获取元素标签体中的内容
				alert(obj.innerHTML)
			}
		</script>
	</head>
	<body>
		<input type="button" value="点我试试" οnclick="but()"/>
		<input type="submit" id="but2" value="提交按钮" οnclick="but2()"/>
	</body>
</html>

6. 定时器bom中window对象的定时器方法
var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数周期
var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后只执行一次函数
清除定时器:
clearInterval(id);
claerTimeout(id);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript">
		var s="我喜欢的你在哪里呢？";
		var i=0;
		function init(){
			setInterval(show,200);
		}
		function show(){
			var ss=s.substring(i,i+1);
			document.write(ss);
			i++;
			if(i==s.length){
				Document.getElementById("body").innerHTML="";
				i=0;
			}
		}
	</script>
	<body οnlοad="init()" id="body">
	</body>
</html>