简介
1.目标
了解js的概念和特点
2.路径
1、什么是js
2、js的作用
3、js的组成
3.讲解
3.1. 什么是JS
JS，全称JavaScript，是⼀种直译式脚本语⾔，是⼀种动态类型、弱类型、基于对象的脚本语⾔，内置⽀持类型。
JS语⾔和Java语⾔对⽐：
| 对比 | java | js |
| 运行环境 | JVM虚拟机 | JS引擎，是浏览器的 ⼀部分 |
| 是否跨平台运行 | 跨平台 | 跨平台 |
| 语言类型 | 强类型语言 | 弱类型，动态类型语言 |
| 是否需要编译 | 需要编译，是编译型语言 | 不需要编译，是解释型语言 |
| 是否区分大小写 | 区分大小写 | 区分大小写 |
3.2 JS的作⽤
具体来说，有两部分作⽤：
JS代码可以操作浏览器(BOM)：进⾏⽹址跳转、历史记录切换、浏览器弹窗等等
JS代码可以操作⽹⻚(DOM)：操作HTML的标签、标签的属
性、样式、⽂本等等
注意：JS的是在浏览器内存中运⾏时操作，并不会修改⽹⻚源码，所以刷新⻚⾯后⽹⻚会还原
3.3 JS的组成
ECMAScript(核⼼)：是JS的基本语法规范
BOM：Browser Object Model，浏览器对象模型，提供了与浏览器进⾏交互的⽅法
DOM：Document Object Model，⽂档对象模型，提供了操作⽹⻚的⽅法
4. ⼩结
1. JS的概念:JS是⼀⻔运⾏在浏览器的，解释型的、基于对象的脚本语⾔
2. JS的作⽤:处理⽤户和前端⻚⾯的交互
1. 操作浏览器
2. 操作HTML⻚⾯的标签、属性、⽂本、样式等等
3. JS的组成部分:
1. ECMAScript:基本语法
2. BOM:浏览器对象模型，操作浏览器的代码
3. DOM:⽂档对象模型，操作HTML⽂档的⽅法
引入
1.目标
能够在HTML里引入js
2.分析
1、内部js(内嵌式)
2、外部js(外联部)
3.讲解
3.1. 内部JS
3.1.1语法
在html里增加<script>标签，把js代码写在标签体里
<script>
//在这里写js代码
<script>3.1.2示例
创建html页面，编写js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js引⼊⽅式-内部js</title>
<script>
//操作浏览器弹窗
alert("hello, world");
</script>
</head>
<body>
</body>
</html>
打开页面，浏览器会弹窗
3.2. 外部JS
3.2.1语法
把js代码写在单独的js⽂件中，js⽂件后缀名是.js
在HTML⾥使⽤<script>标签引⼊外部js⽂件
<script src="js文件的路径"> </script>
3.2.2示例
创建⼀个my.js⽂件，编写js代码
第1步：创建js⽂件
第2步：设置js⽂件名称
第3步：编写js代码
alert("hello, world! 来⾃my.js");
创建⼀个html，引⼊my.js⽂件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js引⼊⽅式-外部js</title>
<!--引⼊外部的my.js⽂件-->
<script src="../js/my.js"></script>
</head>
<body>
</body>
</html>打开页面，浏览器会弹窗
4.⼩结
4.1语法
1. 内部脚本
<script>
//js代码
</script>
2. 外部脚本
定义⼀个js⽂件
通过script标签引⼊
<script src="js⽂件路径">
</script>4.2注意事项
⼀个script标签，不能既引⼊外部js⽂件，⼜在标签体内
写js代码。
错误演示
<script src="../js/my.js">
alert("hello");
</script>正确演示
<script src="../js/my.js"></script>
<script>
alert("hello");
</script>JS小功能和JS调试
1. ⽬标
能够使⽤浏览器的F12调试js
2.路径
1. ⼩功能
2. 调试
3.讲解
3.1⼩功能
alert(): 弹出警示框
console.log(): 向控制台打印⽇志
document.write(); ⽂档打印. 向⻚⾯输出内容.
3.2.调试
1. 按F12打开开发者⼯具
2. 找到Source窗⼝，在左边找到⻚⾯，如下图
打断点之后，当代码执⾏到断点时，会暂时执⾏
在窗⼝右侧可以查看表达式的值、单步调试、放⾏等等
3. 如果代码执⾏中出现异常信息，会在控制台Console窗⼝显示出来
4. 点击可以定位到异常位置
4.⼩结
1. 弹出警告框
alert();
2. 控制台输出
console.log();
3. 向⻚⾯输出(⽀持标签的)
document.write();JS基本语法
1.⽬标
掌握JS基本语法
2.路径
1. 变量
2. 数据类型
3. 运算符
4. 语句
3.讲解
更改idea中的js语⾔的版本
3.1变量
JavaScript 是⼀种弱类型语⾔，javascript的变量类型由它
的值来决定。 定义变量需要⽤关键字 'var'或者let
int i = 10; var i = 10; 或者 i =
10;
String a = "哈哈"; let str = "哈哈"; 或者 str
= "哈哈"; 或者 str = "哈哈"
...
注意:
1.var或者可以省略不写,建议保留
2.最后⼀个分号可以省略,建议保留
3.同时定义多个变量可以⽤","隔开，公⽤⼀个‘var’关键
字. var c = 45,d='qwe',f='68'; 3.2数据类型
1.五种原始数据类型
数据类型 | 描述 示例 | 示例 |
| number | 数值类型 | 1 , 2 , 3 , 3.14 |
| boolean | 布尔类型 | true , false |
| string | 字符串类型 | "hello" , 'hello' |
| objectnew | 对象类型 | Date() , null |
| undefined | 未定义类型 | var a; |
2.typeof操作符
作⽤： ⽤来判断变量是什么类型
写法：typeof(变量名) 或 typeof 变量名
null与undefined的区别：
null: 对象类型，已经知道了数据类型，但对象为空。
undefined：未定义的类型，并不知道是什么数据类型。
3.⼩练习
定义不同的变量,输出类型
整数：number
浮点 :number
布尔：boolean
字符：string
字符串：string
日期：object
未定义的类型：undefined
null:object
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript">
var i = 5; //整数
var f = 3.14; //浮点
var b = true; //布尔
var c = 'a'; //字符串
var str = "abc"; //字符串
var d = new Date(); //⽇期
var u; //未定义类型
var n = null; //空
document.write("整数：" + typeof(i) + "<br/>");
document.write("浮点 ："+typeof(f) + "<br/>");
document.write("布尔：" + typeof(b) + "<br/>");
document.write("字符：" + typeof(c) + "<br/>");
document.write("字符串：" + typeof(str) + "<br/>");
document.write("⽇期：" + typeof(d) + "<br/>");
document.write("未定义的类型：" + typeof(u) +"<br/>");
document.write("null：" + typeof(n) + "<br/>");
</script>
</body>
</html> 字符串转换成数字类型
全局函数(⽅法)，就是可以在JS中任何的地⽅直接使⽤的函
数，不⽤导⼊对象。不属于任何⼀个对象
3.3运算符
关系运算符:> >= < <=
number类型和字符串做-,*,/的时候,字符串⾃动的进⾏类
型转换,前提字符串⾥⾯的数值要满⾜number类型
var i = 3;
var j = "6";
alert(j-i);//结果是3, "6" ==> 6
alert(j*i);//结果是18,
alert(j/i);//结果是2,
除法,保留⼩数
var i = 2;
var j = 5;
alert(j/i);
==⽐较数值, === ⽐较数值和类型
var i = 2;
var j = "2";
alert(i==j); // ==⽐较的仅仅是数值, true
alert(i===j); // ===⽐较的是数值和类型.false
3.4语句
for循环
<script>
//将数据装到表格中
document.write("<table border='1'
cellspacing='0' width='900px'>")
for(let j=1;j<=9;j++){
//⼀⾏
document.write("<tr>")
for(let i=1;i<=j;i++){
//⼀个单元格
document.write("<td>")
//每⼀个乘法表达式就是td中的内容
document.write(j+"x"+i+"="+(j*i))
document.write("</td>")
}
document.write("</tr>")
}
document.write("</table>")
</script>
if... else
var a = 6;
if(a==1)
{
alert('语⽂');
}
else if(a==2)
{
alert('数学');
}
else
{
alert('不补习');
}switch
<script>
var str = "java";
switch (str){
case "java":
alert("java");
break;
case "C++":
alert("C++");
break;
case "Android":
alert("Android");
break;
}
</script>
4.⼩结
1. 变量通过 var 定义
2. 数据类型
number
boolean
string
object
undefined
3. 运算符
字符串可以和number类型进⾏-,*,/运算的
除法保留⼩数
== ⽐较的是值, ===⽐较的是值和类型
4. 语句: 基本和java⼀样
函数
1. ⽬标
掌握js函数的定义和调⽤
2.路径
1. 什么是函数
2. 普通函数
3. 匿名函数
3.讲解
3.1. 什么是函数
函数： 是被设计为执⾏特定任务的代码块 ，在被调⽤时会执⾏
函数类似于Java⾥的⽅法，⽤于封装⼀些可重复使⽤的代码块
3.2. 普通(有名)函数
3.2.1语法
定义普通函数
function 函数名(形参列表){
函数体
[return 返回值;]
}
调⽤普通函数
var result = 函数名(实参列表);
3.2.2示例
计算两个数字之和
<script>
//js的函数的作⽤:为了封装代码，在要使⽤这些代码的地
⽅直接调⽤函数
//js的函数的声明⽅式:1. 普通函数(命名函数) 2.匿
名函数
//普通函数: function 函数名(参数名,参数名...){函
数体}，函数没有返回值类型，没有参数类型
function total(a,b,c) {
console.log("arguments数组中的数
据:"+arguments.length)
console.log(a+","+b+","+c)
return a+b+c
}
//调⽤函数
//var num = total(1,2,3);
//console.log(num)
//js的函数还有俩特点:1. 函数声明时候的参数个数和函
数调⽤时候传⼊的参数个数，可以不⼀致;因为函数内部有⼀个
arguments数组，⽤于存放传⼊的参数
//2. js的函数是没有重载的，同名函数后⾯的会覆盖前
⾯的
function total(a,b) {
return a+b
}
var num = total(1,2,3);
console.log(num)
</script>
3.3匿名函数
匿名函数，也叫回调函数，类似于Java⾥的函数式接⼝⾥的⽅法
function(形参列表){
函数体
[return 返回值;]
}4.⼩结
1. 语法
普通(有名)函数
function 函数名(参数列表){
函数体
[return ...]
}
匿名函数
function(参数列表){
函数体
[return ...]
}
2. 特点
参数列表⾥⾯直接写参数的变量名, 不写var
函数没有重载的, 后⾯的直接把前⾯的覆盖了
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
