前端：JavaScript （学习笔记）【1】

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)+"&nbsp;&nbsp;");
				}
				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>