一、Hello JS
二、JS引入的三种方式
1、行内
<a href="javascript:alert('点了呀!')">你敢点我嘛?</a>
javascript:这是伪协议的意思,类似http协议,可以省略,但是不建议,行内JS使用几率较少,只有针对某些标签的特殊操作
2、内部
页面内的JS是写在一组<script>
标签内,这组标签可以写在页面内的任意位置,但是官方推荐head标签内部写js,同时注意script
必须使用双标签。
<script type="text/javascript">
alert("你不点我自己来!");
</script>
3、外部
先单独定义一个JS文件,然后将这个JS文件与要使用的网页将关系关联起来
<script type="text/javascript" src="js/index.js"></script>
三、JS 变量
1、弱类型
使用var关键字,无论是何种数据类型的变量,均可以使用var关键字来进行声明。
var 变量名=值;
可以省略var进行直接声明,但是不推荐。(js语法规则参考java的要求)
2、代码示例
<!-- 变量的使用 -->
<script type="text/javascript">
var name;//声明变量
name = "字符串类型";
console.debug(name);
name = 88;//虽然上面是字符串,但是对类型没有强制限制,不过这种不推荐
console.debug(name);
age = 79;//可以省略var
console.debug(age);
</script>
四、JS 原始数据类型
JS中共有四种原始数据类型:number、object、boolean、string查看数据类型可以使用typeof()
<!-- 四种原始数据类型 -->
<script type="text/javascript">
var nu=10;
console.debug(typeof nu);
var num="嘿嘿";
console.debug(typeof num);
var num=true;
console.debug(typeof num);
var num = new Object;
console.debug(typeof num);
//判断是否是无穷数,无穷书返回false
console.debug(isFinite(2/3));//true
//isNaN()函数来判定当前字符是否真的不是数字
var ac = "ac";
console.debug(isNaN(ac));//true
console.debug(isNaN(111));//false
</script>
五、JS 运算符
1、赋值运算符
赋值运算符的使用和Java一样
<script type="text/javascript">
var a = 3;
console.debug(a);
</script>
2、算数运算符
<script type="text/javascript">
var x=3 + "22";//JS中+运算符中有字符串的应用,会演变为字符串的拼接
console.debug(x);
</script>
3、比较运算符
<script type="text/javascript">
var a = 222;
var b = "222";
console.debug(a==b);//true只比较内容
console.debug(a===b);//false既比较内容,又比较类型
console.debug(a!==b);//true绝对不等
</script>
4、逻辑运算符
<script type="text/javascript">
var x=0||1;
console.debug(x); //1
</script>
六、JS 流程控制
JS中同Java一样存在流程控制语句,用法一样:
-
分支:
(1) if语句
(2) switch语句
-
循环:
(1) while语句
(2) do-while语句
(3) for循环
-
break/continue语句 return
-
三目表达式
七、JS 函数
在这里函数可以理解为就是方法
1、基本语法
<script type="text/javascript">
function sum(){
console.debug("这就是函数基本结构");
}
sum();
</script>
2、全局变量与局部变量
<script type="text/javascript">
var eg = "小明";//显示的全局变量
function gan(){
eg = "张强";//隐式的全局变量
}
console.debug(eg);
gan();//隐式的全局变量在被调用的时候才会被访问
console.debug(eg);
var eg = "飞飞";//显示的全局变量
function gan(){
var eg = "口口";//局部变量
}
console.debug(eg);//全局变量
</script>
3、匿名函数的语法
<script type="text/javascript">
var tt = function(){
console.debug("匿名函数");
}
tt();
</script>
八、JS 对象
1、Date日期对象
<script type="text/javascript">
/* 1、语法 */
//1.创建一个对象
var date = new Date();
//2.给这个对象添加方法
date.dateFormat = function() {
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1; //返回的月份是从0开始11结束
var day2 = d.getDate(); //月中的天数是从1到31
var hour = d.getHours(); //取值范围0到23
var minute = d.getMinutes(); //取值范围是0到59
var second = d.getSeconds(); //取值范围是0到59
//yyyy/MM/mm HH:mm:ss
console.debug(year + '/' + month + '/' + day2);
}
var time = date.dateFormat();
console.debug(time);
</script>
2、String字符串对象
<script type="text/javascript">
//方法比骄多,可以查询API进行使用
var str = "a,D,C,S,e,r";
console.debug(str);
console.debug(str.split(','));//会以数组的形式打印
console.debug(str.toUpperCase());//转换成大写
console.debug(str.toLowerCase());//转换成小写
console.debug(str[2]);
var s = String.fromCharCode(77,78,70);//MNF根据字符编码创建一个字符串。
console.debug(s);
</script>
3、Array数组对象
JavaScript中创建类其实和创建函数【函数也是一种对象】是一样的语法,所以为了做区分方法名称小写,创建类名称首字母大写
<script type="text/javascript">
/* 1、语法 */
/* Array数组对象 */
var arr = new Array(12,11,34,32);
console.debug(arr[2]);//打印指定索引的数据
arr[20] = 33;//可以对指定索引进行赋值
console.debug(arr);
console.debug(arr.join("$"));
var arr = new Array();//基本声明
console.debug(arr);
var arr = new Array(10);//一个数字的话是声明长度
console.debug(arr);
var arr = new Array(12,11,34,32);
console.debug(arr);
//数组的遍历方式1,类似java的普通for循环
arr2 = new Array(22,33,55,11,33);
for(var i = 0 ; i < arr2.length ; i++){
console.debug(arr2[i]);
}
//数组的遍历方式2,类似java的foreach
arr3 = new Array(1,2,3,4);
for(var i in arr3){
console.debug(arr3[i]);
}
</script>
4、自定义对象
<script type="text/javascript">
/* 1、语法 */
//1、自定义一个对象
function User(name, pwd) {
this.name = name;
this.pwd = pwd;
this.add = function() {//对象中的动态属性再调用函数
console.debug(name + "----" + pwd);
}
}
var user = new User("张三", 1111);
//console.debug(user);
//console.debug(user.pwd);
//user.add();
//2、给对象增加某个属性,但是只有该对象可以使用
user.haha = function() {
console.debug(this.name)
}
user.sex = "滚";
//user.haha();
//console.debug(user.sex)
//3、自己定义方法,使用prototype
User.prototype.yy = function(){//一定要要注意区分大小写,也就是区分类和函数
console.debug(this.name+"先生")
}
user.yy();
console.debug(user)
</script>
九、BOM
BOM是browser object model的缩写,简称浏览器对象模型,直白的说就是把浏览器界面看成是一个对象。
<script type="text/javascript">
/* 1、语法 */
/*
1、window是一个对象,而且是一个顶级对象,所以在使用方法时可以省略
*/
//window.close();
//close();
//2、三种弹窗的方式
//alert("非法警告");
/* var i = confirm("是否已满18岁");
if(i){
console.debug("即将进入精彩地带");
}else{
console.debug("只允许你偷偷看一眼");
} */
/* var i = prompt("你和猪🐖有什么区别");
if(i == "没有区别"){
console.debug("你真棒");
}else{
console.debug("我看没有区别");
} */
//3、定时任务
/* function talk() {
console.debug("准备好迎接惊喜了嘛");
}
setTimeout("talk()", 4000) */
//通过clearTimeout()进行取消
// 4、window.location 由于window 是顶级对象,所以可以不写window
var loc = window.location
console.debug(loc)
var url = loc.href;//获取当前的地址值
console.debug(url)
//window.location.href = "http://www.baidu.com"//为你的当前页面设置了地址值,跳转到这个地址
</script>