JavaScript
一、JS的三种写法
1.标签内部嵌套
<a href="javascript:alert('弹出来了')">点一下</a>
alert: 是用来弹出一个提示框
javascript: 伪协议(浏览器看到就知道是要执行js代码)
console.debug(): 在浏览器控制台输出,相当于java中的System.out.println();
Http:// 协议,比如:www.baidu.com直接当成请求地址,http://www.baidu.com当作请求一个web路径
2.页面内部嵌套
可以写在页面内的任意位置
执行顺序:页面加载从上往下
<script type="text/javascript">
alert("弹出来");//相当于一次调用函数
</script>
3.外部引入
引入外部js路径:相对路径./ .// 可以在web程序内部资源进行相互访问
script一但引入代码标签内部写的代码没用了
<!--<script type="text/javascript" src="外部引用JS.js">
alert("弹出来");//不会显示
</script>-->
二、变量
js代码是弱类型,所有的数据类型变量的声明只能用var
//1.var 变量名;
var num;
//2.var 变量名=值;
var b = true;
//3.已声明赋值的变量 = 另一种类型值;
b = "变成字符串类型啦";
//4.不声明变量 = 值;
a = "也可以直接赋值";
三、数据类型
1.Number 数字类型
JS数字类型可以采用10进制、8进制、16进制以及科学计算法等形式表示,常用十进制
十六进制 以0x或0X开头
八进制 必须以0开头
十进制 首位不能为0
var num = 10;
console.debug(num);//10
console.debug(typeof num);//number
/*错误方式*/
//Number num = 10;
2.Boolean 布尔值
在条件判断中0 null undefined “” NaN表示为false
var b = true;
console.debug(b);//true
console.debug(typeof b);//boolean
3.String 字符串
由单引号或双引号括起来的字符序列
长度都可以通过访问length属性获得
var str = "emmmm....";
console.debug(str);//emmmm....
console.debug(typeof str);//string
var str2 = 'qqqq';
console.debug(str2);//qqqq
console.debug(typeof str2);//string
4.Null
没有具体的指向一个对象,只有一个值null
var n = null;
console.debug(n);//null
console.debug(typeof n);//object
5.Undefined
表示声明但未赋值的对象
var un;
console.debug(un);//undefined
console.debug(typeof un);//undefined
6.特殊数值
(1)无穷数
最大数取值为Infinity正无穷,最小数取值为-Infinity负无穷
var n = 1/0;
console.debug(n);//Infinity
var n = -1/0;
console.debug(n);//-Infinity
(2)非数
不是数字,在JS中采用NAN(not a number)来表示
var n = 1/'a';
console.debug(n);//NaN
四、运算符
1.赋值运算符
赋值运算符和Java一样
var num = 10;
num += 2;
console.debug(num);//12
2.算术运算符
在JS中+运算符中有字符串的应用,会演变为字符串的拼接
var x = 2;
var y = 3;
x = ++y;
console.debug(x);//4
x = 3;
y = 3;
x = --y;
console.debug(x);//2
3.等性运算符
var n = 10;
var m = "10";
//== :代表相等(它只比较内容,不比较类类型)
console.debug(n == m);//true
//===:绝对相等(先比较类型,再比较内容)
console.debug(n === m);//false
//!==:绝对不等
console.debug(n !== m);//true
4.逻辑运算符
0 null undefined “” NaN表示为false,其余都为true
//&&:逻辑AND运算符,一假便假
console.debug(true&&true);//true
console.debug(1&&true);//true
console.debug(true&&1);//1
console.debug(1&&2);//2
console.debug(0&&true);//0
//|| :逻辑OR运算符 ,一真便真
console.debug(1||false);//1
console.debug(0||1);//1
//! :逻辑NOT运算符,真为假,假为真
console.debug(!false);//true
五、流程控制
JS中同Java一样存在流程控制语句,用法一样
1.if语句
if(true){
console.debug("if循环");
}
2.switch语句
3.while语句
4.do-while语句
5.for循环
for(var num = 0;num < 10;num++){
console.debug("for循环");
}
6.break/continue语句
六、函数
(一)语法
JS中函数传参不需要声明
function 函数名(参数名){
JS代码
[return 返回值;]
}
function add(a,b){
console.debug(a+b);
}
add(12,11);//23
add(12);//NaN(not a number)
add();//NaN
function sum(a,b){
return a+b;
}
var v = sum(21,23);
console.debug(v);//44
(二)全局变量和局部变量
var str="全局变量";
function msg(){
str="局部变量";
}
msg();
console.debug(str);//局部变量
var str2="全局变量";
function msg2(){
var str2="局部变量";
}
msg2();
console.debug(str2);//全局变量
七、自定义对象
(一)语法
function 名称(){}
function Person(name, age){
console.debug("相当于函数")
this.name = name;
this.age = age;
this.eat = function(){
console.debug("吃东西");
}
}
var pers = new Person("猪猪",18);
console.debug(Person);//对象
console.debug(typeof Person);//function
console.debug(pers);//Object { name: "猪猪", age: 18, eat: eat() }
console.debug(typeof pers);//object
console.debug(pers.name);//猪猪
console.debug(pers.age);//18
pers.eat();//吃东西
Person("猪皮",12);//相当于函数
(二)给js对象添加静态属性: 字段
1.通过构造方法给默认的字段
2.只针对当前对象添加了属性
pers = new Person("猪皮",15);
pers.gender = "男";
console.debug(pers);//Object { name: "猪皮", age: 15, eat: eat(), gender: "男" }
console.debug(pers.gender);//男
3.通过原型添加,相当于父类中添加了属性
pers = new Person("陈皮",12);
Person.prototype.stature = "140";
console.debug(pers);
console.debug(pers.stature);
(三)给js对象添加动态属性:方法
1.通过构造方法给默认的方法
2.只针对当前对象添加了动态属性
pers = new Person("花花",13);
pers.sleep = function(){
console.debug("睡觉");
}
pers.sleep();
3.通过原型添加动态行为
pers = new Person("李白",11);
Person.prototype.run = function(){
console.debug("跑步");
}
pers.run();
(四)本地对象
1.Global
(1)encodeURI() 把字符串编码为 URI
var url = "http://www.百度.com";
console.debug(url);//http://www.百度.com(百度前面的可以点)
var url = encodeURI(url);
console.debug(url);//http://www.%E7%99%BE%E5%BA%A6.com
(2)decodeURI() 解码某个编码的 URI
(3)encodeURIComponent() 把字符串编码为 URI 组件
(4)decodeURIComponent() 解码一个编码的 URI 组件
var u = "http://www.baidu.com";
u = encodeURIComponent(u);
console.debug(u);//http%3A%2F%2Fwww.baidu.com
(5)eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行
var str = "alert('弹出来')";
eval(str);
(6)isFinite() 检查某个值是否为有穷大的数
var b = isFinite(1/0);//无穷大
console.debug(b);//false
var c = isFinite(2);
console.debug(c);//true
(7)isNaN() 检查某个值是否是数字
(8)parseInt() 解析一个字符串并返回一个整数
var num = parseInt("123.123");
console.debug(num);//123
num = parseInt("123.aaa");
console.debug(num);//123
2.Boolean
var b = new Boolean(true); //Boolean作为一个对象来new的时候
var b2 = Boolean(true); //普通转换
var b3 = true; //赋值
console.debug(typeof b);//object
console.debug(typeof b2);//boolean
console.debug(typeof b3);//boolean
3.Number
数字对象
var num = new Number(10);
var num2 = Number('abc');
var num3 = 10;
console.debug(num2); //NaN
console.debug(typeof num);//object
console.debug(typeof num2);//number
console.debug(typeof num3);//number
4.String
字符串对象
(1)split()
方法用于把一个字符串分割成字符串数组
var str = "aa,bb,cc,dd";
var split = str.split();
console.debug(split);//Array [ "aa,bb,cc,dd" ]
(2)toLowerCase()
方法用于把字符串转换为小写
str = str.toUpperCase();
console.debug(str);//AA,BB,CC,DD
(3)toUpperCase()
方法用于把字符串转换为大写
str = str.toLowerCase();
console.debug(str);//aa,bb,cc,dd
(4)substr()
方法可在字符串中抽取从 start 下标开始的指定数目的字符,未指定长度则一直截取到结尾
var s = str.substring(2)
console.debug(s);//,bb,cc,dd
(5)substring()
方法用于提取字符串中介于两个指定下标之间的字符,不包括结束位置的字符
var s2 = str.substring(0,3)
console.debug(s2);//aa,
(6)concat(str1,str2)
连接字符串
(7)charCodeAt(index)
返回指定位置的unicode码
(8)fromCharCode()
可接受一个指定的 Unicode 值,然后返回一个字符串
var s3 = String.fromCharCode(65);
console.debug(s3);//A
5.Date
日期对象
var date = new Date();
console.debug(date);
date.dateFormat = function() {
var year = date.getFullYear();
console.debug(year); //2019
var month = date.getMonth() + 1; //返回的月份是从0开始11结束
console.debug(month); //11
/*var day = date.getDay() + 1; //返回的是一周中的第几天,从0到6
console.debug(day);//1 星期天*/
var day = date.getDate(); //月中的天数是从1到31
console.debug(day);//3
var hour = date.getHours(); //取值范围0到23
console.debug(hour);//8
var minute = date.getMinutes(); //取值范围是0到59
console.debug(minute);//32
var second = date.getSeconds(); //取值范围是0到59
console.debug(second);//01
return year+"年"+month+"月"+day+"日"+hour+"时"+minute+"分"+second+"秒";
}
date = date.dateFormat();
console.debug(date);//2019年11月3日20时36分21秒
6.Math
数学计算对象
(1)ceil()对数进行上舍入
var num = Math.ceil(1.2);
console.debug(num);//2
num = Math.ceil(1.0);
console.debug(num);//1
num = Math.random();
console.debug(num);
(2)random()返回0~1之间的随机数-
num = Math.random();
console.debug(num);
/*随机65-90的整数*/
num = parseInt(Math.random()*(90-65)+65);
console.debug(num);
7.Array
数组对象
(1)创建数组
var arr = new Array();
console.debug(arr);//Array []
var arr2 = new Array(10);
console.debug(arr2);//Array(10) [ 10个undefined ]
var arr3 = new Array(1,2,3,4,5);
console.debug(arr3);//Array(5) [ 1, 2, 3, 4, 5 ]
(2)数组存值取值
console.debug(arr3[0]);//1
arr3[6] = 6;
console.debug(arr3);//Array(7) [ 1, 2, 3, 4, 5, undefined, 6 ]
(3)遍历数组
方法1
for (var i = 0;i< arr3.length ;i++) {
console.debug(arr3[i]);
}
方法2
for (var i in arr3){//i存入的是有效索引
console.debug(arr3[i]);
}