JavaScript简介
JavaScript是一种轻量级的脚本语言，可以部署在多种环境,最常见的部署环境就是浏览器。所谓"脚本语言",指的是它不具备开发操作系统能力,而是只用来编写控制其他大型应用程序的操作方法
第一个JavaScript程序
<!DOCTYPE html>
<html>
<head lang="en">
<title></title>
<meta charset="utr-8">
</head>
<body>
<script type="text/javascript">
var str = "hello world";
document.writeln(str);
</script>
</body>
</html>
JavaScript变量类型
JavaScript中有六大基本数据类型,这六种数据类型也就是我们声明变量的类型。
(1) number 数字类型
(2)string 字符(串)类型
(3)boolean 布尔类型
(4)*Array 数组类型(不是基本数据类型)
(5)undefine&null 未定义类型&空类型
(6)object 对象类型
JavaScript输出
windows.alert() 弹出警告框
document.write() 将内容写道HTML文档中
console.log() 写入到浏览器到控制台
typeof获取当前变量类型运算符
var a = 100;
document.write(typeof a)
比较运算符
==: 简单比较运算符(忽略变量类型)
===: 标准比较运算符(计算变量类型)
!=: 判断是否不相等(忽略变量类型)
!==: 判断是否严格不相等(计算变量类型)
prompt: 输入语句
var a = prompt("您饿了嘛?: ");
switch(a){
case "好饿": document.writeln("吃蛋糕吧");break;
case "不饿": document.writeln("去运动吧");break;
default: document.writeln("去睡觉吧");break;
}
字符串的基本操作
| constructor | 返回创建字符串属性的函数 |
|---|---|
| length | 返回字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
字符串方法
| 方法 | 描述 |
|---|---|
| charAt() | 返回指定索引位置的字符 |
| charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
| concat() | 连接两个或多个字符串，返回连接后的字符串 |
| fromCharCode() | 将 Unicode 转换为字符串 |
| indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
| lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
| localeCompare() | 用本地特定的顺序来比较两个字符串 |
| match() | 找到一个或多个正则表达式的匹配 |
| replace() | 替换与正则表达式匹配的子串 |
| search() | 检索与正则表达式相匹配的值 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分 |
| split() | 把字符串分割为子字符串数组 |
| substr() | 从起始索引号提取字符串中指定数目的字符 |
| substring() | 提取字符串中两个指定的索引号之间的字符 |
| toLocaleLowerCase() | 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLocaleUpperCase() | 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射 |
| toLowerCase() | 把字符串转换为小写 |
| toString() | 返回字符串对象值 |
| toUpperCase() | 把字符串转换为大写 |
| trim() | 移除字符串首尾空白 |
| valueOf() | 返回某个字符串对象的原始值 |
var str = "alvin";
var strs = "is great";
var list = str.concat(strs); //字符串拼接
document.writeln(str.length); //字符串的长
document.writeln(str[2]); //找索引
document.writeln(str.charAt(3)); //根据位置找到字符
document.writeln(list);
字符串对象截取
var str = new String("hello world"); //对象创建法
document.writeln(str);
//-------截取字符串-------
var result = str.substring(2,6); //从2算起截取到6
document.writeln(result);
var results = str.substr(2,6) //从2算起截取6个
document.writeln(results)
字符串其他方法
// indexOf() 返回一个字符串在另一个字符串中首次出现的索引
var str = "hello world alvin";
document.writeln(str.indexOf("world"));
//replace 找到第一个指定字符替换成目标字符
var str = "hello world alvin";
var result = str.replace("world","666")
document.writeln(result);
//-------trim()方法-------去掉字符串两端多余的空格
var str = " hello world ";
var resu = str.trim();
document.write(resu)
//localeCompare()方法 根据本地排序规则来进行比较
//-------match()方法------- 查找源字符串是否匹配某个字符串
var str = "alvin is great";
document.write(str.match("alvin")); //找到返回内容,没找到返回Null
//-------search方法------- search和match相似
var str = "alvin is great";
document.write(str.search("alvin"));//找到返回下标,没有返回Null
练习:替换字符串中所有的 axt,替换成666
var str = "axtasjifasjfisaxtsfsoafjapsfaxt";
while(str.indexOf("axt") != -1){
str = str.replace("axt","666");
}
document.write(str);
数组
//数组的声明
var arr = [10,20,"world",40,50]; //普通方法
var Arr = new Array("jel",5,'f',9.2); //对象方法
document.write(arr[1]);
document.write(Arr[1]);
数组的遍历
var arr = [10,20,30,40,50,60,70];
//方式一
for(var index in arr){
document.write(arr[index] + " ")
}
document.writeln();
//方式二
for(var i = 0; i < arr.length; i++){
document.write(arr[i] + " ")
}
数组常用的一些方法
| 方法 | 说明 |
|---|---|
| isArray | 判断是否为数组 |
| valueOf | 返回数组本身 |
| toString | 将数组以字符串的形式返回 |
| push | 向数组末尾追加数据,返回当前数组的长度 |
| pop | 删除数组最后一个元素 |
| join | 将数组转化为字符串,默认按都好隔开 |
| shift | 在数组头部删除一个元素 |
| unshift | 在数组头部添加一个元素 |
| reverse | 数组反转 |
| slice | 数组截取 |
| splice | 数组截取,并且可以插入新的元素(改变原数组) |
| sort | 排序 |
| indexOf | 索引 |
| lastindexOf | 反序索引 |
数组添加删除方法
//-------push方法尾部添加------- unshift是在第一个元素添加,其他的和push差不多
var arr = [10,20,30];
var len = arr.push(40); //得到数组的长度
document.writeln(len);
document.writeln(arr.toString());
//-------pop删除最后一个-------shift是删除第一个,和pop差不多
var arr = [10,20,30];
var brr = arr.pop(); //得到被删除的元素
document.writeln(arr.toString() + "<br/>"); //已经删除了最后一个
document.writeln(brr);
数组添加删除方法的练习
需求:
模拟一款射击游戏的编码过程。有一个输入框和两个按钮。其中输入框用来显示手枪还有多少子弹。
第一个按钮用来给手枪填子弹，第二个按钮用来射击。
要求
第一个按钮点击一次上一发子弹。最多拥有六发子弹。超过六发时点击提示弹夹已满
第二个按钮点击一次进行一次射击。射击一次子弹数减少一。当0发时提示弹夹已空。
无论是填子弹按钮还是射击按钮，每次弹夹中子弹发生改变时都会在输入框中显示。
<body>
<p>
<span>弹匣中子弹:</span>
<input type="text" id="danxia">
</p>
<p>
<button id="load">上子弹</button>
<button id="shoot">射击</button>
</p>
<script type="text/javascript" charset="UTF-8">
var danxia = document.getElementById("danxia"); //获取元素id
var load = document.getElementById("load");
var shoot = document.getElementById("shoot");
var danxiaArr = [];
//上面关联了id，现在就相当于把数组的长度赋值给了上面的文本框
danxia.value = danxiaArr.length;
//onclick按钮执行事件
load.onclick = function(){
if(danxiaArr.length == 6){
alert("弹匣已满!");
}else {
danxiaArr.push("子弹"); //加子弹
danxia.value = danxiaArr.length; //赋值
}
}
shoot.onclick = function(){
if(danxiaArr.length == 0){
alert("弹匣已空!");
}else{
danxiaArr.pop(); //删除元素
danxia.value = danxiaArr.length;
}
}
</script>
</body>
数组常用方法
//reverse反转, reverse会改变原数组
var list = arr.reverse();
document.write(arr.toString());
//slice截取,和字符串差不多,头是开区间,尾是闭区间
var arr = [10,20,30,40,50];
document.write(arr.slice(2,4));
//splice方法,根据索引范围删除元素
//如果只有一个参数,就会删除索引后面的全部内容，也包括索引自身
var arr = [10,20,30,40,50,60,70,80];
var newa = arr.splice(2,4); //两边都是开区间,将被删除的元素返回
document.write(arr + "<br/>");
document.write(newa);
二维数组的概念和其他编程语言差不多,这里就省略了
数组常用方法2
/* 1.isArray()
描述：判断变量是否是数组，如果是返回true，否则返回false
语法：Array.isArray();
例子：
var arr=['a','b','c'];
console.log(typeof arr);
console.log(Array.isArray(arr));
var obj={};
console.log(typeof obj);
console.log(Array.isArray(obj));
2.valueOf()
描述：valueOf方法归属于Object对象类型，
作用是返回指定对象的原始值。在数组中作用是返回数组本身。
语法：arr.valueOf()
例子：
var arr=['a','b','c'];
console.log(arr);
console.log(arr.valueOf());
console.log(arr===arr.valueOf());
3.toString()
描述：能够将数组转换成字符串，默认是以逗号隔开
语法：arr.toString()
注意：不仅能够合并数组元素，对布尔类型也能够生成
例子：
var arr=['aa','bb','cc'];
var str=arr.toString();
console.log(str);
var str=true;
console.log(str);
var newStr= str.toString();
console.log(typeof newStr);
4.join()
描述：join方法能够以给定的参数做分隔符，将所有的数组元素组成一个字符串。
如果不提供参数，默认使用逗号分隔。
语法：arr.join('分隔符');
*/
var str='hello sxt! goodbye sxt';
var arr= str.split(' ');
console.log(arr);
var newStr=arr.join('==');
console.log(newStr);
函数:
JavaScript里面的函数使用 function声明,形参直接输入名字即可,概念和java一样
function num(a,b){
return a + b;
}
var result = num(7,8);
document.write(result);
JavaScript对象
大括号定义的无序的数据集合,由键值对构成。键与值之间用冒号
基本语法
function eat(){
document.write("我要吃饭!");
}
var obj = {
name:"张三", //字符串
age: 18, //数字
ability:eat() //函数
};
document.write(obj.ability); //输入键
document.write(obj.age);
对象属性的操作
Object keys() 获取对象所有属性
delete 删除一个属性
in 检查对象是否包含一个属性
for in 遍历对象所有属性
with 操作多个对象属性
Object Keys() 获取对象所有属性，指的是key 并非 values
var obj = {
name : "小王",
age : 22,
sex : "男"
};
var result = Object.keys(obj);
document.write(result.toString());
delete 从对象中删除一个属性, 键值对全部删除,返回的结果是boolean
var flag = delete obj.age; //删除成功返回true，否则返回false
in 检查对象是否包含一个属性: 语法 key in obj
document.write("name" in obj);
for in 遍历对象的所有属性 语法 for (var pro in obj)
for(var pro in obj){
document.write(obj[pro] + " ");
}
with同时操作一个对象的多个属性（不常用）
with(obj){
name = "小张";
age = 18
};
对象的引用
如果不同的变量名指向同一个对象,那么他们都称为这个对象的引用。也就是说这些变量共同指向同一个内存地址,修改其中一个变量所指向的指,都会影响到其他所有变量所指向的值
Math对象
Math对象属性
Math.E : 常熟e。 //2.718281828459045
Math.LN2: 2的自然对数 //0.6931471805599453
Math.LN10: 10的自然对数 //2.302585092994046
Math.LOG2E 以2为底的e的对数 //1.4426950408889634
Math.LOG10E 以10为底的e的对数 //0.4342944819032518
Math.PI 常数pi //3.141592653589793
Math.SQRT1_2 0.5的平方根 //3.141592653589793
Math.SQRT2 2的平方根 //1.4142135623730951
var result = Math.E;
result = Math.LN2;
result = Math.LN10;
result = Math.LOG2E;
result = Math.LOG10E;
result = Math.PI;
result = Math.SQRT1_2;
result = Math.SQRT2;
document.write(result);
Math对象方法
var result = Math.round(7.7); //四舍五入
result = Math.floor(3.9); //返回小于参数值的最大整数
result = Math.ceil(3.9); //返回大于参数值的最小整数
result = Math.abs(-9); //绝对值
result = Math.max(7,9); //最大值
result = Math.min(7,9); //最小值
result = Math.pow(2,2); //平方
result = Math.sqrt(4); //根号
result = Math.log(10); //返回以e为底的自然对数值
result = Math.exp(3); //返回常熟e的参数次方
document.write(result);
//三角函数方法和数学里面的名字一致,前面有a的为反旋
Math.random()方法, 返回0到1之间的一个伪随机数, 可能等于0,但是一定小于1
//求10到15之间的随机整数
for(var i = 0; i < 30;i++){
var num = Math.floor(Math.random() * 5 + 10);
document.write(num + "<br/>");
}
//求m 到 n之间的随机整数
function getRandon(min,max) {
return Math.floor(Math.random() * (max - min) + min);
}
var result = getRandon(3,8);
document.write(result);
Date对象
var date = Date();
document.write(date); //Fri May 08 2020 10:34:21 GMT+0800 (中国标准时间)
一些其他合法的日期字符串写法
new Date(datestring)
new Date("2017-5-6")
new Date("2017/2/25")
new Date("2013-FEB-15")
new Date("FEB,15,2013")
new Date("FEB 15,2015")
new Date("february,15,2017")
new Date("february 15,2013")
new Date("15,february,2015")
//Sun May 08 2020 10:34:21 GMT+0800 (中国标准时间)