JavaScript复习之JS简介,JS使用方式,基础语法
(1)核心内容：
JS简介
JS使用方式
基础语法
BOM
DOM
事件
(2)学习文档地址：
https://www.w3school.com.cn/js/index.asp
1 JavaScript简介
(1)HTML->网页基本结构 CSS->美化网页 JS->交互行为
(2)JS->世界上最流行的编程语言
(3)JS运行在客户端的脚本语言->不需要编译，运行过程由JS解释器逐行解释执行
(4)JS做前端编程也可做后端编程
(5)JS：
表单动态校验
网页特效
服务端开发
...
(6)浏览器：
渲染引擎 JS引擎|JS解释器
2 JavaScript组成
(1)JS基础语法->ECMAScript
(2)BOM->浏览器对象模型，操作浏览器窗口
(3)DOM->文档对象模型，可以对页面上的各种元素操作
3 JavaScript使用方式
3.1 基础介绍
(1)行内式：
直接写到元素内部
(2)内嵌式：
在HTML文件中加入一个script标签
(3)外部式：
单独设置js文件
HTML文件和JS文件关联->script标签
3.2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
内嵌式：
在HTML文件中加入一个script标签
调试代码时使用
*/
console.log('我是内嵌式');
</script>
<!--
外部式：
单独设置js文件
HTML文件和JS文件关联->script标签
后期开发时使用
-->
<!-- 引入js文件 -->
<script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
行内式：
直接写到元素内部
不建议使用
了解
-->
<input type="button" value="按钮" onclick="console.log('我是行内式')" />
</body>
</html>
4 基础语法
4.1 变量
4.1.1 变量声明
(1)以字母、下划线、$开始
(2)严格区分大小写
(3)不能使用关键字
(4)见名知意 myXX
弱类型
变量声明时使用var，无需指定类型，赋值时根据值类型决定变量的类型
var myName='tom'
let、const
4.1.2 变量类型
(1)数字类型：number，整数|浮点数
(2)字符串类型：string，单引号|双引号均可
(3)布尔类型：boolean，true|false
(4)未定义或未初始化：undefined
(5)复合类型：object，即对象、数组、null类型
(6)function：函数方法
4.1.3 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 嵌入式
/*
变量声明：
(1)以字母、下划线、$开始
(2)严格区分大小写
(3)不能使用关键字
(4)见名知意 myXX
弱类型
变量声明时使用var，无需指定类型，赋值时根据值类型决定变量的类型
var myName='tom'
let、const
*/
/**
* 变量类型：
* 数字类型：
* number
* 字符串类型：
* string，单双引号均可
* 布尔类型：
* boolean
* 未定义类型：
* undefined
* 复合类型：
* object
* 函数类型：
* function
*
*/
/* 数字类型 */
var myNum1 = 12;
var myNum2 = 13.14;
console.log(myNum1);
console.log(myNum2);
console.log(typeof myNum1); //number
/* 字符串类型 特殊场景->单双引号嵌套使用 */
var myStr1 = 'abc';
var myStr2 = "def";
console.log(myStr1);
console.log(typeof myStr2); //string
/* 布尔类型 */
var myBol1 = true;
console.log(myBol1);
console.log(typeof myBol1); //boolean
/* 未定义类型 */
var myVal;
console.log(myVal); //undefined
console.log(typeof myVal); //undefined
// 报错： myVal2 is not defined
// console.log(myVal2);
console.log(typeof myVal2); //undefined
/* 复合类型 */
var myArr1=[1,'2',true,'a'];
// (4) [1, '2', true, 'a']
console.log(myArr1);
console.log(typeof myArr1);//object
/* 函数类型 */
function myFun(){
console.log('我是函数');
}
console.log(typeof myFun);//function
// 匿名函数
/* function (){
console.log();
} */
</script>
</head>
<body>
</body>
</html>
4.2 运算符
4.2.1 基础介绍
(1)算数运算符：+ - * / % ++ --
(2)赋值运算符：= += -= *= /= %=
(3)比较运算符：> < >= <= == != ===
(4)逻辑运算符：&& || !
4.2.2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
运算符：
算数运算符：+ - * / % ++ --
赋值运算符：= += -= *= /= %=
比较运算符：> >= < <= == != ===
逻辑运算符：&& || ！
*/
var myNum1 = 0.1;
var myNum2 = 0.2;
console.log(myNum1 + myNum2); //0.30000000000000004
// toFixed()：保留指定位数
console.log((myNum1 + myNum2).toFixed(1)); //0.3
var myNum3 = 4;
var myNum4 = ++myNum3;
console.log(myNum4); //5
var myNum5 = myNum4--;
console.log(myNum5); //5
/* a+=b a=a+b */
/*
==：
只比较值
包含内置转换
===：
比较值和类型 恒等
*/
console.log(1 == '1'); //T
console.log(1 === '1'); //F
/*
&&：见false则false
|| ：见true则true
！：相反
*/
</script>
</head>
<body>
</body>
</html>
4.3 条件语句
(1)if...else...
(2)switch...case...
4.4 循环语句
(1)for循环
(2)for in循环
(3)while循环
(4)do-while循环
4.5 函数
4.5.1 系统函数
4.5.1.1 基础介绍
(1)parseInt()：将字符串转换成整数
(2)parseFloat()：将字符串转换成浮点数
(3)isNaN()：判断能否被转成一个数字，能转成数字返回为false，反之返回为true
(4)eval()：将可运行的字符串转换运行，eval(string)
4.5.1.2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/*
函数：
系统函数
parseInt()：将字符串转换为整数 ****
parseFloat()：将字符串转换为浮点数 ****
toString()：将数字类型值转换为字符串类型
isNaN()：判断能否转成数字，boolean类型
eval()：将可运行的字符串运行
*/
var myStr1 = '12';
console.log(myStr1); //string
// parseInt()：将字符串转换为整数
console.log(parseInt(myStr1)); //number
var myStr2 = '13.14';
console.log(myStr2); //string
// parseFloat()：将字符串转换为浮点数
console.log(parseFloat(myStr2)); //number
console.log(parseInt(myStr2)); //number 13
// isNaN：is Not a Number
// 判断该值是否是数字[转换效果]，是数字返回false，反之返回true
var myNum1=1;
var myNum2='2';
var myStr3='abc';
console.log(isNaN(myNum1));//F
console.log(isNaN(myNum2));//F
console.log(isNaN(myStr3));//T
// eval()：字符串内容运行
console.log(eval('1+3+1+4'));//9
// 将数字转换为字符串类型
console.log(myNum1.toString());
</script>
</head>
<body>
</body>
</html>
4.5.2 自定义函数
4.5.2.1 基础介绍
(1)函数定义：
function 函数名(参数列表){
// 函数体
// 需要返回值时，使用return
}
(2)函数调用：
函数名(参数列表);
4.5.2.2 案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/myjs.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/*
自定义函数：
函数定义：
function 函数名(参数列表){
// 函数体
// 需要返回值时，使用return
}
函数调用：
函数名(参数列表);
*/
/* 无参数函数 */
function myFun1() {
// 函数作用
console.log('这是一个没有参数的函数定义');
}
myFun1();
/* 有参数函数 */
function myFun2(num1, num2) {
return num1 * num2;
}
console.log(myFun2(3, 4));
/* 匿名函数 */
/* function (){
} */
/*
变量的声明：
var
全局作用域 函数作用域
let
块作用域
const
常量
*/
// 全局变量 ->全局作用域->某个变量需要在多个函数内被使用等
var myNum = 10;
if (myNum > 3) {
console.log('大于3');
}
for (var i = 0; i < 4; i++) {
console.log(myNum);
}
// 函数
function myFun4() {
// 函数内变量->函数作用域
var myNum2 = 20;
console.log(myNum2);
console.log(myNum);
}
myFun4();
// 报错：myNum2 is not defined
// console.log(myNum2);
// 使用var关键字，在块中重新声明变量时也会将重新声明块外的变量
var myNum3 = 30; {
var myNum3 = 31;
}
console.log(myNum3); //31
//使用let关键字，在块中重新声明变量时不会重新声明块外的变量
let myNum4 = 40; {
let myNum4 = 41;
}
console.log(myNum4); //40
// const：常量
const myNum5 = 50;
console.log(myNum5);
// 报错：Assignment to constant variable.
// myNum5 = 52;
// 访问myjs.js文件中的变量
console.log(myNum6);
</script>
</head>
<body>
</body>
</html>
