JavaScript的简单学习

JavaScript是网页前端中三剑客之一，另外两个分别为HTML和CSS

其中HTML负责控制网页的结构，CSS负责空着界面表现，而JS负责控制网页的行为

JS语言是一种弱类型语言，所以在很多地方都支持他的使用

        JavaScript 是一门跨平台、面向对象的脚本语言 ，J avaScript 是脚本语言，不需要编译，由浏览器直接解析并执行。

JS的引入方式有两种

内部脚本

将JS脚本写在HTML文件中，位于<script>标签和</script>标签之间

其中最好将<script>标签置于body标签底部，这样可以提高用户的使用体验

外部脚本d

定义一个名为JS的文件夹，其中存放有关JS的代码

在HTML中利用<script>进行引入

 书写语法和输出语句

输出语句

window.alert();  出现警示框

document.write();  写在HTML页面中

console.log();  出现在控制台中

书写语法

JS的书写语法和JAVA相似，都是利用 // 和 /**/ 进行注释

JS的变量和数据类型以及类型转换

JS的变量

JS的变量定义有三种：var，let，const  // 三种变量均不区分数据类型

var定义的变量为全局变量，可以重复定义

let定义的变量为局部变量，不可以重复定义

const定义的变量为常量，不可以重复定义，不可以改变其值

JS的数据类型

JS的数据类型有五种：number，boolean，null，string，undefined  // 可以利用 typeof 函数来输出数据的类型

number：数字（整数、小数、NaN(Not a Number)）

string：字符、字符串，单双引皆可

boolean：布尔。true，false

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是 undefined

JS的类型转换

其他类型转number类型

string可以使用parseInt函数转换：其中如果字面值非数值，则会转为NaN，任何数字与NaN进行运算结果都为NaN

boolean的true转为1，false转为0

其他类型转Boolean类型

number中的NaN和转为false，其余转为true；

string中的空字符串转为false，其余为true；

null和undefined转为false；

JS的运算符号

JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的  == 和  === ；

一元运算符：++，--

算术运算符：+，-，*，/，% 赋值运算符：=，+=，-=…

关系运算符：>，<，>=，<=，!=，==，===… 逻辑运算符：&&，||，!

三元运算符：条件表达式 ? true_value : false_value

==：

1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值

===：js 中的全等于

1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值

        在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，但是由于JS存在自动转换，所以直接用if判断str即可

JS的流程控制语句

和JAVA类似：if，for，switch，while，dowhile   // 使用方法也类似

但是switch和C有所区别，JS中case后面需要加入{}，而C中则不需要

JS中的函数        

        函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。

函数的定义方式有两种

第一种

1function 函数名(参数1,参数2..){
2要执行的代码
3	}

第二种

var 函数名 = function (参数列表){
    要执行的代码
	}

         JS函数中的形参不需要定义类型，因为JS是一种弱语言，返回值也不需要定义类型，直接return即可

函数调用

        JS中，函数调用可以传递任意个数参数例 如 let result = add(1,2,3);它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收，如果只传入一个值则第二个为undefined

        

JS的对象

基本对象

---

Array对象

JSArray对象用于定义数组，有两种定义方式

第一种

var 变量名 = new Array(元素列表);

var nums = new Array[1,2,3]

第二种

var 变量名 = [元素列表];

var nums = [1,2,3]

 Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [ ] 定义

JS中的元素访问和JAVA中类似都是，nums[索引值]

JS中的array数组相当于JAVA中的集合，数组长度可变，并且因为JS是弱类型语言，所以数组中可以存放任意类型的变量

---

---

string对象

---

---

自定义对象 

 

注意调用自定义对线的函数时不需要使用alert再进行调用 

BOM对象

Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

Window：浏览器窗口对象

Navigator：浏览器对象

Screen：屏幕对象

History：历史记录对象

Location：地址栏对象

window对象可以进行隐式调用，即可以不用打出window. ，就可以使用

alert("hello alert");

 window对象也可以调用剩余的BOM对象

History对象

 Location对象

DOM对象

        Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。 在XML中也接触过DOM，XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

 Document：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象       

 JavaScript 通过 DOM， 就能够对 HTML进行操作了

改变 HTML 元素的内容

改变 HTML 元素的样式（CSS）

对HTML DOM 事件作出反应

添加和删除 HTML 元素

 常用操作

/*
    checkbox   checked
    button onclick
    div innerHTML/color
    img src
 */
 /*
    onsubmit 返回true 表单会提交 false 则失败
 */

事件监听

        事件监听使我们在HTML页面中进行一些操作的绑定操作 

      JS提供了两种事件绑定方式

第一种直接利用HTML标签中的事件属性进行绑定

第二种是利用id值来在JS代码中进行操作

常见事件

onsubmit 控制表单提交