Html—javascript（一）

javascript

1. 基本使用

（1）行内js：写在具体标签中
（2）内部js：写在script标签中，建议写在body标签中的最后，head标签中
（3）外部js：创建js文件，通过script标签引入 < script src=“地址” type=“text/javascript” charset=“utf-8” >< /script >
（4）注释：/**/ 多行注释 、 // 单行注释

2. 变量

JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。

变量的声明

1. 声明并赋值
2. 先声明，再赋值

注意：
（1）若只声明而没有赋值，则该变量的值为undefined

//（1）若只声明而没有赋值，则该变量的值为undefined。
var c;
console.log(c);

（2）变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义

console.log(d);

(3)可以在同一条var命令中声明多个变量

var a1,b1,c1=1;
console.log(a1,b1,c1);

(4)若使用var重新声明一个已经存在的变量，是无效的

var b;
console.log(b);

(5)若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值

var b = 20;
console.log(b);

(6)JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值

var pa = 1;//数值型
var pb = true;//布尔型
var pc = "字符串";//字符型
var pd = [1,2,3];//数组
var pe = {
	name : "张三",
	age : 13
}

变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。只针对于var声明的变量，不用var声明的变量，是全局变量

//变量提升
console.log(abc);
var abc = 20;
//全局变量
lbw = 30;
console.log(lbw);

3.数据类型

虽说 JS 是弱类型语⾔，变量没有类型，但数据本身是有类型的。针对不同的类型，我们可以进⾏不同的操作。

JavaScript 中有 6 种数据类型，其中有五种简单的数据类型：Undefined、Null、布尔、数值和字符串。⼀种复杂数据类型Object。

undefined

undefined 是⼀个表示"⽆"的原始值，表示值不存在。出现undefined的常⻅情况：
（1）当声明了⼀个变量⽽没有初始化时，这个变量的值就是 undefined

var box;
console.log(box); //undefined

（2）调⽤函数时，该函数有形参，但未提供实参，则该参数为 undefined

function noData(str) { // js函数形参只需要变量名即可
 	console.log(str); // undefined
}
noData(); // 调⽤⽅法时，未传递参数

（3）函数没有返回值时，默认返回 undefined

// ⽅法没有返回值
function noData() {
 	console.log("Hello");
}
var re = noData();// 定义变量接收⽆返回值的⽅法
console.log(re);

null

null类型是只有⼀个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示⼀个空对象引⽤。
使⽤Null类型值时注意以下⼏点：
1）使⽤ typeof 操作符测试null返回object字符串。
2）undefined 派⽣⾃ null，所以等值⽐较返回值是true。未初始化的变量和赋值为null的变量相等。

console.log(undefined == null);
var box = null; // 赋值为null的变量
var a; // 未初始化的变量
console.log(a == box); // 两个的值相等

布尔类型

布尔类型有两个值：true、false。常⽤来做判断和循环的条件

数值型

数值型包含两种数值：整型和浮点型。
1）所有数字（整型和浮点型）都是以 64 位浮点数形式储存。所以，JS中1 与 1.0 相等，⽽且 1 加上1.0 得到的还是⼀个整数。浮点数最⾼精度是17位⼩数，由于浮点数运算时可能不精确，尽量不要使⽤浮点数做判断。
2）在存储数值型数据时⾃动将可以转换为整型的浮点数值转为整型。

console.log(1 == 1.0); // true
console.log(1 + 1.0); // 2
var num = 8.0; // ⾃动将可以转换为整型的浮点数转为整型
console.log(num); // 8

字符串

使⽤ ’ ’ 或 " "引起来，如：‘hello’，“good”。
使⽤加号 ‘+’ 进⾏字符串的拼接，如：console.log(‘hello’ + ’ everybody’);

对象

对象是⼀组数据和功能的集合。
说明：
{ }：表示使⽤对象字⾯量⽅式定义的对象。空的⼤括号表示定义包含默认属性和⽅法的对象。

4.类型转换

自动类型转换

函数转换

parseInt()： 在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符
parseFloat()： 该方法与 parseInt() 方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，然后把该字 符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字。
显示转换 ：toString() ：讲数组转换成字符串形式
toFixed()： Number还提供了**toFixed()**函数将根据小数点后指定位数将数字转为字符串，四舍五入

// 自动转换
var a = 1;
if(a){
	console.log("对");
}
// 函数转换
var num1 = "123abc";
var num2 = "123.45";
var num3 = "abc";
console.log(parseInt(num1));
console.log(parseInt(num2));
console.log(parseInt(num3));
// 函数转换
var num1 = "123abc";
var num2 = "123.45";
var num3 = "abc";
var num4 = "567.78.90";
console.log(parseFloat(num1));//123
console.log(parseFloat(num2));//123.45
console.log(parseFloat(num3));//NaN
console.log(parseFloat(num4));//567.78
//显示转换
var data = 10
console.log(data.toString());
console.log(typeof(data));
data = undefined
// console.log(data.toString());
data = 1.4;
console.log(data.toFixed(0));
data = 1.29;
console.log(data.toFixed(1));

5.数组

数组是按次序排列的⼀组数据，每个值的位置都有编号（从0开始），整个数组⽤⽅括号表示

定义

JS 中定义数组的三种⽅式如下（也可先声明再赋值）：

var arr = [值1,值2,值3]; // 隐式创建
var arr = new Array(值1,值2,值3); // 直接实例化
var arr = new Array(size); // 创建数组并指定⻓度

属性、遍历、操作方法

1.获取长度
数组名.length
2.设置长度 数组名.length = 值
3.获取值 (如果下标存在，直接获取，如果下标不存在获取到的是undefined)
数组名[下标]
4.设置值 （如果下标存在，覆盖原值，如果下标不存在，创建新值）
数组名[下标] = 值

// 创建数组
//1.隐式创建
var arr = [1,2,3];
console.log(arr);

//直接创建对象
arr = new Array(1,2,3,4,5);
console.log(arr);

//创建数组设置长度
arr = new Array(5);
console.log(arr);

//数组的长度
console.log(arr.length);
arr.length = 10;
console.log(arr.length);
console.log(arr[0]);
arr[20] = 10;
console.log(arr);

var newArr = [1,"文字","true",undefined,null];

newArr['key'] = 'value';
newArr.length = 7;
console.log(newArr);
console.log("!!!!!!!!!!!!!!");

/* 
	数组遍历
		for
		for in
		for Each
 */
//for    展示非空数据和空数据，下标，不能输出属性
for(var i = 0; i < newArr.length; i++){
	console.log(newArr[i]);
}
console.log("---------------------");

//for in     展示下标，正常数据，可以输出属性
for(i in newArr){
	console.log(newArr[i]);
}
console.log("---------------------");
	
//forEach     展示下标，正常数据，不能输出属性
newArr.forEach(function(num,index){
	console.log(num+"----"+index);
});


// 数组提供的方法
var arr = ['1','a',5,'3'];
console.log(arr);//1,a,5,3
//最后添加数据
arr.push(10);
console.log(arr);//1,a,5,3,10
//前面添加数据
arr.unshift('b');
console.log(arr);//b,1,a,5,3,10
//删除最后一个
arr.pop();
console.log(arr);//b,1,a,5,3
//删除第一个
arr.shift();
console.log(arr);//1,a,5,3
//反转
arr.reverse();
console.log(arr);//3,5,a,1
//数组转成字符串
console.log(arr.join('\''));
console.log(arr);//3'5'a'1
//获取数值的对应索引
console.log(arr.indexOf('a'));//2
console.log(arr.slice(2,5));//a,1
console.log(arr);//3,5,a,1
//置换元素数据
arr.splice(1,1,'一','二');
console.log(arr);//3,一,二,a,1
var arr1 = [0,'100'];
console.log(arr.concat(arr1));//3,一,二,a,1,0,'100'
console.log(arr);//3,一,二,a,1
console.log(arr1);//0,'100'