JavaScript基础

JavaScript基础

引用javascript的三种方式

标签内部嵌套

<a href="javascript:alert('aaa')">弹出框</a>

**alert：**是用来弹出一个提示框

**javascript:**伪协议（浏览器看到就知道是要执行js代码）

**console.debug()：**在浏览器控制台输出

Http:// 协议，比如：www.baidu.com直接当成请求地址，http://www.baidu.com当作请求一个web路径

页面内部嵌套

可以写在页面内的任意位置

执行顺序：页面加载从上往下

<script type="text/javascript">
	alert("弹出来");
</script>

外部引入

引入外部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]);
	}