一、变量
1. 我们JavaScript代码写在 script标签里面
2. 我们定义一个变量名字为name,它的值是“张三”
3. 打开开发者工具的控制台,查看打印结果
<!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>零基础学JavaScript(二) ECMAScript</title>
</head>
<body>
</body>
<script>
let name = "张三";
console.log(name);
</script>
</html>
直接下来我们,可以将name的值,修改成18
<script>
let name = "张三";
name = 18;
console.log(name);
</script>
二、数据类型
1. 每种编程语言都会定义数据类型,数据类型存在的目的是装对应的数据。
2. 目前javascript中有5种简单数据类型,1种复杂数据类型
1、看看5种简单数据类型
undefined --- 未定义
null --- null
扫描二维码关注公众号,回复: 16858524 查看本文章Boolean --- 布尔类型
number --- 数字类型
String --- 字符串类型
2. 复杂数据类型Object
Object --- 对象类型
3. 使用typeof操作符,检测数据类型
实践看一下,各种类型的数据,如何定义变量
(一)、number、string类型
<script>
let name = "张三";
console.log(typeof(name));
name = 18;
console.log(typeof(name));
</script>
(二) boolean、undefined、null
<script>
//定义boolean(布尔类型)
let flag = true; //可以等于false
console.log(typeof(flag));
//定义一个undefined类型
let msg;
console.log(typeof(msg));
//定义一个null类型(typeof 无法检测出null的类型)
let people = null;
console.log(typeof(people));
</script>
(三)定义一个object变量
<script>
//定义object类型数据,该对象表达的含义是,定义了一个人,她的名字叫索菲亚,年龄18岁,性别是一个女孩
let people = {
name: "索菲亚",
age: 18,
gander: "female"
};
console.log(typeof(people));
</script>
三、操作符
计算类的操作符: 加、减、乘、除、求余
关系操作符:大于>、小于<、大于等于>=、小于等于<=、相等==
布尔操作符: 逻辑非!、逻辑与&&、逻辑或||
条件运算符:a>b?true:false
1. 计算类的操作符: 加、减、乘、除、求余
<!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>零基础学JavaScript(二) ECMAScript</title>
<style>
body{
background-color: blueviolet;
}
</style>
</head>
<body>
</body>
<script>
//定义两个变量
let a = 8;
let b = 4;
//加法
console.log("计算a+b的结果",a+b);
console.log("number类型+字符串类型的数字,会拼接",a+"11");
console.log("number类型+用Number转化的字符串类型的数字,会执行加法",a+Number("11"));
//减法
console.log("计算a-b的结果",a-b);
//乘法
console.log("计算a*b的结果",a*b);
//除法
console.log("计算a/b的结果",a/b);
//除法
console.log("计算a%b的结果",a%b);
</script>
</html>
2. 关系操作符: 大于>、小于<、大于等于>=、小于等于<=、相等==
<script>
//定义两个变量
let a = 8;
let b = 4;
console.log("a>b ",a>b);
console.log("a<b ",a<b);
console.log("a<=b ",a<=b); //a小于等于b,肯定是假,打印值就为false
console.log("a>=b ",a>=b);
console.log("a==b ",a==b); //a是否等于b,肯定是假
</script>
3. 布尔操作符: 逻辑非!、逻辑与&&、逻辑或||
<script>
/*
逻辑非:符号是!
含义:我们一般是将结果的boolean取非,也就是取相反的值
*/
console.log("逻辑非");
console.log(!false);
console.log(!(2>3));
/*
逻辑与:符号是 &&
含义:需要两个值同时满足true才能得到true的结果
*/
console.log("逻辑与");
console.log("只有当,一个值为true,另一个值也为true,那么结果才能为true ",true&&true);
console.log("一个值为true,一个值为false,那么结果就是false ",true&&false);
/*
逻辑或:符号是 ||
含义:两个值中,只要有一个值为true,那得到结果就为true
*/
console.log("逻辑或");
console.log("两个值中,只要有一个值为true,那得到结果就为true ", true||false);
console.log("只有当,两个值都为false,那得到结果就为false ", false||false);
</script>
4. 条件运算符:a>b?true:false
<script>
let a = 1;
let b = 2;
let result = a>b?"哈哈哈哈":"噢噢噢噢";
console.log("a是否大于b,如果大于就显示问号(?)后面的结果,如果不大于就像是冒号(:)的结果 ",result);
</script>
四、语句:if 、while、for、switch
1. if 条件语句
<script>
let i = 26;
if(i>25){
console.log("进入true条件的代码块");
}else{
console.log("进入false条件的代码块");
}
//简写
if(i>25)console.log("简写,进入true条件的代码块")
//多个条件语句
let result = 55;
if(result>90){
console.log("优秀");
}else if(result>80 && result<=90){
console.log("良好");
}else if(result>=60 && result<=80){
console.log("一般");
}else{
console.log("不及格");
}
</script>
2. while语句
while语句属于前测试循环语句,也就是说。在循环体内的代码被执行之前,就会对出口条件求值。因此,循环体内的代码有可能永远不会被执行。
<script>
let a = 0;
while(a<10){
a= a+1;
}
console.log("a=",a);
</script>
3. for语句
for语句也是一种前测试循环语句,但它具有执行循环之前初始化变量和定义循环后要执行代码的能力,以下是for语句的示例。
<script>
let count = 10;
for(let i=0;i<count;i++){
console.log("普通for循环 打印i值得变化",i);
}
//另一种for in写法
let arr = [1,2,3,4]; //定义了一个数组
for(let i in arr){
console.log("for-in 打印i值得变化",i);
}
</script>
4. switch语句
switch 语句用于基于不同的条件来执行不同的动作。 与if得else if很像,区别是switch性能上更好,不过目前计算机性能已经不是大问题,所以用if还是switch,看具体情况。
<script>
let n = 2;
switch(n)
{
case 1:
console.log("进入1");
break;
case 2:
console.log("进入2");
break;
case 3:
console.log("进入3");
break;
default:
console.log("没有符合条件时,执行默认语句");
}
</script>
这里有个关键字break,它得意义是跳出当前循环。当n=2 命中条件后,直接跳出swith。
五、函数
函数对于任何语句都是核心概念。它可以封装多条语句统一执行,它用 function这个关键字声明
1. 先来感受一下函数
<!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>零基础学JavaScript(二) ECMAScript</title>
</head>
<body>
</body>
<script>
//用function 定了一个叫 people的函数
function people(){
let name = "张三";
let age = 18;
let bodyHeight = 180;
console.log("姓名=",name);
console.log("年龄=",age);
console.log("身高=",bodyHeight);
}
//调用函数
people();
</script>
</html>
2. 理解函数的参数
通常我们使用函数有时候还需要得到一个计算结果,比如加法函数,代码如下
<script>
let result = sum(1,2);
console.log("打印result结果",result);
function sum(sum1,sum2){
return sum1+sum2;
}
</script>
注意三个点
return 代表结束语句,同时将结果返回。
sum1 是形参,代表 1
sum2 是形参,代表 2
3. 加深对参数的理解
ECMAScript函数的参数与大多数其它语言的函数参数有所不同。它不介意传递进来多少个参数,也不在乎创建来参数是什么数据类型。也就是说即便你定义的函数只接受两个参数,但在调用时未必需要传递两个参数。
之所以这样,是因为参数的内部是用数组来表示的。我们可以用arguments来访问参数数组,比如这样
arguments[0] 访问参数数组中第一个元素
arguments[1] 访问参数数组中第二个元素
<script>
let result = sum(1,2);
console.log("打印result结果",result);
function sum(){
console.log(arguments[0],arguments[1]);
return arguments[0]+arguments[1];
}
</script>
六、结束语
初学者要好好将这些案例过一下,最重要的是理解知识的结构,理解知识存在的意义,这样就可以不用记忆和练习全部,而是自己可以通过提问,找出解决方法。
打基础的过程还是有些枯燥,接下是将引用类型数据学习一下,彻底掌握所有数据类型的使用后,就可以真正的开发功能了,再坚持坚持。