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">
console.log('我是内嵌式');
script>
<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">
var myNum1 = 12;
var myNum2 = 13.14;
console.log(myNum1);
console.log(myNum2);
console.log(typeof myNum1);
var myStr1 = 'abc';
var myStr2 = "def";
console.log(myStr1);
console.log(typeof myStr2);
var myBol1 = true;
console.log(myBol1);
console.log(typeof myBol1);
var myVal;
console.log(myVal);
console.log(typeof myVal);
console.log(typeof myVal2);
var myArr1=[1,'2',true,'a'];
console.log(myArr1);
console.log(typeof myArr1);
function myFun(){
console.log('我是函数');
}
console.log(typeof myFun);
</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);
console.log((myNum1 + myNum2).toFixed(1));
var myNum3 = 4;
var myNum4 = ++myNum3;
console.log(myNum4);
var myNum5 = myNum4--;
console.log(myNum5);
console.log(1 == '1');
console.log(1 === '1');
</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">
var myStr1 = '12';
console.log(myStr1);
console.log(parseInt(myStr1));
var myStr2 = '13.14';
console.log(myStr2);
console.log(parseFloat(myStr2));
console.log(parseInt(myStr2));
var myNum1=1;
var myNum2='2';
var myStr3='abc';
console.log(isNaN(myNum1));
console.log(isNaN(myNum2));
console.log(isNaN(myStr3));
console.log(eval('1+3+1+4'));
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 myFun1() {
console.log('这是一个没有参数的函数定义');
}
myFun1();
function myFun2(num1, num2) {
return num1 * num2;
}
console.log(myFun2(3, 4));
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();
var myNum3 = 30; {
var myNum3 = 31;
}
console.log(myNum3);
let myNum4 = 40; {
let myNum4 = 41;
}
console.log(myNum4);
const myNum5 = 50;
console.log(myNum5);
console.log(myNum6);
</script>
</head>
<body>
</body>
</html>
