1.JS概述
是一种解释性脚本语言(代码不进行预编译),由浏览器解释执行,用来向页面添加交互行为
1.JS三大组成部分
JavaScript在互联网中的应用几乎无处不在,为了提升用户体验和数据的操作,常见的适用场景:
1.页面效果(用户体验)
2.表单验证
3.事件监听数据处理
4.页面跳转
5.局部刷新(ajax)
2.JS的三种方式
2.1.行内JS
语法:<a href="javascript:alert('点你就点你');">点我,点我...</a>
2.2.内部JS
语法:
<script type="text/javascript">
JS代码
</script>
示例代码:
<script type="text/javascript">
alert(“不点我也来”);
</script>
2.3.外部JS
可以写在页面内的任意位置:
引入外部JS文件:
<script type="text/javascript" src="JS文件位置"></script>
2.4.注意事项
1.script存放位置:除去title标签内部,页面任何位置都可以,但是你得明白,页面加载顺序,至上而下
(1)官方: 推荐head标签内部写js
(2)码农: body标签结束位置写js
2.引入js的script标签内部,不能再写js代码
3.script必须使用双标签
4.行内js标准写法
<!--写法1不推荐的原因,2.它会修改你当前url地址3.它会跳转到当前页面的最顶部-->
<a href="#" onclick="alert(1);">写法1</a>
<!--href="javascript:void(0);":我当前a标签不再超链接到一个新的界面,而是作为JS触发源而存在;
javascript伪协议-->
<a href="javascript:void(0);" onclick="alert(2);">写法2</a>
<a href="javascript:;" onclick="alert(3);">写法3</a>
3.变量
var关键字,无论是何种数据类型的变量,均可以使用var关键字来进行声明;弱类型
3.1.语法
var 变量名; //声明变量【推荐方式】
var 变量名=值; //声明变量并赋值【推荐方式】
已声明赋值的变量 = 另一种类型值; //【不推荐】
不声明变量 = 值; //不事先声明变量直接使用
3.2.代码
var name=”字符串类型”;
console.debug(name); //在控制台输出打印name变量
name = 19;
console.dubug(name);
/*不使用var关键字,直接写一个符合命名规范的名字作为变量使用*/
age = 18;
console.debug(age);
5.JavaScript运算符
在JS中同样存在算术运算符、等性运算符、逻辑运算符的操作,这些运算符的操作和JAVA一样,接下来我们演示与JAVA不一样的地方;
5.1.赋值运算符
5.2.算术运算符
var x=3 + “3”;
console.debug(x); //33
5.3.比较运算符(关系运算符)
1.比较运算符用于判断两个变量大小关系:>、<、、<=、>=、=、!=、!=,其中:
(1) :代表相等(它只比较内容,不比较类型)
(2)=:绝对相等(先比较类型,再比较内容)
(3)!:绝对不等
5.4.逻辑运算符
&& :逻辑AND运算符,一假遍假
|| :逻辑OR运算符 ,一真遍真
! :逻辑NOT运算符,真为假,假为真
var x=0||1;
console.debug(x); //1
6.JavaScript流程控制
JS中同Java一样存在流程控制语句,用法一样:
1.分支:
(1)if语句
(2)switch语句
2.循环:
(1)while语句
(2)do-while语句
(3)for循环
3.break/continue语句
4.三目表达式
7.JavaScript函数
7.1.语法
function 函数名( [参数列表] ){
JS代码
[return 返回值;]
}
function $action(){
console.debug(“函数定义测试”);
}
var x = $action(); //使用函数名完成函数调用,并定义一个变量接收返回值
console.debug(x); //输出undefined,因为函数中并没有定义返回值
JS中函数的定义使用function关键字,这一点是和Java不一样的地方,同时允许函数具备返回值,返回值采用关键字return,如果函数没有定义返回值,接收到的将是一个undefined;
7.2.全局变量和局部变量
var msg="显示全局变量";
function show(){
msg="隐式全局变量";
}
show();
console.debug(msg); //隐式全局变量,需要先调用方法才能访问该变量
var msg2="全局变量";
function show2(){
var msg2="局部变量";
}
show2();
console.debug(msg2);//全局变量
7.3.匿名函数语法
function (参数列表){
JS代码
[return 返回值;]
}
var action = function(){
console.debug(“前方高能,请非战斗人员迅速撤离”);
}
action();
8.JavaScript对象
8.1.本地对象
1.本地对象就是 ECMA-262 定义的类(引用类型),相当于Java中类的概念;
2.这些引用类型在运行过程中需要通过new来创建所需的实例;
3.包括: Object、Boolean、Number、Date、String、Array等,重点掌握Date、String和Array对象;
日期对象:Date
详情请见W3CSchool文档(API)
9.BOM
是browser object model的缩写,简称浏览器对象模型
9.1.window