一、JavaScript介绍 JS
JavaScript 编程语言 流程控制
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与Sun微系统达成协议的结果。Java和JavaScript的关系就像张雨和张雨生的关系，只是名字很像。
Java 服务器端的编程语言
JavaScript 运行在客户端(浏览器)的编程语言
JavaScript是一种运行在客户端 的脚本语言
JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
1、JavaScript现在的意义(应用场景)
JavaScript 发展到现在几乎无所不能。
- 网页特效
- 服务端开发(Node.js)
- 命令行工具(Node.js)
- 桌面程序(Electron)
- App(Cordova) Flutter
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
2、JavaScript和HTML、CSS的区别
- HTML：提供网页的结构，提供网页中的内容
- CSS: 用来美化网页
- JavaScript: 可以用来控制网页内容，给网页增加动态的效果，例如动态创建div,实现页面元素的隐藏。
3、JavaScript的组成
3.1、ECMAScript - JavaScript的核心
定义了JavaScript的语法规范
JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
3.2、BOM - 浏览器对象模型
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
3.3、DOM - 文档对象模型
一套操作页面元素的方法。
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作
3.4、JavaScript的书写位置
-
写在行内
-
写在script标签中
-
注意点
引用外部js文件的script标签中不可以写JavaScript代码
二、变量
1、什么是变量
-
什么是变量
变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
变量用于描述计算机中的数据存储空间 。
房屋是一个存储空间
用来存放特定的东西
内存，全称内存储器。用于存放计算机运行过程中的数据。
计算机为了更好的存储数据，将内存分为不同的内存单元。 -
为什么要使用变量
从内存中取出一个存储单元，存储相应的数据。为了方便存储数据和取数据，需要明确存储单元识别的方式和使用的用途。
识别的方式：起名字 age
使用用途：存放什么内容 18使用变量可以方便的获取或者修改内存中的数据
2、如何使用变量
-
var声明变量
var age;
-
变量的赋值
var age;
age = 18; -
同时声明多个变量
var age, name, sex;
age = 10;
name = ‘zs’; -
同时声明多个变量并赋值
var age = 10, name = ‘zs’;
3、变量在内存中的存储
4、变量的命名规则和规范
- 规则 - 必须遵守的，不遵守会报错
- 由字母、数字、下划线、$符号组成，不能以数字开头
- 不能是关键字和保留字，例如：for、while。
- 区分大小写
- 规范 - 建议遵守的，不遵守不会报错
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。例如：userName、userPassword
下面哪些变量名不合法
a
1
age18
18age
name
$name
_sex
&sex
theworld theWorld
5、交换两个变量中的值(案例)
<script type="text/javascript">
var num1 = 5;
var num2 = 6;
var temp;
temp = num1;
num1 =num2;
num2= temp;
console.log(num1,num2);
</script>
三、数据类型
数据类型分为，“简单数据类型”和“复杂数据类型”，现在我们先学习“简单的数据类型”
简单数据类型
Number、String、Boolean、Undefined、Null
1、Number类型
-
数值字面量：数值的固定值的表示法
110 1024 60.5
浮点数
浮点数精度的问题。浮点数
var n = 5e-324; // 科学计数法 5乘以10的-324次方
浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数
var result = 0.1 + 0.2; // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);
不要判断两个浮点数是否相等
数值判断
- NaN：not a number
- NaN 与任何值都不相等，包括他本身
在控制台中使用 6*‘abc’ 可以输出NaN
- NaN 与任何值都不相等，包括他本身
- isNaN: is not a number
console.log(isNaN(12))
是数字返回为false.
不是数字返回true.
2、String类型
字符串
'abc' "abc"
‘程序猿’，‘程序媛’, “黑马程序猿”
<script type="text/javascript">
var msg = '黑马程序猿';
console.log(msg);
console.log(msg.length);
// var n1 = 5;
// var n2 = 6;
// // 如果+ 两边是number类型的变量，执行的是数学运算的加
// console.log(n1 + n2);
//
//
// var s1 = 'abc';
// var s2 = '123';
// // 如果+ 两边都是string类型，拼接字符串
// console.log(s1 + s2);
//
//
var s1 = 'abc';
var num1 = 123;
// 如果+ 两边 一边是字符串 一边是数值类型，会先把数值类型自动转换为字符串然后再进行字符串的拼接
console.log(s1 + num1);
</script>
2.2.1 字符串长度
length属性用来获取字符串的长度
var str = '黑马程序猿 Hello World';
console.log(str.length);
2.2.2 字符串拼接
字符串拼接使用 + 连接
console.log(11 + 11);
console.log('hello' + ' world');
console.log('100' + '100');
console.log('11' + 11);
console.log('male:' + true);
- 两边只要有一个是字符串，那么+就是字符串拼接功能
- 两边如果都是数字，那么就是算术功能。
3、Boolean类型
- Boolean字面量： true和false，区分大小写
- 计算机内部存储：true为1，false为0
var b = true;
console.log(b);
var c = false;
console.log©;
4、Undefined和Null
-
undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
-
null表示一个空，变量的值如果想为null，必须手动设置
// 变量声明了但是没有赋值，默认的值为undefined
var num;
console.log(num);
// 表示变量中的值为空。
var num1 = null
console.log(num1)
5、获取变量的类型
typeof
var age = 18;
console.log(typeof age); // 'number'
// 获取变量类型
var num2 = 123
console.log(typeof num2);
var name = "zhangsan";
console.log(typeof name);
四、注释
4.1 单行注释
用来描述下面一个或多行代码的作用
// 这是一个变量
var name = 'hm';
4.2 多行注释
用来注释多条代码
/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/
五、操作符
5.1 算术运算符
+ - * / %
<script type="text/javascript">
var x = 5;
var y = 10;
var sum = x + y;
console.log(sum);
console.log(x + y);
console.log(x * y);
console.log(x / y);
console.log(x % y);
</script>
5.2 一元运算符
一元运算符：只有一个操作数的运算符
5 + 6 两个操作数的运算符 二元运算符
++ 自身加1
– 自身减1
前置++
var num1 = 5;
++ num1;
后置++
var num1 = 5;
num1 ++;
思考题：
var a = 1;
var b = ++a + ++a;
console.log(b);
var a = 1;
var b = a++ + a++;
console.log(b);
<script type="text/javascript">
// var num = 1;
// 先让num自身+1 然后再返回表达式的结果
// console.log(++num);
//
// 先返回表达式的结果num 然后再对num自身+1
// console.log(num++);
// console.log(num);
// var a = 1;
// var b = ++a + ++a;
// console.log(b);
//
var a = 1;
// a++ 为1 a为2
// a++ 为2， a 为3
var b = a++ + a++;
console.log(b);
</script>
5.3 逻辑运算符(布尔运算符)
在写程序的时候进行判断，例如年龄大于18，并且性别为‘男’。
&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
! 非 取反
<script type="text/javascript">
//只有两个操作数同时为true 结果才为true
// 并且的关系
var a = true;
var b = false;
console.log(a && b); // false
// 或 || 只有两个操作数同时为false 结果才为false
// var a = true;
// var b = true;
// console.log(a || b);//true.
//
// ! 非 取反 一元运算符
var a = false;
console.log(!a);// true
</script>
5.4 关系运算符(比较运算符)
< > >= <= == != === !==
==与===的区别：==只进行值得比较，===类型和值同时相等，则相等
=赋值
var result = '55' == 55; // true
var result = '55' === 55; // false 值相等，类型不相等，都使用三个等号。
var result = 55 === 55; // true
<script>
// 关系运算符
// < > >= <=
//
// var a = 10;
// var b = 5;
// console.log(a > b);
// console.log(a < b);
// == !=
// console.log(a == b);
// console.log(a != b);
// === 相等判断 !== 不等
var a = 10;
var b = "10";
// == 判断的是变量的值是否相等
console.log(a == b);
// === 判断值和类型都一致才返回true
console.log(a === b);
</script>
5.5 赋值运算符
= += -= *= /= %=
例如：
var num = 0;
num += 5; //相当于 num = num + 5;
<script>
var num = 5;
var num1 = num * 5;
// 25
//num1 = num1 + 5;
// 30
//
// 简化
num1 += 5; // num1 = num1 + 5;
console.log(num1);
num1 -= 5; // num1 = num1 - 5;
console.log(num1);
// *=
// num1 *= 5; // num1 = num1 * 5;
// num1 /= 5 num1 %= 5;
num1 %= 5;
console.log(num1);
</script>
六、流程控制
程序的三种基本结构
顺序结构
从上到下执行的代码就是顺序结构
程序默认就是由上到下顺序执行的
分支结构
根据不同的情况，执行对应代码
循环结构
循环结构：重复做一件事情
6.1 分支结构
if语句
语法结构
if (/* 条件表达式 */) {
// 执行语句
}
if (/* 条件表达式 */){
// 成立执行语句
} else {
// 否则执行语句
}
if (/* 条件1 */){
// 成立执行语句
} else if (/* 条件2 */){
// 成立执行语句
} else if (/* 条件3 */){
// 成立执行语句
} else {
// 最后默认执行语句
}
案例：1、求两个数的最大数
2、判断一个数是偶数还是奇数(第一个作业
3、分数转换，把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A
<script type="text/javascript">
// 求两个数的最大数
// var num1 = 5;
// var num2 = 6;
// if (num1 > num2) {
// console.log(num1);
// } else {
// console.log(num2);
// }
//
// 分数转换，把百分制转换成ABCDE <60 E 60-70 D 70-80 C 80-90 B 90 - 100 A
var score = 58;
if (score >= 90) {
console.log('A');
} else if (score >= 80) {
console.log('B');
} else if (score >= 70) {
console.log('C');
} else if (score >= 60) {
console.log('D');
} else {
console.log('E');
}
</script>
6.2 循环结构
for循环语法：
// for循环的表达式之间用的是;号分隔的，千万不要写成,
for (初始化表达式1; 判断表达式2; 自增表达式3) {
// 循环体4
}
执行顺序：1243 ---- 243 -----243(直到循环条件变成false)
-
初始化表达式
-
判断表达式
-
自增表达式
-
、循环体
案例：
打印1-100之间所有数
求1-100之间所有数的和
求1-100之间所有数的平均值
在控制台打印正方形
在控制台上打印三角形<script type="text/javascript"> // for 实现打印1-100之间所有的数字 // for (var i = 1; i <= 100; i++) { // console.log(i); // } // // // // 打印1-100之间所有数 // 求1-100之间所有数的和 // var sum = 0; // for (var i = 1; i <= 100; i++) { // // sum = sum + i; // sum += i; // } // console.log(sum); // // // 求1-100之间所有偶数的和 // // var sum = 0; // for (var i = 1; i <= 100; i++) { // // 找到偶数 // if (i % 2 === 0) { // sum += i; // } // } // console.log(sum); </script>（第三个作业）
获取数组元素
数组的取值
// 格式：数组名[下标] 下标又称索引
// 功能：获取数组对应下标的那个值，如果下标不存在，则返回undefined。
var arr = ['red',, 'green', 'blue'];
arr[0]; // red
arr[2]; // blue
arr[3]; // 这个数组的最大下标为2,因此返回undefined
遍历数组
遍历：遍及所有，对数组的每一个元素都访问一次就叫遍历。
数组遍历的基本语法：
for(var i = 0; i < arr.length; i++) {
// 数组遍历的固定结构
}
数组中新增元素
数组的赋值
// 格式：数组名[下标/索引] = 值;
// 如果下标有对应的值，会把原来的值覆盖，如果下标不存在，会给数组新增一个元素。
var arr = ["red", "green", "blue"];
// 把red替换成了yellow
arr[0] = "yellow";
// 给数组新增加了一个pink的值
arr[3] = "pink";
案例
求一组数中的所有数的和和平均值
// 求一组数中的所有数的和和平均值
var numbers = [35, 12, 35, 90, 11, 12];
var sum = 0;
var avg = 0;
for (var i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log(sum);
avg = sum / numbers.length;
console.log(avg);
扫一扫
176
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
