点击直通车↓↓↓
一、概念
JavaScript（JS）是一种基于对象和事件驱动、且可以与HTML标记语言混合使用的脚本语言，其编写的程序可以直接在浏览器中解释执
二、与java的关系
从本质上来讲，Java和JS是两门语言，并没有本质上的联系。
三、如何写js代码
在html代码中写，三种方式
1.先写好一个*.js文件，通过script标签引入这个js文件 <script src="demo1.js"></script>
2.在script标签中直接书写js代码
<script type="text/javascript">
function hello(){
alert("hello world!");
}
</script>
3.直接在html代码中写
不推荐这样写
四、变量
全局变量
1.在方法外部定义的变量
2.在方法内部，不添加var关键字（仅限于非严格模式）
局部变量
在方法内部使用var关键字定义的变量
<script type="text/javascript">
"use strict"
var a = 10;
var date = new Date();
//js的语言是抄袭java，注释和java一样
//js使用console.log(变量)
console.log(date)
function func(){
abc = 110;
console.log(abc)
console.log(a)
}
func();
//报错
console.log(abc)
</script>
一、创建数组
1.创建一个空数组
var arr = new Array();
2.创建一个具有长度的空数组
var arr2 = new Array(size)
3.创建一个具有元素的数组
var arr3 = new Array(ele1,ele2, ... ,eleN)
4.创建一个空数组或具有元素的数组
var arr4 = [ele1,...,eleN]
二、数组属性
length 表示数组的长度，可以利用该属性清空数组（length = 0）
三、数组方法
push( ele )：向数组的尾部添加一个元素，返回数组的新长度
unshift( ele)： 向数组的头部添加一个元素，返回数组的新长度
pop()：从数组的尾部取出一个元素，返回该元素本身
shift()：从数组的头部取出一个元素，返回该元素本身
join( ele ) : 使用指定的ele字符连接数组中的每个元素，并将其作为一个字符串返回
concat( arr1,arr2,...,arrN )：拼接给定的数组元素，返回一个新数组
reverse()：反转数组
sort()：对数组的元素进行排序（自然顺序）
splice(start,count,newEle)：从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
参数：
start 开始索引
count 移除元素的数量
newEle 要加入的新元素，该参数可以省略
slice(start，end)：截取数组的一段，返回一个新数组
参数：
start 开始索引
end结束索引（不包含），该参数可以省略（截取到数组末尾）
四、遍历数组
for (var i = 0 ; i< 数组的长度;i++)
for (var arrIndex in 数组)
数据类型及数据类型手动转换
1 <script type="text/javascript"> 2 /* 3 6种常用的数据类型，查看变量的数据类型使用typeof 4 1.undefined 声明一个变量并没有为其赋值 5 2.null 声明一个变量，并为其赋值为null 6 3.boolean 声明一个变量，为其赋值为ture或false 7 4.string 声明一个变量，为其赋值为字符串（单引号和双引号都可以） 8 5.number 数值型 1.整型 、 2.浮点型 、 3.正负无穷大 、 4.NaN = Not a Number 9 6.object 对象型 10 */ 11 12 function testDataType() { 13 var a; 14 console.log(typeof a, a); 15 16 var b = null; 17 console.log(typeof b, b); 18 19 var c = true; 20 console.log(typeof c, c); 21 22 var d = '123'; 23 console.log(typeof d, d); 24 25 var e1 = 123; //整型 26 console.log(typeof e1, e1); 27 var e2 = 123.45; //浮点型 28 console.log(typeof e2, e2); 29 var e3 = 1/0; //Infinity无穷大 30 console.log(typeof e3, e3); 31 var e4 = Number("haha"); //NaN = Not a Number 32 console.log(typeof e4,e4) 33 34 var f = new Array(); 35 console.log(typeof f,f); 36 } 37 //testDataType(); 38 39 function transferNumber(){ 40 var b1 = false; 41 var n1 = Number(b1); 42 console.log(n1); 43 44 var c = null; 45 var n2 = Number(c); 46 console.log(n2); 47 48 var e; 49 var n3 = Number(e); 50 console.log(n3); 51 52 var f = "fadsf123123adfds"; 53 var n4 = Number(f); 54 console.log(n4); 55 56 57 var nullstr = ""; 58 var n5 = Number(nullstr); 59 console.log(n5); 60 61 } 62 63 transferNumber(); 64 65 function transferString(){ 66 var a = null; 67 var b; 68 console.log(String(a)); 69 console.log(String(b)); 70 71 var c = true; 72 console.log(String(c)); 73 } 74 // transferString(); 75 76 function transferBoolean(){ 77 var a = ""; 78 var b; 79 var c = null; 80 var d = 0; 81 var e = Number("haha"); 82 83 console.log(Boolean(a)); 84 console.log(Boolean(b)); 85 console.log(Boolean(c)); 86 console.log(Boolean(d)); 87 console.log(Boolean(e)); 88 89 console.log(Boolean("kjhasdkjfhs")); 90 console.log(Boolean(123)); 91 92 } 93 94 // transferBoolean(); 95 96 </script>
数据类型的自动转换
<script>
function test() {
//布尔型、字符串、数字的转化
var a = true;
var b = "888" + a;
var c = 99 + a;
console.log(b); // 888true
console.log(c); // 100
//数字和字符串转化
var d = 33;
var e = "44";
var f = d + e;
var g = 3 * "4";
console.log(f) // 3344
console.log(g) // 12
//null、布尔型、字符串、数字的转化
var h = null;
var h2 = h + 3;
console.log(h2) // 3
var h3 = "aa" + h;
console.log(h3) // aanull
if (!h) {
console.log("h自动转化为boolean值：false！")
}
}
// test();
function test2() {
var a;
var b = null;
console.log(typeof a + "----" + typeof b);
if (a == b) {
console.log("null和undefined可以互相转换！");
}
}
// test2();
function test3() {
//布尔型、数值型、字符串型 在进行相互==比较时，不为数字的那一方自动调用Number()方法
var a = 1;
var b = true;
var c = "true";
var d = "1";
console.log(a==b); //true
console.log(a==c); //false
console.log(a==d); //true
console.log(b==c); //false
console.log(b==d); //true
}
// test3();
function test04() {
//null和undefined互相是相等，且自身也相等，除此之外和谁都不等
console.log("zzz" == undefined); //false
console.log("zzz" == null); //false
console.log(1 == undefined); //false
console.log(1 == null); //false
console.log(0 == undefined); //false
console.log(0 == null); //false
console.log(false == undefined); //false
console.log(false == null); //false
console.log(null == undefined); //true
console.log(undefined == undefined); //true
console.log(null == null); //true
}
// test04();
function test05() {
//NaN比较特殊，他和自己都不相等
var a = Number("haha");
var b = Number("haha");
console.log(a == b);
console.log(NaN == NaN);
}
// test05();
// ()圆括号
// []方括号
// {}花括号
// <>尖括号
function test06() {
// var a = new Array();
var a = []; //定义一个空数组
console.log(a.toString()); // 什么都没有
}
// test06();
function test07() {
// var a = new Object();
var a = {}; //定义一个对象
console.log(a.toString()); // [object Object]
}
// test07();
function test08(){
var a = {};
console.log(!a); //对象加! 得到一个布尔型的 false
}
// test08();
</script>
数据类型的自动转换2
<script type="application/javascript">
function test() {
console.log('' == '0') //类型相同，比较值，值不同，所以false
console.log(0 == '') //类型不同，String转Number，空字符串转为0，变成0==0，所以true
console.log(0 == '0') //类型不同，String转Number，'0'转成0，变成0==0，所以true
console.log(false == 'false') //类型不同，Boolean转Number，即0=='false'，然后'false'转Number，为0==NaN,所以false
console.log(false == '0') //类型不同，Boolean转Number，即0=='0'，就变成第3个例子，所以true
console.log(false == undefined) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以false
console.log(false == null) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以false
console.log(null == undefined) //对于undefined和null，只有它们本身两个比较才是true，其他都是false，所以true
console.log(true == 2) //类型不同，Boolen转Number，即1==2，所以false
console.log(NaN == NaN) //NaN非常特殊，和自身也不相等，所以false
console.log('
' == 0) //类型不同，String转Number，空String都将转成0，即0==0,所以true
console.log(0 == []) //对象类型[]调用toString()转为""，即0==""，即0==0，所以true
console.log(0 == ['']) //对象类型['']调用toString()转为""，即0==""，即0==0，所以true
console.log('0' == []) //对象类型[]调用toString()转为""，即'0'==""，类型相同，值不同，所以false
console.log('0' == [0]) //对象类型[0]调用toString()转为"0"，即'0'=="0"，类型相同，值也相同，所以true
console.log(true == [1]) //对象类型[1]调用toString()转为"1"，即1=="1"，转1==1，所以true
console.log([] == []) //对象类型，比较引用地址，两个[]是不同的引用地址，所以false
console.log(![] == []) //加!强制转Boolean，任何对象都是true，取反即false==[]，转为0==""，即0==0，所以true
console.log(!{} == {}) //即false=={}，转为false=="[object Object]"，即0==NaN，所以false
}
/**
* 1.==符号在判断左右两边数据是否相等时，如果数据类型一致，直接比较值即可
* 2.==符号左右数据类型不一致时，如果两方数据为布尔型、数值型、字符串型时，不为数字的那一方自动调用Number()方法
* 3.undefined和null这两者互相相等，及自身也相等，除此之外和谁都不想等
* 4.NaN比较特殊，他和自己都不相等
* 5.当数值型、字符串型、布尔型和对象进行比较时，对象调用toString()方法得到一个字符串
* 6.对象和对象进行比较时，直接比较内存地址
* 7.任何对象加!强制转false
*/
test();
</script>
运算符
<script type="text/javascript">
// "=" 赋值运算符
// "==" 等值符，如果数据类型不一致，会先进行数据类型自动转换
// "===" 等同符，不会发生数据类型的自动转换
console.log(5 + 4);
console.log(5 - 4);
console.log(5 * 4);
console.log(5 / 4);
console.log(5 % 4);
var a = 10
console.log(a++); //10
console.log(++a); //12
console.log(a--); //12
console.log(--a); //10
a += 1;
console.log(a); // 11
a -= 1;
console.log(a); //10
var f1 = true;
var f2 = false;
var str1 = "aaa";
str1 += "bbb";
console.log(str1);
console.log(5 > 4 ? "是的" : "否")
</script>
分枝循环
<script type="text/javascript">
var age = 20;
/* if(age >= 18)
alert("做苦力！");
else
alert("未成年人，请保护。");
alert("hi")*/
var day = "11";
switch (day) {
case "monday":
console.log("星期一");
break;
case "tuesday":
console.log("星期二")
break;
case "wednesday":
console.log("星期三")
break;
default:
console.log("不上班")
}
/*循环语句*/
var num = 10;
while (num > 0) {
console.log(num);
num--;
}
var num2 = 10;
do {
console.log(num2)
num2--
} while (num2 > 0);
for (var i = 0; i <= 10; i++) {
console.log(i);
}
var arr = [123, 321, 11, 22, 33, "44", "55", "66", true, new Date()]; //数组
/* for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}*/
for (var ele in arr) {
// ele是下标
console.log(arr[ele]);
}
//continue表示跳出当次循环，继续下次循环
for (var i = 1; i <= 10; i++){
if(i == 5){
continue
}
console.log(i);
}
//break表示跳出整个循环
for (var i = 1; i <= 10; i++){
if(i == 5){
break
}
console.log(i);
}
</script>
数组
<script type="text/javascript">
//一、创建数组
//1.创建空数组
var arr = new Array();
console.log(arr.length);
//2.创建具有长度的数组
var arr2 = new Array(10);
console.log(arr2)
//3.创建一个带元素的数组
var arr3 = new Array(123, true, "hello", new Date());
//4.创建一个带元素的数组2
var arr4 = [123];
console.log(arr4.length)
//二、属性
// length属性：表示数组的长度
console.log(arr3);
arr3.length = 0; //清空数组
console.log(arr3);
arr3.length = 4;
console.log(arr3);
//三、方法
var arrdemo = new Array(123, true, "hello", new Date(), 444333);
//join():指定一个字符，用该字符连接数组的每一个元素，并作为一个字符串返回
var result = arrdemo.join("-");
console.log(result);
//push():向数组的末尾添加一个元素，返回数组的新长度
result = arrdemo.push("world");
console.log(result)
console.log(arrdemo);
//pop():从数组末尾取出一个元素，并返回该元素本身
result = arrdemo.pop();
console.log(result);
console.log(arrdemo);
//shift()：从数组头部取出一个元素，并返回该元素本身
result = arrdemo.shift();
console.log(result);
console.log(arrdemo);
//unshift()：向数组的头部添加一个元素，返回数组的新长度
result = arrdemo.unshift("bbb");
console.log(result);
console.log(arrdemo);
//concat()：拼接数组，并作为一个新的数组返回
var a1 = [123, 234];
var a2 = ["aaa", "bbb"];
var a3 = [new Date()];
var newarr = a1.concat(a2, a3);
console.log(newarr);
//reverse():反转数组
newarr.reverse();
console.log(newarr);
//sort():自然顺序
// var sortarr = [4534,22,66,88,123];
var sortarr = [4534, 22, 66, 88, 123, "A", "a", "ab", "ba", "abc", "bac"];
sortarr.sort()
console.log(sortarr);
//splice()：删除指定位置，指定长度的元素，并在该位置添加新的元素
var s1 = ["aa", 'kjsdhf', '123', 123, 123, 444, 555, 666];
s1.splice(0,0,"laowang");
console.log(s1);
//slice()；截取子数组
var s2 = s1.slice(3,5);
console.log(s2);
</script>