# 博学谷技术支持
目录
1.概述
1.1 介绍
- JavaScript 是一门跨平台、面向对象的脚本语言
- 而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。
- JavaScript 和 Java 是完全不同的语言，不论是概念还是设计，只是名字比较像而已。但是==基础语法类似==，所以我们有java的学习经验，再学习JavaScript 语言就相对比较容易些。
1.2 作用
- JavaScript 是用来控制网页行为的，它能使网页可交互：
- 改变页面内容、
- 修改指定元素的属性值、
- 对表单进行校验等
2. JavaScript引入方式
JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种：
-
内部脚本：将 JS代码定义在HTML页面中
-
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
2.1 内部脚本
- 在 HTML 中，可以在任意地方，放置任意数量 ，一般把脚本置于 <body> 元素的底部
- JavaScript 代码必须位于
<script>与</script>标签之间
2.2 外部脚本
第一步：定义外部 js 文件。如定义名为 demo.js的文件
demo.js 文件内容如下：
alert("hello js");第二步：在页面中引入外部的js文件
在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="../js/demo.js"></script>
</body>
</html>3. JavaScript基础语法
3.1 书写语法
-
区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
-
每行结尾的分号可有可无
如果一行上写多个语句时，必须加分号用来区分多个语句。
-
注释
-
单行注释：// 注释内容
-
多行注释：/* 注释内容 */
注意：JavaScript 没有文档注释
-
-
大括号表示代码块
下面语句大家肯定能看懂，和 java 一样 大括号表示代码块。
if (count == 3) { alert(count); }
3.2 输出语句
js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 console.log() 写入浏览器控制台.
3.3 变量
介绍
- JavaScript 中用 var 关键字（variable 的缩写）来声明变量。
- 格式
var 变量名 = 数据值;。 - 而JavaScript 是一门弱类型语言，变量可以存放不同类型的值；
- 如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数
var test = 20;
test = "张三";js 命名规则，和java语言基本都相同
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
- 数字不能开头
- 建议使用驼峰命名
JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样
-
作用域：全局变量
-
变量可以重复定义
ECMAScript 6 新增：
let关键字：只在 let 关键字所在的代码块内有效，且不允许重复声明。
const关键字：用来声明一个只读的常量。一旦声明，常量的值就不能改变。
3.4 数据类型
JavaScript 中提供了两类数据类型：原始类型 和 引用类型。
使用 typeof 运算符可以获取数据类型
alert(typeof age);以弹框的形式将 age 变量的数据类型输出
原始数据类型：
-
number：数字（整数、小数、NaN(Not a Number)）
var age = 20; var price = 99.8; alert(typeof age); // 结果是 ： number alert(typeof price);// 结果是 ： number注意： NaN是一个特殊的number类型的值
-
string：字符、字符串，单双引皆可
var ch = 'a'; var name = '张三'; var addr = "北京"; alert(typeof ch); //结果是 string alert(typeof name); //结果是 string alert(typeof addr); //结果是 string注意：在 js 中 双引号和单引号都表示字符串类型的数据
-
boolean：布尔。true，false
-
null：对象为空
var obj = null; alert(typeof obj);//结果是 object -
undefined：当声明的变量未初始化时，该变量的默认值是 undefined
var a ; alert(typeof a); //结果是 undefined
3.5 运算符
JavaScript 提供了如下的运算符，大部分和 Java语言 都是一样的
-
一元运算符：++，--
-
算术运算符：+，-，*，/，%
-
赋值运算符：=，+=，-=…
-
关系运算符：>，<，>=，<=，!=，==，===…
-
逻辑运算符：&&，||，!
-
三元运算符：条件表达式 ? true_value : false_value
注意： ==和===区别
-
==：
-
判断类型是否一样，如果不一样，则进行类型转换
-
再去比较其值
-
-
===：js 中的全等于
-
判断类型是否一样，如果不一样，直接返回false
-
类型一样，再去比较其值
-
代码：
var age1 = 20;
var age2 = "20";
alert(age1 == age2);// true
alert(age1 === age2);// false类型转换
上述讲解 == 运算符时，发现会进行类型转换，所以接下来我们来详细的讲解一下 JavaScript 中的类型转换。
-
其他类型转为number
-
string 转换为 number 类型：
-
按照字符串的字面值，转为数字。
-
如果字面值不是数字，则转为NaN
将 string 转换为 number 有两种方式：
-
使用
+正号运算符：var str = +"20"; alert(str + 1) //21
-
使用
parseInt()函数(方法)：var str = "20"; alert(parseInt(str) + 1);
建议使用
parseInt()函数进行转换。 -
-
boolean 转换为 number 类型：true 转为1，false转为0
var flag = +false; alert(flag); // 0
-
-
其他类型转为boolean
作用：条件判断时，简化代码
-
number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
-
string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
-
null类型转换为 boolean 类型是 false
-
undefined 转换为 boolean 类型是 false
-
使用场景：
在 Java 中使用字符串前，一般都会先判断字符串不是null，并且不是空字符才会做其他的一些操作，JavaScript也有类型的操作，代码如下：
var str = "abc";
//健壮性判断
if(str != null && str.length > 0){
alert("转为true");
}else {
alert("转为false");
}但是由于 JavaScript 会自动进行类型转换，所以上述的判断可以进行简化，代码如下：
var str = "abc";
//健壮性判断
if(str){
alert("转为true");
}else {
alert("转为false");
}3.6 流程控制语句
JavaScript 中提供了和 Java 一样的流程控制语句
- if
- switch
- for
- while
- dowhile
3.7 函数
函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。
- 函数定义格式有两种：
-
方式1
function 函数名(参数1,参数2..){ 要执行的代码 } -
方式2
var 函数名 = function (参数列表){ 要执行的代码 }
-
注意：
形式参数不需要类型。因为JavaScript是弱类型语言
function add(a, b){ return a + b; }上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。
返回值也不需要定义类型，可以在函数内部直接使用return返回即可
- 函数调用
函数调用函数：
函数名称(实际参数列表);
eg：
let result = add(10,20);
注意：
JS中，函数调用可以传递任意个数参数
例如
let result = add(1,2,3);它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。
4. JavaScript常用对象
JavaScript 提供了很多对象供使用者来使用。这些对象总共分类三类
- 基本对象
- BOM 对象
- DOM对象
4.1 Array对象
JavaScript Array对象用于定义数组
4.1.1 定义格式
数组的定义格式有两种：
-
方式1
var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据（元素） -
方式2
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）注意：Java中的数组静态初始化使用的是{}定义，而 JavaScript 中使用的是 [] 定义
4.1.2 元素访问
访问数组中的元素和 Java 语言的一样，格式如下：
arr[索引] = 值;4.1.3 特点
JavaScript 中的数组可以存储任意的类型的数据。
例如如下代码：
// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]); //undefined
arr3[5] = "hello";
alert(arr3[5]); // hello4.1.4 属性
Array 对象提供了很多属性，可在官方文档中查看
4.1.5 方法
Array 对象同样也提供了很多方法，如下演示两种
-
push 函数：给数组添加元素，也就是在数组的末尾添加元素
参数表示要添加的元素
-
splice 函数：删除元素
参数1：索引。表示从哪个索引位置删除
参数2：个数。表示删除几个元素
4.2 String对象
String对象的创建方式有两种
-
方式1：
var 变量名 = new String(s);
-
方式2：
var 变量名 = "数组";
属性：
String对象提供了很多属性，可在官方文档中查看
函数：
String对象提供了很多函数（方法），可在官方文档中查看
String对象还有一个函数 trim() ，该方法在文档中没有体现，但是所有的浏览器都支持；它是用来去掉字符串两端的空格。
var str4 = ' abc ';
alert(1 + str4.trim() + 1);输出的内容是 1abc1 。这就是 trim() 函数的作用。
trim() 函数在以后开发中还是比较常用的，例如登陆界面中
用户在输入用户名和密码时，可能会习惯的输入一些空格，这样在我们后端程序中判断用户名和密码是否正确，结果肯定是失败。所以我们一般都会对用户输入的字符串数据进行去除前后空格的操作。
4.3 自定义对象
在 JavaScript 中自定义对象特别简单，下面就是自定义对象的格式：
var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...,
函数名称:function (形参列表){},
...
};调用属性的格式：
对象名.属性名调用函数的格式：
对象名.函数名()接下来通过代码演示一下，让大家体验一下 JavaScript 中自定义对象
var person = {
name : "zhangsan",
age : 23,
eat: function (){
alert("干饭~");
}
};
alert(person.name); //zhangsan
alert(person.age); //23
person.eat(); //干饭~5.BOM
BOM：Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。
我们要操作浏览器的各个组成部分就可以通过操作 BOM 中的对象来实现。比如：我现在想将浏览器地址栏的地址改为 https://www.itheima.com 就可以通过使用 BOM 中定义的 Location 对象的 href 属性，代码： location.href = "https://itheima.com";
BOM 中包含了如下对象：
-
Window：浏览器窗口对象
-
Navigator：浏览器对象
-
Screen：屏幕对象
-
History：历史记录对象
-
Location：地址栏对象
下图是 BOM 中的各个对象和浏览器的各个组成部分的对应关系
5.1 Window对象
window 对象是 JavaScript 对浏览器的窗口进行封装的对象。
5.1.1 获取window对象
该对象不需要创建直接使用 window，其中 window. 可以省略。比如我们之前使用的 alert() 函数，其实就是 window 对象的函数，
-
显式使用
window对象调用window.alert("abc"); -
隐式调用
alert("abc")
5.1.2 window对象属性
window 对象提供了用于获取其他 BOM 组成对象的属性
如： window.location，而 window. 可以省略，简化写成 location 来获取 Location 对象。
5.1.3 window对象函数
window 对象提供了很多函数供我们使用，可在文档中查看
confirm代码演示：
// confirm()，点击确定按钮，返回true，点击取消按钮，返回false
var flag = confirm("确认删除？");
alert(flag);当我们点击 确定 按钮，flag 变量值记录的就是 true ；当我们点击 取消 按钮，flag 变量值记录的就是 false。
定时器代码演示：
setTimeout(function (){
alert("hehe");
},3000);当我们打开浏览器，3秒后才会弹框输出 hehe，并且只会弹出一次。
setInterval(function (){
alert("hehe");
},2000);当我们打开浏览器，每隔2秒都会弹框输出 hehe。
5.2 History对象
History 对象是 JavaScript 对历史记录进行封装的对象。
-
History 对象的获取
使用 window.history获取，其中window. 可以省略
-
History 对象的函数
-
back()函数的作用，跳转到前一个访问的页面，； -
forward()函数的作用，跳转到下一个访问的页面。
-
5.3 Location对象
Location 对象是 JavaScript 对地址栏封装的对象。可以通过操作该对象，跳转到任意页面。
5.3.1 获取Location对象
使用 window.location获取，其中window. 可以省略
window.location.方法();
location.方法();5.3.2 Location对象属性
Location对象提供了很对属性。常用的只有一个属性 href
代码演示：
alert("要跳转了");
location.href = "https://www.baidu.com";在浏览器首先会弹框显示 要跳转了，当我们点击了 确定 就会跳转到 百度 的首页。
扫一扫
1442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
