1 JavaScript语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js</title>
</head>
<body>
<!-- 1 书写形式--内联式,把js代码放到标签的特殊属性中 -->
<!-- <button onclick="alert('hello')">这是一个按钮</button> -->
<!-- 2 书写形式--内嵌式,把js代码写到script标签中 -->
<!-- <script>
// 弹窗
// alert('hello world');
</script> -->
<!-- 3 书写形式--外部式,把js代码单独写到 .js文件中,在html中引入这个js文件,使用script标签引入,这种写法的好处就是可以引入公共js代码,方便多个页面进行重复使用 -->
<!-- <script src="a.js"></script> -->
<!-- 4 控制台输出 在网页检查中能够看到-->
<!-- <script>
console.log('hello');
</script> -->
<!-- 5 变量的定义和使用 直接写let就可以,可以不用var-->
<!-- <script>
var name = '张三';
let age = 18;
console.log(name);
console.log(age);
</script> -->
<!-- !6 js中的变量类型是动态的,程序运行时变量的类型可以发生改变 -->
<!-- 动态类型提供了更灵活的编程方式,可以支持多种类型的数据;但是由于太过灵活,不适合大型多模块项目 -->
<!-- <script>
let a = 10;
console.log(typeof(a));
a = 'hello';
console.log(typeof(a));
</script> -->
<!-- 7 number数字类型,不区分整数还是浮点数 -->
<!-- 这里的运行结果是0.5 在Java中结果应该是0,int/int = int,不存在小数 -->
<!-- <script>
let a = 1;
console.log(a/2);
</script> -->
<!-- 8 NaN not a number -->
<!-- <script>
console.log('hello'-10);
</script> -->
<!-- 9 string字符串 js中字符串可以用单引号表示,也可以用双引号表示,js中的转义字符和Java中的一样-->
<!-- <script>
let name ='My name is "haa"';
console.log(name);
</script> -->
<!-- 10 字符串长度 -->
<!-- <script>
let name = '张三';
console.log(name.length);
</script> -->
<!-- 11 字符串拼接 直接使用+拼接生成新的字符串对象-->
<!-- <script>
let a = 'hello';
let b = 10;
console.log(a + b);
</script> -->
<!-- 12 字符串比较 js比较两个字符串内容是否相等,直接使用==即可-->
<!-- 13 boolean布尔类型 js里的Boolean类型是可以隐式转成number的 true--1 false--0 Java中禁止隐式转换
像Java这种不太支持隐式转换的称为强类型语言,js这种比较支持隐式转换的叫做弱类型语言 -->
<!-- <script>
let a = true;
console.log(typeof(a));
console.log(a+10);
</script> -->
<!-- 14 undefined 访问某个变量没有被定义不存在,结果就是undefined
undefined和数字进行运算结果就是NaN,如果把undefined和字符串拼接,就会把undefined当成一个字符串-->
<!-- <script>
let a = 'hello';
console.log(a.lenght);
</script> -->
<!-- 15 null 访问的变量存在但是空值 -->
<!-- <script>
let b = null;
console.log(b);
</script> -->
<!-- 16 js运算符和Java类似 但是这里的1/2=0.5 其他大部分语言结果都是0-->
<!-- <script>
console.log(1/2);
</script> -->
<!-- 17 === js中比较相等用 == 和 === ,前者会进行隐式类型转换,后者不会进行隐式类型转换
以下这个例子前者结果是true 后者结果是false-->
<!-- <script>
let a = 10;
let b = '10';
console.log(a==b);
console.log(a===b);
</script> -->
<!-- 18 逻辑运算符与或非与Java类似 但是Java中与或返回true或者false,JS中的与或返回的是第一个或者第二个表达式 -->
<!-- <Script>
let a = 10;
b = a || 0;
console.log(b);
</Script> -->
<!-- 19 条件语句和Java类似-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS</title>
</head>
<body>
<!-- 1 JS数组 -->
<Script>
// 这样写合法但是一般不用
let arr1 = new Array();
// 常用写法,[]表示空的数组,且js的数组可以动态变化,更接近与ArryList
let arr2 = [];
// 创建数组的时候可以直接指定初始值
let arr3 = [1,2,3,4]
// js数组允许里面存在不同的元素类型,归咎于动态类型
let arr4 = [1,'hh',true,[]];
// 访问数组元素,在JS中,下标访问越界结果undefined
let arr = ['机器人','扫地机器人','智能语音助手'];
console.log(arr[1]);
console.log(arr.length);
arr[1] = '过六级';
console.log(arr);
console.log(arr[3]);
// 插入新元素,变为长度为4的数组
// 假如直接给下标为100的元素赋值,此时数组长度为101,中间用empty*n来表示,假如下标为-1,数组整体长度不变,打印出来键值对
// 只有下标是非负整数才是操作下表,如果是其他值,就被认为数组的自定义属性
arr[3] = '必须过六级';
console.log(arr);
// 数组新增/删除元素,最常用的是使用push进行尾插,使用pop删除元素
let arr5 = [];
for(let i = 0; i < 10; i++) {
arr5.push(i);
}
console.log(arr5);
let ret = arr5.pop();
console.log(ret);
console.log(arr5);
// 中间位置插入/删除元素 splice 还可以进行元素的替换
// 第一个元素表示要取的数组的起始下标,第二个参数表示要取的数组的长度,第三个参数表示替换值,表示从下标2开始把长度为0的元素替换成新元素
let arr7 = [1,2,3,4,5,6]
arr7.splice(2,0,'hello');
console.log(arr7);
</Script>
<!-- 2 函数 -->
<script>
// 函数和方法其实很相似,函数相当于独立的逻辑不依赖对象,方法则是依赖一个对象的
// 函数的定义 function 由于动态类型这里不必写返回值
function hello() {
console.log('hello');
}
hello();
function add(x,y) {
return x+y;
}
let ret2 = add(10,20);
console.log(ret2);
// js函数支持不同类型的参数,调用函数传参的时候同一个函数允许不同的类型,只要这些在函数内部能正常使用即可.
ret2 = add('hello','world');
console.log(ret2);
// js不要求形参和实参个数匹配
// function a(a,b,c,d,e,f,g) {
// a = a || 0;
// b = b || 0;
// c = c || 0;
// d = d || 0;
// e = e || 0;
// f = f || 0;
// g = g || 0;
// return a+b+c+d+e+f+g;
// }
// 简化上述代码
// function a() {
// let ret3 = 0;
// // 此处arguments这个数组就包含了调用a方法的多有实参的值
// for(let i = 0; i < arguments.length; i++) {
// ret3 += arguments[i];
// }
// return ret3;
// }
// 上述代码的另外一种写法
// 这里先定义了一个变量,给变量进行赋值,赋的值是一个function,a的类型就是函数,在js中,函数可以像普通变量一样进行赋值,还可以作为另一个函数的参数,或者是另一个函数的返回值
let a = function() {
let ret3 = 0;
for (let i = 0; i < arguments.length; i++) {
ret3 += arguments[i]
}
return ret3;
}
// 当实参比形参多的时候,多出来的实参就不能通过形参获取到
// 当实参比形参少的时候,多出来的形参就是undefined,得到NaN
let ret3 = 0;
ret3 = a(10,20);
console.log(ret3);
ret3 = a(10,20,30);
console.log(ret3);
ret3 = a(10,20,30,40);
console.log(ret3);
ret3 = a(10,20,30,40,50,60,70,80);
console.log(ret3);
</script>
<!-- 3 作用域 作用域链-->
<!-- js中代码尝试访问一个变量,会首先在当前代码块中查找,如果当前代码块中没有,就会继续往上级查找,一直查找到全局领域 -->
<script>
let num = 999;
function test() {
console.log(num);
}
test();
</script>
<!-- 4 对象 -->
<script>
// js对象类似于Java对象,更加简化 js中的对象使用{}来表示
let student = {
name:'jt',
age:18,
gender:'male',
sing:function() {
console.log('hhh');
}
};
console.log(student.name);
student.sing();
// 构造函数
function St(name,age,gender,singMsg) {
this.name = name;
this.age = age;
this.gender = gender;
this.sing = function() {
console.log(singMsg);
}
}
let st = new St('jt',18,'male','hhh');
</script>
<!-- 在js中虽然有类的概念,但是不能进行封装,也不能进行继承,更不能多态,因此不是一个面向对象的编程语言 -->
</body>
</html>