目录
一，介绍JavaScript
二，JavaScript的特点
1，脚本语言
2，基于对象的语言
3，事件驱动
4，简单性
5，安全性
6，跨平台性
7，JS 和java的区别
（1）公司不同，前身不同
（2）基于对象和面向对象
（3）变量类型强弱不同
（4）运行的位置不同
8，HTML和CSS和JS这之间的关系
三，JavaScript的引入
1，内嵌式引入
缺点：
2，链接式引入
优点：
四，JavaScript的基础语句/关键词
1，输出语句
（1）弹窗输出
（2）新的页面输出
2，输入语句
（1）标签
（2）输入弹框
3，注释
（1）单行注释 //
（2）多行注释 /**+enter ( Ctrl + Shift + / )
五，JavaScript 的数据类型
1，变量
（1）成员变量 var
（2）局部变量 let
（3）常量 const
2，基本数据类型
（1）number
（2）String
（3）boolean
（4）null
（5）undefiend
3，复合数据类型
（1）对象 Object
（2）数组 Array
4，类型转换
（1） number()
（2）parseInt()
（3）parseFloat()
六，JavaScript 的运算符
1，关于 / 和 %
2，关于+
3，关于== 等值符
4，关于=== 等同符
七，流程控制结构
八，函数的使用
1，什么是JS的函数
2，函数定义的三种语法 【定义方法】
（1）声明式
（2）赋值式
（3）创建函数对象式
（4）注意：
3，函数参数和返回值
一，介绍JavaScript
- JavaScript 是一个前端页面的脚本语言。
- JavaScript 是一款基于对象和事件驱动的语言
- JavaScript 是阻断式 解释执行的语言
- JavaScript 是一款弱类型语言 （声明变量的时候没有变量类型，赋值后就有了）
- JavaScript 是一款动态语言
- JavaScript 小，轻量级。
- JavaScript 可以运行在浏览器上，可以在浏览器上做逻辑处理。
- JavaScript 初衷：在页面前端做数据校验；用户交互。
- JavaScript == ECMAScript +BOM 浏览器对象模型 +DOM 文档对象模型
- ECMAScript---ECMAScript描述了语法、类型、语句、关键字、保留字、运算符是一种由欧洲计算机制造商协会（ECMA）通过ECMA-262标准化的脚本程序语言和对象。它就是定义了脚本语言的所有属性、方法和对象。【语法规则，定接口了】
- BOM---是浏览器的一种特性，它可以对浏览器窗口进行访问和操作，例如移动、关闭窗口，调整窗口的大小，支持cookie等。BOM编程可以实现动态控制浏览器本身行为的效果
- DOM---把整个页面规划成由节点层构成的文档，它不与浏览器、平台、语言相关，为web开发者提供一个标准可以访问站点中的数据、脚本和表现层对象.DOM编程可以实现网页内容校验和动态变化的效果
也有人这么说:
ECMAScript可以理解为JS的基础语法部分
DOM可以简单理解为,使用document对象操作文档内容的编程
BOM可以理解为,使用window对象操作浏览器行为的编程
二，JavaScript的特点
JS是运行在浏览器上的一种脚本语言
1，脚本语言
- 脚本语言是一种简单的程序，规模小,不需要编译,运行快,是由一些ASCII字符构成，可以使用任何一种文本编辑器编写
- 脚本语言是指在web浏览器内有解释器解释执行的编程语言，每次运行程序的时候，解释器会把程序代码翻译成可执行的格式。
- 一些程序语言（如C、C++、Java等）都必须经过编译，将源代码编译成二进制的可执行文件之后才能运行，而脚本语言不需要事先编译，只要有一个与其相适应的解释器就可以执行。
2，基于对象的语言
- 面向对象有三大特点（封装，继承，多态）缺一不可。通常"基于对象"是使用对象，但是无法利用现有的对象模板产生新的对象类型，也就是说"基于对象"没有继承的特点。没有了继承的概念也就无从谈论"多态
3，事件驱动
- 在网页中执行了某种操作的动作，被称为"事件"(Event)，比如按下鼠标、移动窗口、选择菜单等都可以视为事件。
- 当事件发生后，可能会引起相应的事件响应。
4，简单性
- 变量类型是采用弱类型，并未使用严格的数据类型。
5，安全性
- JavaScript不能访问本地的硬盘，不能将数据存入到服务器上，不能对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
6，跨平台性
- JavaScript依赖于浏览器本身，与操作平台无关， 只要计算机安装了支持JavaScript的浏览器（装有JavaScript解释器），JavaScript程序就可以正确执行。
- 缺点：各种浏览器支持JavaScript的程度是不一样的，支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时，效果会有一定的差距，有时甚至会显示不出来。
7，JS 和java的区别
（1）公司不同，前身不同
- JavaScript是Netscape公司的产品，是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言，
- 它的前身是Live Script；
- Java是SUN公司推出的新一代面向对象的程序设计语言，特别适合于Internet应用程序开发；
- Java的前身是Oak语言。
（2）基于对象和面向对象
- JavaScript是脚本语言，是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用，但不支持继承和多态。
- Java是面向对象的，是一种真正的面向对象的语言，支持封装、继承和多态。
（3）变量类型强弱不同
- Java采用强类型变量检查，即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;
- JavaScript中是弱类型变量。统一采用var声明，可赋各种数据类型值。
（4）运行的位置不同
- Java运行与服务器端的,大型编程语言,
- JS运行于客户端(浏览器)一种小规模脚本语言
8，HTML和CSS和JS这之间的关系
- HTML和CSS和JS都是前端的主要技术,三者各有分工.
- HTML可以用于制作网页的主体结构,
- CSS用于给网页做美化,
- JS用于在网页上添加动态效果
三，JavaScript的引入
1，内嵌式引入
- 在<head>标签中,用一对<script>标签,嵌入JS代码
- type属性可以省略不写
-
缺点：
- 我们定义的JS代码只能在当前一个网页中使用,代码复用度低,可维护性低
- JS代码和HTML代码混合在一个文件中,可阅读性差
2，链接式引入
- 引入外部JS文件
- 注意事项：
- 一个页面可以同时引入多个不同的JS文件
- 每个JS文件的引入都要使用一个独立的script标签
- 内嵌式和链接式的引入不能使用同一<script>标签
- 一个页面上可以用多个<script>标签 位置也不是非得放到<head>标签中不可
- src属性可以指向一个网络路径,就是第三种引入方式
-
优点：
-
提高的代码复用度
-
降低了代码维护的难度
四，JavaScript的基础语句/关键词
1，输出语句
//window可以不写
（1）弹窗输出
- window.alert() ——弹出警告框显示信息
window.alert("Warning: This is an alert message!");
（2）新的页面输出
- window.document.write() ——内容直接写入HTML文档中。这种方法通常用于动态生成页面内容。
document.write("Hello, World!"); - console.log() ——在浏览器的控制台中输出信息。这是开发者常用的调试工具，可以输出日志、错误和警告信息。
console.log("Hello, World!"); console.error("An error occurred!"); console.warn("This is a warning message!");
2，输入语句
（1）<input>标签
- HTML输入框可以通过<input>标签创建，type属性决定输入框的类型。
（2）输入弹框
- window.prompt()——用于在浏览器中显示一个对话框，可以用于获取用户输入的数据，
- 该方法接受两个参数：第一个参数为要显示的文本提示，第二个参数为可选的默认值。用户输入的文本将作为方法的返回值，如果用户点击对话框的取消按钮，则返回null
var userInput = window.prompt("请输入您的名字:", "默认名字"); if (userInput !== null) { console.log("用户输入的名字是：" + userInput); } else { console.log("用户取消了输入"); }这段代码会显示一个对话框，提示用户输入名字，如果用户输入了名字并点击确定，则输出用户的名字；如果用户点击取消，则输出用户取消了输入。
3，注释
（1）单行注释 //
（2）多行注释 /**+enter ( Ctrl + Shift + / )
<!--注释掉的文字-->
五，JavaScript 的数据类型
1，变量
- JS是弱类型的脚本语言,所有的变量 对象 的数据类型的声明统统是var
- 变量声明时没有确定具体的数据类型,在变量赋值时确定变量具体的数据类型
- JS中的变量可以反复声明,后声明的会覆盖之前声明的同名变量
- JS中的得代码可以不用以;作为结尾 每一行代码都是一个独立的语句(建议写)
- JS中字符串一般不区分 "" '' 只要不混用即可
- 可以用不同的类型的数据给变量赋值,变量会自动改变自身的数据类型
- JS中的标识符命名规则和JAVA中的保持一致即可 尽量避免 使用$ 会和jQuery冲突
（1）成员变量 var
（2）局部变量 let
（3）常量 const
- 隐患：没有使用关键字声明变量的时候，一旦变量被使用，就会变成‘成员变量’
2，基本数据类型
【3个基本】
（1）number
——整数，小数都可以 NaN ( not a number )
（2）String
——单引 ' ' ，双引 " " 都可以
（3）boolean
——同Java ，true / false
【2个特殊】
（4）null
——就是赋值为 null ，用于定义空的或不存在的引用。要注意，空值不等同于空字符串""或0。
（5）undefiend
——变量只声明不赋值的情况下,数据和数据类型都显示 undefined
3，复合数据类型
----类似Java的引用数据类型
（1）对象 Object
—— 当给一个变量赋值为null时,变量的类型为 object
（2）数组 Array
4，类型转换
【其他类型转换成数值类型】
（1） number()
——可以将boolean 值 转换成1或者0 【自动调用，做类型转换】
——不能转换 非法数字格式的字符串 结果是NaN
（2）parseInt()
——面对 非法数字格式的字符串 能转点是点
——不能转boolean
（3）parseFloat()
——面对 非法数字格式的字符串 能转点是点
——不能转boolean
六，JavaScript 的运算符
JS中运算符号大部分和java中的运算符一样,我们在这里分析一下特殊的运算符号
1，关于 / 和 %
- JS中,数字类型都是number,
- 除法：能除尽,则默认结果就是一个整数,不能除尽,结果默认就是浮点数
- JS中如果出现除零,那么结果是 infinity,而不是报错
- JS取余数运算对于浮点数仍然有效,
- 如果和0取余数,结果是NaN(not a number)
2，关于+
- + 同时也是连接运算符,看两端的变量类型,
- 如果都是number那么就是算数中的加法
- 如果有一段是字符串,那么就是连接符号,
- 如果是布尔类型和number相加,那么会将true转化为1 将false 转化为0
3，关于== 等值符
- 先比较类型,如果类型一致,则比较值是否相同
- 如果类型不一致,会将数据尝试转换number 再比较内容
4，关于=== 等同符
- 如果数据类型不同,直接返回false
- 如果类型相同,才会继续比较内容
七，流程控制结构
- 基本与Java中的一致
- 顺序结构
- 分支结构：if ，switch
- 循环结构：while，for，do_while
例题：九九乘法表
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function test4(){ for (var i = 0; i <=9; i++) { for(var j=1; j <=i; j++){ document.write(i+"*"+j+"="+(i*j)+" "); } document.write("<br/>") } } </script> </head> <body> <input type="button" value="九九乘法表" onclick="test4()"/> </body> </html>
八，函数的使用
1，什么是JS的函数
- 类似于java中的方法,
- java中的方法签名包含访问修饰符,返回值类型,方法名,参数列表,异常列表,
- JS中也可以定义一些函数,
- 但是JS中定义函数的语法相对简单很多,主要以function作为函数关键字,具备函数名和参数列表,但是没有访问修饰符也没有返回值类型关键字和异常列表
2，函数定义的三种语法 【定义方法】
（1）声明式
- function 函数名(参数列表) {js代码} 【推荐】
function show(a,b){
//方法体
return 返回值类型
}（2）赋值式
- var 函数名=function(参数列表){JS代码}
var demo3=function(){
var num=demo1(12,12,12);
alert("demo3.demo1（）返回值是："+num);
}（3）创建函数对象式
- var 函数名=new Function('js代码') 【不常用，了解】
var demo4=new Function("alert('我是demo4函数')");（4）注意：
- js 是有预加载功能的，
- 声明式函数 预加载的时候，会把方法体全部加载完成。
- 赋值式函数 预加载的时候，只加载到等号左侧。
- JavaScript的预编译跟script标签有关，一对script标签，先一起先加载！
- 不能预加载别的script标签里的函数。
- js里没有方法的重载，同名会覆盖。
3，函数参数和返回值
- 传入的实参可以和形参个数不一致
- 如果函数中有返回值,那么直接用return关键字返回即可
- 少传参数，多传参数 方法都会运行，但是 多出来的参数相当于没传
- 方法本身可以作为参数(了解)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
*
* 1传入的实参可以和形参个数不一致
* 2如果函数中有返回值,那么直接用return关键字返回即可
* */
function fun1(a,b,c){
alert("a:"+a);
alert("b:"+b);
alert("c:"+c);
}
//fun1(10,"hello js",false);
// 少传参数 OK
//fun1(1,2);
// 多传参数 OK 多出来的参数相当于没传
//fun1(10,"hello js",false,new Date());
function fun2(a,b){
var c=a*b;
return c;
}
//var x =fun2(10,20);
//alert(x)
// 方法本身作为参数(了解)
function funa( i ,j){
return i+j;
}
function funb(a){
return a(10,20);
}
var sum =funb(funa)
alert(sum)
</script>
</head>
<body>
</body>
</html>
