JavaScript入门干货
文章目录
- 1. Js概述
- 1. js的引用方式
- JS的表单验证是重点！！⭐
- 2. JS的由来（为什么需要JS）
- 3. BOM和DOM编程
- 1. BOM编程（了解即可）
- 1. Js基础语法
- 1. JS基础语法和数据类型
- 2. js的类型转换函数
- 3. js中的运算符
- 4. js中的流程控制语句
- 5. js中的for - in 语句
- 2. js内置对象
- 1. Date对象
- 1. 网页时钟的实现
- 2. String 对象（字符串对象）
- 3. Array 对象（数组对象）
- 1. 语法规则
- 2. 常用内置函数
- 4. 其他内置对象
- 5. Js的原型属性：prototype
- 3. js自定义对象
- 1. 有参构造
- 2. 无参构造
- 3. 利用Object对象（最常用⭐）
- 4. 字面值的方式 ：json格式⭐
- 4. Js中的函数
1. Js概述
JavaScript是⼀种弱类型脚本语⾔，都是使⽤ var 定义变量，在js中没有类的概念，只有对象，所以要掌握js的几大内置对象；
1. js的引用方式
内部方式
head标签体中引入script标签
JS的表单验证是重点！！⭐
2. JS的由来（为什么需要JS）
在1994年还没有JavaScript的时候，网络宽带只有7到10kb，这种网速下执行上面的操作是很费时的；
而之后，出现了一家公司：网景公司，开发了一款浏览器叫做领航者浏览器，这个浏览器植入了livescript，这个就是JavaScript的前身；
这个出现解决了如下问题：
- 解决了用户体验问题；
- 减轻了服务器压力；
- 在浏览器端通过js引擎来进行内部校验，如果用户信息都符合正则表达式，整个用户信息才能被提交到后台；
由于公司的纷争，由livescript衍生出JavaScript（一般浏览器所用）和Jscript（微软IE浏览器所用）， 但这两种其实基本差不多，它们的特性如下：
- 基础语法：变量、数据类型、函数定义、内置对象 等都是差不多的；
- BOM编程：基于浏览器对象模型编程；
- 了解四个对象
- DOM编程：（重点⭐⭐）
- Document Object Model：基于文档对象模型编程
- 具体应用场景：
- 定时弹出广告
- 轮播图（也要用到定时器）
- 省市联动
3. BOM和DOM编程
Js中分为两种编程模式：
- BOM（基于浏览器对象模型编程）
- DOM（重点）
1. BOM编程（了解即可）
BOM编程需要了解如下四个对象：
js引擎在解析html页面的时候，将html页面主要分为以下四个对象：
- 窗口对象：window ，所有BOM编程的顶级对象
- 如打开资源文件的方法：open（）；
- 定时器相关的方法；
- 和弹框相关的方法： ⭐
- alert（“消息对话框”）：弹出的框框只有确定按钮
- confirm（”确认提示框“）：弹出的框框有确定和取消两种按钮
- prompt（”输入提示“）：弹出的框框有个文本输入框，可以进行文本输入，下面有个确认按钮；
- 地址栏对象：location
- href属性：更改页面地址（页面跳转）
- 历史记录对象：history
- 屏幕对象：screen
1. Js基础语法
1. JS基础语法和数据类型
<html>
<head>
<meta charset="UTF-8">
<title>title>
<script>
var a = 10;
var a = 20;
document.write("a的值为："+ a +" 数据类型为："+typeof(a)+"
");
script>
head>
<body>
body>
html>
运行会在页面上输出：a的值为：20 数据类型为：number
- 在js中，用var来定义任何类型；
- 使用var定义变量，同一个变量可以定义多次，后面的会覆盖前面的，这是js是一个弱类型语言的一个体现；
- 输出语句：document.write（）；
- 查看数据类型的函数：typeof（）；
js中数据类型的分类：
- number类型
- 无论是整数还是小数，number类型在浏览器中都会被默认转换为Number（js内置对象） ；
- 在JavaScript中，一切皆对象，例如：var a = 10，在底层对应的就是：var a = new Number（10）；
- string 类型
- 无论是字符还是字符串，在底层都是转化为String这个js内置对象；
- 例如：var c = ‘A’等价于：var c = new String（“A”）；
- boolean 类型 （不用详细介绍）
- boolean对应js中的Boolean这个内置对象；
- object 类型 （即所有的对象都是这个类型）
- 同样的，对应Object这个内置对象；
2. js的类型转换函数
在Java中，可以进行类型的转换，比如将String类型转换为整数对应的就是：parseInt（）这个方法；
同样的，在js中，也能实现类型的转换：
（js中还有一个parseFloat（）方法）
<script>
var a = "100";
document.write("a的值为："+ a +" 数据类型为："+typeof(a)+"
");
var a = parseInt(a);
document.write("a的值为："+ a +" 数据类型为："+typeof(a)+"
");
</script>
页面输出：
a的值为：100 数据类型为：string
a的值为：100 数据类型为：number
与Java不同的是，如果a中除了数字外还有字母的话，Java会抛出异常，而js中，遇到非数值类型的字符串停止转换；
3. js中的运算符
这个就无需多讲述了，加减乘除而已；
需要注意的是：
- js中的true使用1来代替；
- js中也能使用三元运算符，跟Java中的使用规则一样；
4. js中的流程控制语句
- （1）：顺序结构语句；
- （2）：选择结构语句；
- if、else结构
- switch语句
- 这里和Java稍微有一点区别，js里面case后面的内容可以是常量、变量、表达式，而Java中case后面只能跟常量；
- 循环结构
- 跟Java里面的没啥区别；
5. js中的for - in 语句
js中的for-in语句，类似于java中的增强for循环语句，目的是：
- 简化数组和对象属性的遍历；
js中的for - in语句格式为：
for(var 变量名 in 数组对象/自定义对象){
输出这个变量即可；
}
可以看到可以是数组对象或者自定义的对象；
下面看一个实操代码：
<html>
<head>
<meta charset="UTF-8">
<title>js之for-in语句title>
<script>
//js中数组--->Array
var arr = [10,20,30,40] ;
//普通for循环的方式
for(var i = 0 ; i < arr.length ; i ++){
document.write(arr[i]+" ")
}
//打印一条分割线
document.write("
") ;
//用for -in语句来实现遍历
for(var i in arr){
document.write(arr[i]+" ");
}
document.write("
") ;
//自定义一个Person对象,注意js中方法的形参不能带类型，否则报错；⭐⭐
function Person(name,age){//this代表当前对象的地址在引用
this.name =name ;
this.age = age ;
}
//创建一个对象
var p = new Person("Bob",20) ;
//将Person对象的属性遍历出来：for-in :对象名[变量]
for(var i in p){
//输出对象的属性
document.write(p[i]+"
") ;
}
script>
head>
<body>
body>
html>
网页输出：
10 20 30 40
10 20 30 40
Bob
20
2. js内置对象
所谓js内置对象就是js中提供的一些已有对象，它们包含大量的方法来供我们操作；
1. Date对象
作用就是：获取系统时间年份/月份/时分秒
在Java中，获取系统时间需要使用Date类；具体操作如下：
在js中，获取系统时间的具体操作为：
<script>
var data = new Date();
document.write(data);
</script>
页面输出：
Wed Nov 13 2019 12:06:00 GMT+0800 (中国标准时间)
但这个格式不是我们想要的格式，这时就需要用到Date对象的一些内置方法；
<script>
var data = new Date();
document.write(data.getFullYear() + "年");
document.write(data.getMonth() + "月");
document.write(data.getDay() + "日");
</script>
输出：
2019年10月3日
类似还有获取时分秒的方法，这里就不再详述；
1. 网页时钟的实现
要实现网页时钟，我们需要如下步骤：
- 创建日期对象；
- 拼接时间字符串；
- 获取span标签对象 id = “spanTip”；
- 设置span标签对象innerHTML属性或者innerText属性；
- 设置定时器
具体完整代码如下：
<html>
<head>
<meta charset="UTF-8">
<title>网页时钟title>
<script>
function genDate(){
//1. 创建date对象
var date = new Date() ;
//2. 拼接时间字符串
var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"
+date.getDate()+" "+date.getHours()+"-"+date.getMinutes()+"-"+
date.getSeconds() ;
//3. 获取span标签对象
var spanTip = document.getElementById("span_tip") ;
//4. 设置span标签对象的innerHTML属性
spanTip.innerHTML = dateStr ;
}
//定时器:网页定时器
/**
* window.setTimeout("任务()",毫秒) ;//经过多少毫秒后执行一次任务
* window.setInterval("任务()",毫秒);//每经过多少毫秒重复执行任务
*/
window.setInterval("genDate()",1000) ;
script>
head>
<body>
当前系统时间是：<span id="span_tip">span>
body>
html>
网页输出会输出对应时间，而且每秒更新一次；
2. String 对象（字符串对象）
3. Array 对象（数组对象）
1. 语法规则
js中数组的特点：
- js数组可以存放任意类型的数据；
- js中不存在数组越界；
三种定义方式：
-
arrayObj = new Array（）； ————不指定数组长度
-
<script> var arr = new Array(); arr[0] = 1; arr[1] = false; arr[2] = "hello"; alert(arr.length); for(var i=0; i<arr.length; i++) { document.write(arr[i]+"
"); } </script>> **网页输出：** > 先弹出一个提示框，内容为：3 > 然后输出那三个内容；
-
-
arrayObj = new Array（[size]） ————指定数组长度
- 这种方式下，就算下标越界，也不存在错误，在js中，是不存在数组越界这种情况的；
-
arrayObj = new Array（[element0[, element1[…]]]）； ————最常用⭐
-
<script> var arr = [1,"hello",false,new Object()]; for(var i=0; i<arr.length; i++) { document.write(arr[i]+"
"); } </script>> **输出：** > 1 > hello > false > [object Object]
-
2. 常用内置函数
-
join（）函数：拼接字符串；
<script> var arr = ["php","C++", "java", "python"]; var str = arr.join("、"); document.write(str); </script>输出：
php、C++、java、python -
reverse（）函数：反转数组中的元素；
4. 其他内置对象
js中还有一些其他的内置对象：如Math、
5. Js的原型属性：prototype
作用是：为内置对象追加自己定义的方法；
（此时就需要使用js的原型属性来解决这个问题，注意：更改源码也不能追加自己的方法哟）
追加的格式为：
内置对象.prototype.追加方法名 = function() {}
下面看个栗子：
<script>
var arr =[1,2,3];
//为所有的Array对象追加searchIndex这个方法；
Array.prototype.searchIndex = function(target) {
for(var i=0; i<this.length; i++) {
if(this[i] == target) {
return i;
}
}
return -1;
}
var index = arr.searchIndex(3);
document.write(index);
</script>
网页输出：
2
3. js自定义对象
自定义对象有四种定义方式，分别如下；
1. 有参构造
分两个步骤：
（1）定义对象：function 对象(属性){...}
（2）创建对象：var 对象名 = new 对象(实际参数);
具体案例：
<script>
function Person(name, age) {
//追加属性
this.name = name;
this.age = age;
//追加方法
this.print = function() {
document.write(name + " " + age);
}
}
//创建对象
var per = new Person("yy", 20);
//调用对象方法
per.print();
</script>
输出：
yy 20
2. 无参构造
<script>
function Person() {
}
var p = new Person();
//追加属性
p.name = "李四";
p.age = 20;
//追加方法
p.print = function() {
document.write(p.name + " " + p.age);
}
p.print();
</script>
输出：
李四 20
3. 利用Object对象（最常用⭐）
<script>
//直接将Object对象看成你想要的任意对象，之后你追加属性和方法即可；
var p = new Object();
//追加属性
p.name = "李四";
p.age = 20;
//追加方法
p.print = function() {
document.write(p.name + " " + p.age);
}
p.print();
</script>
输出：
李四 20
4. 字面值的方式 ：json格式⭐
json的格式为： （{}内的东西就叫json对象）
{"key" : value(Object)}
简单的格式：(简单或复杂都是由基本格式而来)
{"name":"张三", "age":20, "password":"123456"}
复杂的格式（json里面嵌套json）：
{"key":{
"key":value
}
}
具体使用：
<script>
var p = {
"name" : "YY",
"age" : 20,
"print" : function() {
document.write(p.name + " " + p.age);
}
};
p.print();
</script>
网页输出：
YY 20
json的使用解决了前后端交互的一些问题，例如后台给前端返回List/Map这类集合数据的时候，前端是无法直接处理的；我们应该将List/Map转化为json对象再传给前端；
4. Js中的函数
在js中，定义函数的格式为：
function 函数名(形式参数列表) {
具体业务;
}
注意点：
-
（1）：形式参数中不能加上数据类型（var），否则报错；
<script> function add(var a, var b) { var s = a+b; document.write(s); } add(10,30); </script>运行上面后将会报错；
-
（2）：在js中，不存在方法重载的概念，后面同名的函数将会覆盖前面的函数；
-
（3）：在js中，不需要写返回值，但可以有return语句；
-
（4）：无论形式参数个数大于还是小于实际参数，函数都会被调用；
-
（5）：函数中默认存在一个数组：arguments，作用是：将函数中实参和形参一一绑定；
js中，函数的调用分为单独调用和赋值调用:
-
单独调用：即直接调用函数；（如 add(10,30); ）
-
赋值调用：把函数调用的结果赋值给一个变量；
<script> function add(a, b) { var s = a+b; return s; } var res = add(10,30); document.write(res); </script>