测开之Javascript・《Javascript基础》
Posted 七月的小尾巴
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了测开之Javascript・《Javascript基础》相关的知识，希望对你有一定的参考价值。
介绍和基本使用
Javascript概述
要了解JavaScript，我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年，当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在静态html页面上添加一些动态效果，于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错，这个们只是用了10天时间。为什么起名叫JavaScript?原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像Java，其他部分基本上没啥关系。
嵌入页面的方式
HTML中的脚本必须位于 <script></script> 标签之间，脚本 可被放在HTML <body>页面和 <head> 部分。
- 行间时间（主要用于事件）
<input type="button" name="11" οnclick=alert("ok~");>
- 页面 spript 标签嵌入
<script type="text/javascript">
// 弹窗
alert('ok!');
</script>
- 外部引入
<script type="text/javascript" src="login.js"></script>
基本用法
注释
我们可以添加注释来对我们编写的javascript代码进行解释，或者提高代码的可读性。在javascript中，注释通常是使用 //开头，如果是多行注释的话，则使用 /* 开头， */ 结尾。
下面我们来实际演示一下：
<script type="text/javascript">
// 这是注释内容
console.log("这里是单行注释")
/*
这里是多行注释
*/
console.log("这里是多行注释")
</script>
变量
首先，我们来看一下，在javascript中的变量命名规范：
变量的命名
- 变量可以使用短名称（比如a，b，x，y），也可以使用描述性更好的名称，比如（name、age)
- 变量必须以字母开头
- 变量也可以使用
$和_符号开头（不过在javascript中不推荐这么定义变量） - 变量名区分大小写
- 使用小驼峰命名
变量声明
在javascript中变量可以先声明后赋值。
var name;
name = '小余';
也可以在声明的时候赋值
var name = '小余';
同时给多个变量赋值
var a = 100, b = 200, c = 300;
定义变量的三种方式
- var：定义的变量可以跨代码块访问
- let：定义块级作用域的变量
- const:定义常初始化必须赋值，值不可以改变，只能在块级作用域访问
数据类型
javascript中的数据类型和python类型，主要有分为字符串、数字、布尔、Null、Undefined、数组类型，下面我们来演示一下分别定义不同的数据类型：
string 字符串类型
var st = 'test';
number 数字类型
var a = 100;
boolean 布尔类型
布尔类型，只有true和false，这里和python不同的是，true和false首字母是小写的
undefined 类型
通常变量已声明，但是未赋值，他的值就是undefined
var unde
null类型
表示空对象，类型于python的None
var tr = null
arry 数组
数组类似于python中的列表，可以通过下标取值
<script type="text/javascript">
// 创建一个数组
var skill = Array("test1", "test2", "test3");
// 打印数组中第一个数据
console.log(skill[0]);
// 打印数组的长度
console.log(skill.length);
// 从数组中删除最后一个元素
console.log(skill.pop());
// 在数组尾部添加一个新的元素
console.log(skill.push("test4"));
</script>
运算符
- 算数运算符：
+（加）、-（减）、*（乘）、/（除）、%（余） - 赋值运算符：
=、+=、-=、*=、/=、++ - 比较运算符：
==、===、>、<、<=、!=
基本上这些运算符都和python比较类似，这里主要讲一下===，在Python中，只有==的概念，但是在javascript中，如果是==则会校验数据的值是否相等，不会校验你的数据类型，如果使用的是===，则会判断数据类型和数据值。 - 逻辑预算符:
&&（与）、||(或）、!(否）
条件语句
if条件
<script type="text/javascript">
var a = 199;
// 判断a 大于 200
if(a>200){
console.log("a 大于 200");
}
</script>
else语句
<script type="text/javascript">
var a = 199;
// 判断a 大于 200
if(a>200){
console.log("a 大于 200");
}
// 否则提示
else{
console.log(a);
}
</script>
else if语句
<script type="text/javascript">
var a = 199;
if(a>200){
console.log("a 大于 200");
}
else if(a>100){
console.log("a 大于100");
}
else{
console.log(a)
}
</script>
函数
定义一个简单的函数
<script type="text/javascript">
// 函数的定义, 使用 function
function test(){
console.log("这里是一个简单的函数")
}
// 函数的调用
test()
</script>
函数带参数
<script type="text/javascript">
// 函数的定义, 使用 function
function test(var1, var2){
console.log(var1 + var2)
}
// 函数的调用
test(100, 200)
</script>
函数返回值
<script type="text/javascript">
function test(var1, var2){
// 使用 return 来返回值，在使用 return时，函数会停止运行，并返回指定值
return var1 + var2
}
// 定义一个变量接受函数返回值
const res = test(100, 200)
console.log(res)
</script>
对象
创建对象
在javascript中，以下两种方式均可创建对象
<script type="text/javascript">
// 方式一
test = new object();
// 方式二
var test = {};
</script>
对象属性
<script type="text/javascript">
// javascript中创建对象类似于python的字典, 以键值对的形式存储
var test = {"name": 'test', "age": 18};
// 创建对象属性声明也可以横跨多行，注意这里键的名称没有引号
var test1 = {
name: 'python',
age : 18
}
</script>
对象方法
对象方法是作为属性来存储的函数。
<script type="text/javascript">
// 创建对象属性声明也可以横跨多行
var test1 = {
name: 'python',
age : 18,
// 在对象中作为属性存储函数
fun: function (var1, var2){
alert(var1);
alert(var2 * var1);
}
}
test1.fun(111, 222)
</script>
循环
while循环
while（条件一句）{
循环体
}
下面是一个关于while循环的案例
<script type="text/javascript">
var a = 0
while (a<=5){
alert(a);
a ++
}
</script>
for循环
for（语句1， 语句2， 语句3）{
循环体代码
}
语句1: 在循环开始之前执行
语句2:循环条件（成立则执行循环体）
语句3: 每一轮循环之后执行的一句
<script type="text/javascript">
var aList = Array(11, 22, 33)
for (var a = 0; a < aList.length; a ++){
alert(aList[a])
}
</script>
for in 循环
for （x in arrays）{
循环体代码
}
遍历数组，x为数组的下标
编辑对象，x为对象的属性
下面是遍历数组中的数据
<script type="text/javascript">
var aList = Array(11, 22, 33)
for (x in aList){
// 遍历数组中的数据
alert((aList[x]));
}
</script>
下面是遍历对象的数据
<script type="text/javascript">
var objC = {"name": "test", "age": 10};
// 遍历对象
for (x in objC) {
alert(x);
alert(objC[x])
}
</script>
扩展
数组遍历
- forEach 方法：遍历列表，接受一个处理的回调函数
<script type="text/javascript">
var arr = [11, 22, 33]
arr.forEach(function (item, index, array){
/*
item: 循环遍历数组中的值,如11
index: 获取当前数组的索引
array: 获取当前数组
*/
console.log(item, index, array)
})
</script>
- filter方法：对数组进行过滤
<script type="text/javascript">
var arr = [11, 22, 33]
var res = arr.filter(function (item, index){
// 过滤当前数组中大于30的数据
return item > 30
})
console.log(res);
</script>
- find：遍历数组，返回符合条件的第一个元素
<script type="text/javascript">
var arr = [11, 22, 33]
var res = arr.find(function (item, index){
// 过滤当前数组中大于11的第一个数据
return item > 11
})
console.log(res);
</script>
- findindex：遍历数组，返回符合条件的索引
<script type="text/javascript">
var arr = [11, 22, 33]
var res = arr.findIndex(function (item, index){
// 过滤当前数组中大于11的数据的所以
return item > 11
})
console.log(res);
</script>
以上是关于测开之Javascript・《Javascript基础》的主要内容，如果未能解决你的问题，请参考以下文章