JavaScript
我们用HTML超文本标记语言实现了静态网页,使用css实现了页面的美化,也可以用js 实现动态网页.
-1.JavaScript简称js ,用来增强网页的动态交互性
是一种基于对象,和事件驱动的脚本语言;
1;基于对象:js可以象java一样使用对象
2;事件驱动:所有js代码都是通过事件来驱动执行的,事件就是网页中常有的动作,比如点击;双击等
3;脚本语言就是只能在特殊环境才能生效的语言,js就是只能在浏览器中生效的语言
-2.特点
1.js 是一门直译式的语言,不需要象java一样进行编译就可以直接输出结果.
2.js是弱类型的语言,底层会自动类型转换
3.增强了用户的交互性,平台性
4.js代码可以出现的位置 js行内 js内部 js外部
-3javascript的组成
1.ECMAScript 规范了javascript的基本语法
2.DOM document object model : 文档对象模型（由一系列文档对象构成的模型）
作用：操作标记性的文档(指的xml或者html文档)
3.BOM browser object model: 浏览器对象模型（由一系列浏览器对象构成的模型）
作用：操作浏览器的。
javascript与html结合的两种方式
1.第一种在htmdl body中直接书写js代码 好处是直接可以看到书写的js代码 坏处是不便于后期的维护
2.第二种先定义一个js文件 然后通过script 标签的src属性引入外部定义的js文件
js测试
//js出现位置行内
<html>
<head>
<meta charset="utf-8">
<title>测试js</title>
</head>
<!-- 为div1设置单机时弹框
div2设置双击时弹框
span1设置鼠标移入时弹框
span2设置鼠标移除时弹框-->
<body>
<button onclick="alert('叫你别点别点,找打啊')">别点,别点 </button><br />
<input type="button" onclick="alert('还来点是把')" />还点吗<br />
<div ondblclick="alert('点吧点吧服了你了')">我是div2</div>
<span onmouseenter="alert('欢迎欢迎')">我是psan1</span>
<span onmouseleave="alert('再见再见')">我是psan2</span>
</body>
</html>
js语法
数据类型
可以使用的数据类型(number,string,bollean,null,undefined)+复杂
<html>
<head>
<meta charset="utf-8">
<title>练习HRML引入js</title>
<!--注意用script标签引入js文件时 不能同时引入js代码和js文件,否则会失效 -->
<script src="textjs1.js"></script>
</head>
<body>
</body>
</html>
上列引入的js文件
alert('你好');//弹出 你好
alert(521);//弹出 521
alert(5>3);//弹出 ture
alert(false);//弹出 false
alert(null)//弹出 null
let a; //在用let声明变量时,却没给变量赋值,解析器会给一个默认值undefined
alert(a);//弹出 undefined
常量和变量
定义变量通常使用 var let 定义常量通常使用const
运算符
-1.算数运算符 + - * / ++ – %
如果数字与字符串类型的数字进行运算时：
如果是 + 号， 进行的是字符串拼接
如果不是 + 号，进行的是算术运算
-2.赋值 运算符 =
-3.比较运算符 == >= <= != > < ===
== 只进行比较值
=== 进行数据类型的比较和数据值的比较
-4.逻辑运算符 && 逻辑与 || 逻辑或 ! 取反
三元运算符
<script>
var a=100;
var b=99;
var c=(100>99)?a:b //结果为ture时取 a false 取b
document.write(c) //查看输出结果
</script>
流程控制语句
if语句 while 循环 for 循环 switch 语句
数组
创建数组的两种方式
var a={1,“a”,true,3.4,undefined};
var b=new Array(3);
数组的特点
1.可以存放任意类型的数据
2.数组的长度是可以变得
数组的长度=数组的最大索引值+1
函数
函数的调用
遵循原则：
- 先创建函数
- 再调用函数
- 注意细节： 在定义参数时，()内的参数前面不加var ,let
注意: - 在获取参数的个数时： 函数名称.length
- 调用函数：函数名称（参数）；
<script type="text/javascript">
//定义普通方法
function text1(){
document.write("这是一个没有参数,没有返回值的普通方法")
}
text1();
document.write("<br/>")
//定义有参无返回值的方法
function text2(a,b){
var c=a+b
document.write("这是一个有参数,没有返回值的普通方法"+c+"<br/>")
}
text2(6,6)
//定义一个有参 有返回值的方法
function text3(a,b){
var c=a+b;
document.write("这是一个有参数有返回值的方法"+c+"<br/>")
return c;
}
var d=text3(1,4);
document.write("结果为"+d+"<br/>");
//定义一个匿名函数
text4=function (a,b){
var c=a+b
document.write(c);
}
text4("帅啊","伙计");
</script>
总结
11.基本语法小结
- 注释：单行// 多行/**/
- 输入输出语句：prompt()、alert()、console.log()、document.write()
- 变量和常量：let、const
- 数据类型：boolean、null、undefined、number、string、bigint
- typeof 关键字：用于判断变量的数据类型
- 运算符：算数、赋值、逻辑、比较、三元运算符
- 流程控制和循环语句：if、switch、for、while
- 数组：数据类型和长度没有限制，let 数组名 = [长度/元素]
- 函数：类似方法，抽取代码，提高复用性
事件
事件: 网页的事件指的是触发网页元素的动作,比如单机鼠标或者双击鼠标等
事件源:指的是事件中的元素,如标签,属性,文本等都被称作为事件源
监听:将事件源和对应的js代码连接起来,当发生事件时,会执行对应的js代码
在html绑定事件的两种方式
- 方式一：直接绑定（直接在标签里面定义事件属性，绑定对应的js代码）
- 方式二：间接绑定（不在标签里面定义事件属性，在使用时在绑定）
<body>
<input type="button" value="直接绑定" onclick="fun()" /><br />
<input type="button" value="间接绑定" id="d1" />
<script>
function fun(){
alert("哈哈哈哈")
}
//获取标签
var id_tag = document.getElementById("d1");
//根据标签获取属性
id_tag.ondblclick=function(){
console.log("间接绑定")
}
</script>
</body>
常见事件
鼠标状态事件
onmousedown： 鼠标按下事件
onmouseup：鼠标松开事件
onmousemove：鼠标移动事件（每次移动每次触发执行
点击事件
onclick： 单击事件
ondblclick: 双击事件
焦点事件
onfocus：获取焦点
onblur: 失去焦点
页面加载事件
onload: 等html网页完全加载完毕后，才执行事件里面的js代码
页面加载事件
onchange: 在内容改变时，触发该事件
//使用onchange 在内容改变时触发事件
<body>
<select id="d1" >
<option>请选择</option>
<option>北京</option>
<option>上海</option>
<option>长春</option>
</select>
<script>
//获取标签
var sum=1;
var id_mag= document.getElementById("d1");
id_mag.onchange= function fun(){
console.log(sum);
sum++
}
</script>
</body>
8425
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
