js是web 上一种强大的编程语言 用于交互时web 页面 ,不需要编译 直接嵌入在HTML页面中 由浏览器执行 node.js(解析js程序的软件)
历史 95-96改名 竞争失败 捐献 ECMA(欧洲计算机制造商协会)开源
-
js用来向html 页面添加交互行为
-
js是一种脚本语言 (脚本语言是一种轻量级的编程语言)
-
js通常嵌入到html页面中
-
js是一种解释性语言 (代码不执行预编译)
1.2 javaScript组成
核心(ECMAScript)语法 语句
文档对象模型(DOM document object module) 操作文档中元素
浏览器对象模型(BOM browser object module)
1.3 JavaScript的作用
添加动画效果 轮播图 数据验证(减轻服务器压力) 浏览器事件作出相应
读写html元素 检测访客浏览器信息
1.4 如何使用
三种方式
1 内嵌式
2 外嵌式
3 内部
1.5 基本语法
1.5.1 变量
变量名命名规则: 必须以字母下划线开头 中间可以是数字 字符下划线$
变量名不能包含空格
不能使用js关键字 function
javaScript严格区分大小写
1.5.2变量的声明
var 变量名;
变量的赋值
变量名 = 值;
var a = "dudu";
var age = 18;
1.5.3 数据类型
基本 null boolean(tru false) number string undefined(声明了一个变量 但是未赋值 )
变量调用typeof 将返回 上述五个值
、 引用类型
通常叫class 类 new Object(); new Date(); new String()
object
1.5.4 函数 字符串 转数字
parseInt() 取整 parseFloat();取浮点数
1.5.5 运算符
js运算符 和java运算符基本一致
++ -- += x+=y---> x = x+y; / %
比较运算符
== 相等 ===全等 != > < <= >=
l逻辑运算符
&& and
|| or
! not
1.5.6 语句
js 也存在 if if-else for switch do{}while()与java使用方式一样
1.5.7 函数(重点)
常用定义函数的方式有两种
1 普通函数
function 函数名(参数列表){ js逻辑代码}
调用函数:函数名(参数);
2 匿名函数
function(参数列表){js逻辑代码}
使用场景两种
将匿名函数赋值给一个变量 使用变量名 调用匿名函数
匿名函数 直接作为另一个函数的实际参数
function xxx(数字类型,字符串,函数类型参数){}
调用
xxx(100,"aa",function(){});
1.5.8 事件(重点)
1 事件源 :被监听的html 元素
2 事件: 某类动作 点击事件 鼠标移入事件 敲击键盘事件
3 事件与事件源绑定: 事件源上 注册事件
4 事件触发的响应行为: 事件触发后执行的代码 ---》一般进行封装
5 监听器 声音 针孔摄像头 为事件源安装 监听器 鼠标监听器 键盘监听器 处理方式 -----》函数
常用的事件
onload 某个页面或者图片被完成加载
onsubmit 表单提交时 触发该事件 事件源 是form
onclick 鼠标单击
onblur 失去焦点事件;元素失去焦点时
onfocus 元素获得焦点
onchange 用户改变域的内容
onkeydown 某个键盘被按下
onmousemove 鼠标移动
2 掌握js的对象获取
2.1 BOM 对象 (了解)
浏览器对象模型 一组对象
location 对象完成 后退 history对象完成
1 Screen 对象 存放着浏览器 显示器的相关信息
2 Windows 浏览器窗口对象 (常用)
3 Nivgator 对象 正在浏览器
4 History 浏览器历史记录
5 Location 本质是Windows对象的一部分(常用)
Windows 浏览器窗口对象 (常用)三个作用
1 弹框(重点)
Window.alert(提示信息);
confirm("提示信息");
prompt(“提示信息”);
2 定时器(重点)
1 执行多次的定时器 setInterval(函数,毫秒值);
2 执行一次的定时器 setTimeout(函数,毫秒值);
3 清除定时器
3 全局方法(了解)
3 掌握js标操作
4 使用js 获取指定的元素
5 使用js 获取指定的元素对样式进行更改
6 使用js编写定时程序
代码块{
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
alert("hello js")
function sum(a,b){
return a,b;
}
alert(sum("欢迎","大佬回家"))
var fn=function(a,b){
return a*b;
}
console.log(fn(3,2));
function fun(){
alert("来了老弟");
}
function funblur(){
alert("可贸卑鄙")
}
if(confirm("确定删除吗?")){
alert("点击确认")
}else{
alert("点击取消")
}
var a=prompt("清楚商品价格");
console.log(a);
alert("xiaomei")
var num="0";
var a="123.332";
var nume=parseFloat(a)
alert(typeof nume)
console.log(nume)
</script>
<input type="button" name="" id="" value="点我有惊喜" onclick="fun()"/>
<input type="button" name="" id="" value="点我有惊吓" onclick="funblur()"/>
</body>
</html>