1.概述
1.1JavaScript
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript是一种弱类型语言
- 它的解释器被称为JavaScript引擎,为浏览器的一部分
- 主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为
- 跨平台特性,在绝大多数浏览器的支持下。
Node: 默认安装. 浏览器
Js node/浏览器
Java jvm
1.2HTML引入JS
- 内部JS程序:直接写在html页面内部,用
<script>
标签包裹
<script>
function show(){
//获取按钮元素
var clickButton = document.getElementById("clickButton");
//获取展示区元素
var showName = document.getElementById("showName")
//名字数组
var name = ["zs", "ls", "wu", "zl"];
var index = Math.floor(Math.random()*name.length);
showName.innerHTML = name[index];
}
</script>
- 外部导入:导入外部的js文件, 在head中导入
1.3Js日志和注释
如果前端的代码和你想的不一样, 第一步,打开浏览器的控制台, 看一下报了什么错误, 如果没有错误, 日志输出一些关键信息,
看是否符合预期,
- 常用测试
alert()
console.log() - 注释语句
//
/**/
1.4弱类型和var
Js的变量类型, 不能通过声明来确定, 只能通过赋值类型来决定
2.变量和属性
2.1变量的声明
-
JavaScript在声明时统一使用**无类型(**untyped)的“var”关键字
-
var来声明一个变量,这是一个固定的写法,是js的语法
-
JavaScript并没有避开数据类型,它的数据类型是根据所赋值的类型来确定的
-
JavaScript 对大小写敏感
-
变量名有命名规范:
只能由英语字母、数字、下划线、美元符号$构成,且不能以数字开头,并且不能是JavaScript保留字 -
如果重新声明 JavaScript 变量,该变量的值不会丢失:
在以下两条语句执行后,变量 carname 的值依然是 “Volvo”:
var carname=“Volvo”;
var carname; -
(let const)
2.2类型检测
- typeof表示“某某的类型”
- 语法:
typeof 变量
instanceof表示"是某某类型” - Eg:
console.log(typeof b)
String
- var str=‘123s’;
Number
- var x1=34.00; //使用小数点来写
- var x2=34; //不使用小数点来写
- 只要是个数,那么就是数值型的,无论整浮、无论大小、无论正负,都是number类型的
Boolean
- var x=true
- var y=false
数组
- var cars=new Array();cars[0]=“Audi”;
- var cars=new Array(“Audi”,“BMW”,“Volvo”);
- var cars=[“Audi”,“BMW”,“Volvo”];
对象
- var person={firstname:“Bill”, lastname:“Gates”, id:5566};
- 获取参数
name=person.lastname;
name=person[“lastname”]; - 添加参数并赋值
person.aaa = 'aaaa’ - 注意:
var person={
firstname:"Bill", lastname:"Gates", id:5566};
var b = person
b.lastname = 'b'
console.log(b) // 结果: lastname为b
console.log(person) // 结果: lastname为b
3.函数
函数就是包裹在花括号中的代码块,前面使用了关键词 function
4.分支和循环结构(语言逻辑)
4.1 运算符
- +,-,*,/,%,++,–
- =, +=, -=, *=, /=, %=
- 注意:
加法:20+10+'20’
减法:‘30’-‘10’
4.2 比较和逻辑运算符
!=, > , <, >=, <=, ? 三元
&& , ||, !
注意:
==:值相等
===:值相等并且类型相等
!==值不相等或类型不相等
4.3 逻辑for语句
种类一:
var person={
fname:“John”,lname:“Doe”,age:25};
for (x in person) {
alert(x)
alert(person[x])
}
种类二:
for (var i=0; i<5; i++) {
x=x + "The number is " + i + “
”;
}
5.核心对象
5.1 Number
5.1.1 toString() 以字符串返回数值
var ii = 123
console.log(typeof ii)
console.log(typeof ii.toString())
5.1.2 toFixed() 返回字符串值,它包含了指定位数小数的数字(四舍五入):
var x = 9.6544;
x.toFixed(2); // 返回 9.65
5.1.3 toPrecision() 返回字符串值,它包含了指定长度的数字:
var x = 9.656;
x.toPrecision(); // 返回 9.656
x.toPrecision(2); // 返回 9.7
5.1.4 MAX_VALUE 返回 JavaScript 中的最大数字。
var x = Number.MAX_VALUE;
5.1.5 MIN_VALUE 返回 JavaScript 中的最小数字
var x = Number.MIN_VALUE;
5.1.6 parseInt() 方法,允许空格。只返回首个数字:
parseInt(“10”); // 返回 10
5.1.7 parseFloat() 方法.允许空格。只返回首个数字
parseFloat(“10.33”); // 返回 10.33
5.2 String
5.2.1 length 属性返回字符串的长度
var txt = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
var sln = txt.length;
5.2.2 indexOf()方法返回字符串中指定文本首次出现的索引(位置):
var str = “The full name of China is the People’s Republic of China.”;
var pos = str.indexOf(“China”);
var pos = str.indexOf(“China”, 28);
indexOf() 不存在返回 -1。
5.2.3 slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
var str = “Apple, Banana, Mango”;
var res = str.slice(7,13);//裁剪字符串中位置 7 到位置 13 的片段
5.2.4 split() 将字符串转换为数组
var txt = “a,b,c,d,e”; // 字符串
txt.split(","); // 用逗号分隔
txt.split(" “); // 用空格分隔
txt.split(”|"); // 用竖线分隔
如果分隔符是 “”,被返回的数组将是间隔单个字符的数组:
5.3 Array
5.3.1 toString() 返回数组转换的数组值(逗号分隔)的字符串。
var fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
alert(fruits.toString()); //Banana,Orange,Apple,Mango
5.3.2 pop() 方法从数组中删除最后一个元素,返回删除的元素
fruits.pop(); // 从 fruits 删除最后一个元素(“Mango”)
var x = fruits.pop(); // x 的值是 “Mango”
5.3.3 push() 方法(在数组结尾处)向数组添加一个新的元素,返回数组长度
fruits.push(“Kiwi”); // 向 fruits 添加一个新元素
5.3.4 splice() 方法可用于向数组添加新项, 返回([])
fruits.splice(2, 0, “Lemon”, “Kiwi”);
// 第一个参数:添加新元素的起始位置。第二个参数:定义应删除多少元素。
// 其余参数(“Lemon”,“Kiwi”)定义要添加的新元素。
5.3.5 sort() 方法以字母顺序对数组进行排序,返回值和原数组是经过排序的数组
fruits.sort(); // 对 fruits 中的元素进行排序
5.3.6 reverse() 方法反转数组中的元素。返回值和原数组都变为经过反转数组
fruits. reverse(); // 对 fruits 中的元素进行排序