Web前端-JS基础
Posted 再来半包
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web前端-JS基础相关的知识，希望对你有一定的参考价值。
Web前端-JS
JS的历史和特点简介
JS诞生的背景
1.随着互联网的发展，页面传递给后台有太多需要验证的东西，尽管后端的代码是能够实现对传递过来的数据进行校验和判断的，但是这样的话无疑是加重了后台程序的工作任务量，于是广大互联网工作人员迫切需要有一种新的办法/语言能够实现这样的效果，于是js也就是在这样的一个大的时代背景下诞生的
2.js最开始的时候是不叫js而是叫scrpit语言，他们也想将这个前景光明的明日之星卖给微软，但是微软没有买下，在种种机缘巧合之后被Sun公司收购了，为了让其与java语言走的近点 ，更是改名为javascript简称为js
JS的历史
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成
1997年，在ECMA（欧洲计算机制造商协会）的协调下，由Netscape、Sun、微软、Borland组成的工作组确定统一标准：ECMA-262。
JS的特点
1.弱类型语言：在书写的时候不去做明确的数据类型的限定 例如 var a=3.14 var b=“998”
2.运行在浏览器端的解释执行性语言(js—>node.js可以运行在服务器上)
3.基于对象的编程语言
4.跨平台性：JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。
5.动态性：JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页（Home Page）中执行了某种操作所产生的动作，就称为“事件”（Event）。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。
可以简单的理解为：只要用户发出动作，js就会产生响应
6.安全性：JavaScript是一种安全性语言，它不直接允许访问本地的硬盘，并不能直接将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。
小结：js现在的用途
1）作用于浏览器端帮助提升用户的体验度
2 ) 可以用来编写游戏脚本
3）可以被构建成各种组件(node.js,React.js，vue.js, Jquery)
JS的语法基础
第一个JS例子
<html>
<head>
<meta charset="UTF-8">
<title>JS</title>
</head>
<body>
<script type="text/javascript">
alert("Hello World"); /*弹出对话框*/
</script>
</body>
</html>
小结：1.js在页面内使用的时候必须要写在<script>标签内
2.js代码书写的时候不用分号标识一行编程语句的结束
3.在js代码中xxx():此时表明这是一个函数
4.alert():以弹窗的形式将括号内的内容展示出来
JavaScript 语法
JavaScript： 是一个脚本语言。它是一个轻量级，但功能强大的编程语言
1.数据类型：虽然JavaScript在书写校验上不去区分数据的类型，但是并不意味着是不区分数据类型，而是通过在浏览器中内置的JS解析器/引擎自动的去判断的
---------------------------------------------------------------------------------------------------------
1.1数字：
var a=12 //整数
var b=2.3 //浮点数或者说是小数型
var c=-0.5
友情提示：1）在js中变量名必须以字母或下划线（"_"）开头
2）变量可以包含数字、从 A 至 Z 的大小写字母
3）JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量
---------------------------------------------------------------------------------------------------------
1.2逻辑型或布尔型：
var a= true
var b=false
alert(a)
alert(b)
---------------------------------------------------------------------------------------------------------
1.3Undefined 和 null
Undefined： 用于存放 JavaScript 的 undefined 值，表示一个未声明的变量，或已声明但没有赋值的变量，或一个并不存在的对象属性
null:可以通过将变量的值设置为 null 来清空变量，其意思为空值
var a=""
var a=null
var a
alert(typeof(a))
---------------------------------------------------------------------------------------------------------
1.4字符串： 可以使用单引号或双引号
var firstName=“biil”
var familyName=‘Gates’
alert(firstName+familyName)
---------------------------------------------------------------------------------------------------------
1.5日期：
var myDate=new Date()
alert(myDate)/默认是格里尼形式的日期格式/
提示：Date是js中的一个内置的类
new：为类Date在内存中创建一个内存空间，进而实现实例化
补充：关键字：就是具有特殊含义的词
---------------------------------------------------------------------------------------------------------
1.6数组：是一种存放数据的容器，其一般可以存放多个，且需要知道其长度
var array=[40, 100, 1, 5, 25, 10]
alert(array[0])
---------------------------------------------------------------------------------------------------------
注释：
单行注释：//
多行注释：/**/
扩展：注释的作用：
1）统一规范
2）注解，帮助理解/阅读代码
3）扯淡
---------------------------------------------------------------------------------------------------------
连接字符和转义字符：
连接字符：在js中场用+表示为连接字符
例如： var a=123
alert(‘变量a的值为：’+a)
转义字符：具有特殊含义的字符
\\n 换行符 alert(“这是第一局 \\n 这是第二句”)
\\t 制表符 alert(“这是第一局 \\t 这是第二句”)
---------------------------------------------------------------------------------------------------------
2.运算符：
2.1算术运算符： +， -， *， /， %，++，--
++：自动加1 例如 var a=12
alert(a++)
++在前：先计算再输出； ++在后：先输出再计算
–：自动减1，例如 var h=6
alert(a–)
---------------------------------------------------------------------------------------------------------
2.2关系运算符： > ，>=， <，<=, !=, ==,===
---------------------------------------------------------------------------------------------------------
2.3逻辑运算符：
与 ：&& ：全真为真，只要有一个假则为假
或 ：|| ：全假为假，只要有一个为真则为真
非 ：！ ：取相反的
JavaScript 输出
JavaScript 可以通过不同的方式来输出数据：
1）使用 window.alert() 弹出警告框。
<html>
<body>
<h1>使用 window.alert() 弹出警告框</h1>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
2）使用 document.write() 方法将内容写到 HTML 文档中。
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
document.write(123);
</script>
</body>
</html>
3）使用 innerHTML 写入到 HTML 元素。
<html>
<body>
<h1>使用 innerHTML 写入到 HTML 元素</h1>
<p id="demo">我的第一个段落</p>
<script type="text/javascript">
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html>
使用innerHTML方法，将前面定位到的选择器中的标签内容进行更改
4）使用 console.log() 写入到浏览器的控制台。
<!DOCTYPE html>
<html>
<body>
<h1>使用 console.log() 写入到浏览器的控制台</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
console.log()会将想要输出的数据写到网页的控制台中显示
基本语句
1）顺序语句：js默认是从上向下自动执行的
2）选择语句：
2.1）二路分支：
if(条件)
{
//JavaScript代码;
}
else
{
//JavaScript代码;
}
2.2）多路决策：
switch (表达式)
{
case 常量1 :
JavaScript语句;
break;
case 常量2 :
JavaScript语句;
break;
…
default :
JavaScript语句;
}
小结：switch…case…default不仅有多路决策的特性，还有穿透性
或者：
if (time<10)
{
alert("早上好");
}
else if (time>=10 && time<16)
{
alert("中午好");
}
else
{
alert("晚上好!");
}
3）循环语句：
for循环语句：
for (var i=0;i<10;i++)
{
alert("当前i的值为:"+i)
}
while循环语句：
var i =1
while (i>5)
{
alert("当前i的值为："+i)
i++;
}
do…while循环：
var i=5
do
{
alert("执行了")
i++;
}
while (i<5);
备注：for：知道次数的循环
while：>=0次的循环
do…while：>=1次的循环
break：语句用于跳出循环。
continue：用于跳过循环中的一个迭代。
JavaScript 数据类型的转换
1.typeof 操作符：可以使用 typeof 操作符来查看 JavaScript 变量的数据类型。
2.将数字转换为字符串
var a=123
//第一种方法，用String
//var castResult=String(a)
//第二种方法，用toString方法
var castResult2=a.toString()
alert(typeof(castResult2))
3.将字符串转换为数字
var a="123"
//用Number转换
var b=Number(a)
//用parseInt方法将字符串强行转换为数字
//var b=parseInt(a)
alert(typeof(b))
alert(b+998)
javaScript方法
1.match():匹配字符串可用正则表达式
2.search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置
var str = "abcderfha";
//返回查找到的下标位置
alert(str.search("er")) //返回 4
//查查找不到的时候返回-1
alert(str.search("zy"))//返回-1
3.replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str = "Hello World";
alert(str.replace("World","javascript"))//显示结果为Hello javascript
javaScript函数
js中的函数定义
语法： function 函数名( ){
}
实例一
<html>
<head>
<meta charset="UTF-8">
<title>JS函数</title>
</head>
<script type="text/javascript">
function sum(a,b){
alert(a+b)
}
</script>
<body>
<input type="button" value="求和" onclick="sum(3,4)" />
</body>
</html>
定义一个求和函数，当点击求和按钮的时候将计算出传入的两个参数的和
ps：onclick单击事件
匿名函数定义
var xx =function(x,y){
alert(x+y)
}(23,34);
或
(function( o ){
alert(o)
})(“你好”)
实例二：
<script type="text/javascript">
var fun=function(a,b){
alert(a+"\\n"+b)
}
fun(12,45);
</script>
-------------------------
<script type="text/javascript">
(function( o ){
alert(o)
})("你好")
</script>
JS对象
数组对象
创建一个数组：三种方式
1：常规方式
<script type="text/javascript">
var myCars=new Array();
myCars[0]="nike"
myCars[1]="李宁"
myCars[2]="安踏"
alert(myCars[1])
</script>
2：简洁方式
<script type="text/javascript">
var myCars=new Array("nike","李宁","安踏");
alert(myCars[1])
</script>
3：字面方式
<script type="text/javascript">
var myCars=["nike","李宁","安踏"];
alert(myCars[1])
</script>
2：访问数组：通过指定数组名以及索引号码，你可以访问某个特定的元素
例如：var name=myCars[0];
3:数组的方法和属性
数组名.length ： 数组 中元素的数量
数组名.indexOf(“abc”)：“abc” 值在数组中的索引值
4：数组的排序
数组名.sort(); ：将数组按正序排序，但是是按照字符串的排序方式来排序，不管里面是数字还是什么都是按字符串的排序方式来排序
reverse（）：将一个数组中的元素的顺序反转，（即是将数组中的元素的头变成尾，尾变成了头，不是其他的）
扩展：将数组先用sort（）方法进行正序排序，在利用reverse（）方法反转，即可达成降序的目的
字符串对象
字符串中常用的属性和方法
str.length:获取字符串的长度
str.match("")：内容匹配
str.replace（）：替换内容
var str="adsfadsf";
var n=str.replace("adsf","abcx");
var s=str.length;
JS面向对象编程
1.对象：是属性和/方法的组合
属性：是对象所拥有的一组外观特征，一般为名词
方法：是对象可以执行的功能，一般为动词
例如：对象：汽车
属性：型号：法拉利 颜色：绿色
方法：前进、刹车、倒车
PS:三类已经存在的对象：
浏览器对象：BOM(已经存在于浏览器中的，到时候我们直接调用即可，例如Screen,History,Location,Navigator)
js脚本对象:数组，字符串，日期，Math等(JS语言中已经写好的具有某一些功能的对象，例如Array,Number,Math…)
HTML文档对象：DOM（已经存在于HTML中的，且已经写好了，用的时候可以直接调用即可，例如Document）
例如：
<script type="text/javascript">
function Car(name,color)
{
this.name=name;
this.color=color;
this.type="轿车";
this.fun=function(){alert("100km/h");}
}
var car1=new Car("奥迪","蓝色");
var car2=new Car("奔驰","绿色");
alert(car1.type); //轿车
car1.fun();//100km/h
</script>
javaScript选择器
1.id选择器：通过 id 查找 HTML 元素，如果找到该元素，则该方法将以对象的形式返回该元素。
document.getElementById("id1").value //获取id为id1的标签中的value值
2.name选择器：通过name查找到HTML的元素，如果找到元素了，则会返回一个数组
var arr=document.getElementsByName("like") //将name为like的标签全部存入arr数组中
3.通过标签名找到 HTML 元素：
getElementsByTagName("p");
var habbies=document.getElementsByTagName("input")//其他的都与步骤2一样
javaScript弹框
确认框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>确认框</title>
</head>
<body>
<p>点击按钮，显示确认框。</p>
<button onclick="myFun()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFun()
{
var x;
var r=confirm("是否提交商品订单");//弹出一个确定框，确定，返回true，取消返回false
if(r==true){
x="提交成功，已确定"
}
else{
x="提交失败，已取消"
}、
//抓取掉id为demo的标签，在屏幕显示x内容
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
点击确定，会在屏幕显示”提交成功，已确定“，点击取消，会在屏幕显示"提交失败，已取消"
对话框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>确认框</title>
</head>
<body>
<p>点击按钮，显示输入框。</p>
<button onclick="myFun()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFun()
{
var x;
var r=prompt("请输入你的名字","Hello"); //弹出对话框，可输入名字
//判断如果输入的不为空或者不是空字符串，则x被赋值
if(r!=null && r!=""){
x="早上好"+r+"今天又是新的开始，加油"
}
//抓取掉id为demo的标签，在屏幕显示x内容
document.getElementById("demo").innerHTML=x;
}
</script>
</body>
</html>
点击确定以后则会将被赋值的x显示在屏幕中
以上是关于Web前端-JS基础的主要内容，如果未能解决你的问题，请参考以下文章
关于js----------------分享前端开发常用代码片段