1 JavaScript基本语法
1.1 什么是javaScript
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 内嵌式
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">js代码</script>
</head>
2 外嵌式
<head>
<meta charset="utf-8" />
<title></title>
<script src="js文件路径"></script>
</head>
3 内部
写在标签内部 以属性的方式出现
<h1 onclick=""></h1>
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();取浮点数
<script type="text/javascript">
// 取整数
//先给变量赋值
var num="123.1315926";
alert(num);
//使用parseInt(变量名) 获得整数
var num1 = parseInt(num);
alert(num1);
//使用parseFloat(变量名) 获得小数
var num2=parseFloat(num);
alert("浮点类型"+num2);
</script>
调用typeof(变量名) 获取数据类型
<script type="text/javascript">
var num=123;
alert(num);
alert('num数据类型是'+typeof (num))
</script>
1.5.5 运算符
js运算符 和java运算符基本一致
++ – += x+=y—> x = x+y; / %
比较运算符
== 两边数据是否相等
===全等 比较数据是否相等 比较数据类型
!= > < <= >=
逻辑运算符
&& and
|| or
! not
<script type="text/javascript">
var num = "5";
//加法结果为55 不会生成隐式转换来自行计算 减 乘 除 都可以自行计算
alert(num+5);
// 隐式转换 变量num 转成number 再进行计算
alert(num-3);
alert(num*5);
/* 比较运算 == 两边数据是否相等
=== 比较数据是否相等 比较数据类型
* */
if(5==="5"){
alert("数据相等的")
}else{
alert("数据类型不等");
}
</script>
1.5.6 语句
js 也存在 if if-else for switch do{}while()与java使用方式一样
1.5.7 函数(重点)
常用定义函数的方式有两种
1 普通函数
function 函数名(参数列表){ js逻辑代码}
调用函数:函数名(参数);
2 匿名函数
function(参数列表){js逻辑代码}
使用场景两种
1.将匿名函数赋值给一个变量 使用变量名 调用匿名函数
2.匿名函数 直接作为另一个函数的实际参数
function xxx(数字类型,字符串,函数类型参数){}
调用
xxx(100,“aa”,function(){});
<script type="text/javascript">
/*
js中函数就是方法
* */
function sum(a,b){
return a+b;
}
alert(sum("I","love java"));
var fn = function(a,b){
return a+b;
}
console.log(fn(1,2));
/* js中 没有重载的概念
重载 参数列表(类型 个数 顺序)
* */
</script>
1.5.8 事件(重点)
1 事件源 :被监听的html 元素
2 事件: 某类动作 点击事件 鼠标移入事件 敲击键盘事件
3 事件与事件源绑定: 事件源上 注册事件
4 事件触发的响应行为: 事件触发后执行的代码 —》一般进行封装
5 监听器 声音 针孔摄像头 为事件源安装 监听器 鼠标监听器 键盘监听器 处理方式 -----》函数
常用的事件
onload 某个页面或者图片被完成加载
onsubmit 表单提交时 触发该事件 事件源 是form
onclick 鼠标点击
onblur 移除焦点
onfocus 元素获得焦点
onchange 用户改变域的内容
onkeydown 某个键盘被按下
onmousemove 鼠标移动
<body>
<script type="text/javascript">
function fun(){
alert("按钮被点击");
}
function funblur(){
alert("失去焦点");
}
function fn(){
alert("让您点你就点啊");
}
</script>
<input type="button" name="" id="" value="按钮" onclick="fun()" />
<!--绑定事件 失去焦点-->
<input type="text" onblur="funblur()"/>
<div onclick="fn()">你点我啊</div>
</body>
2 js的对象获取
2.1 BOM 对象 (了解)
浏览器对象模型 一组对象
location 对象完成 后退 history对象完成
1 Screen 对象 存放着浏览器 显示器的相关信息
2 Windows 浏览器窗口对象 (常用)
3 Nivgator 对象 正在浏览器
4 History 浏览器历史记录
5 Location 本质是Windows对象的一部分(常用)
Windows 浏览器窗口对象 (常用)三个作用
1 弹框(重点)
Window.alert(提示信息 警示框);
confirm(“提示信息”);
prompt(“提示信息”);
<script type="text/javascript">
if(confirm("确定删除吗")){
alert("点击确定")
}else{
alert("点击取消")
}
var a = prompt("清输入商品的价格");
console.log(a);
</script>
2 定时器(重点)
1 执行多次的定时器 setInterval(函数,毫秒值);
2 执行一次的定时器 setTimeout(函数,毫秒值);
3 清除定时器
3 全局方法(了解)