JS

逸陌
525 阅读4分钟

JS

JS简介

JS全称是JavaScript（客户端的脚本语言），是一种嵌入在网页中的程序段。

JS是一种解释型语言，被解释器（浏览器、手机APP等）解释执行。

JS由Netscape发明，ECMA将其标准化。JavaScript借用了Java的名字和Java的语法，但它和Java没有关系。

JS用于增强客户端的交互功能。

帮助文档：www.runoob.com/js/js-tutor…

JS事件

点击事件

<input type="button" value="打什么不费力气？" onclick="answer();">
<span id="infoSpan"></span>

点击调用answer()函数，定义函数用function关键字

function answer(){
    //根据id，得到指定id对应的元素对象
    var spanObj=document.getElementById("infoSpan");
    //设置标签中间的文本
    spanObj.innerHTML="打瞌睡";
    //设置标签文本的颜色
    spanObj.style.color="red";
    //设置标签的背景色为黄色,如果样式中有‘-’，则去掉‘-’采用驼峰式命名
    spanObj.style.backgroundColor="yellow";
    spanObj.style.fontSize="14px";
​
}

下拉框选项变化的事件

春香 夏香 秋香 冬香 
function changeImg(selectImg){
            document.getElementById("faceImg").src=selectImg.value;
            document.getElementById("bodyObj").style.backgroundImage="url("+selectImg.value+")";

文档加载完毕事件

由于js是解释性语言，解释器从上向下解释执行。那么，在执行元素获取时，有可能会在解释器没有读取到元素时，获取对象，这时就会为null。

解决方案是：1、将js代码放到网页最后，等待解释器读取到所有元素，然后，在获取对象。2、创建文档加载完毕事件，等待解释器读取到所有元素，然后，再获取对象。

 var divObj;
 //文件加载完毕触发
 window.onload=function (){
 divObj=document.getElementById("imgDiv");

JS基本语法

Js嵌入网页方式

  • 嵌入式，在
  • 外联式,将JS代码独立成JS文件，然后导入到网页中

注意：一旦

  • 在事件中添加js代码
  • 超链接伪URL方式

JS的变量和常量

JS是一种弱类型语言，弱类型是指变量任何数据都可以存放。可以存放数字，可以存放字符串，也可以存放对象的引用。使用var声明一个变量。 正因为JS是一种弱类型语言，函数的形参只能写形参名，不能写类型。 ES6标准中，新定义了let和const。Let用于定义变量，功能和var类似。const用于定义常量，常量的值在运行期间无法变化。

JS数据类型

JS数据类型分为原始数据类型和引用数据类型。

原始数据类型
  • undefined 变量没有初始化，函数没有返回值
  • null 表示在变量中没有存放任何对象的引用，null是从undefined中衍生过来的，null = = undefined结果为true。
  • boolean 代表条件是否满足，取值true/false 在if条件判断中，表达式可以是任何数据类型，只有0、false、null、undefined结果才不满足。否则，结果都为true。
  • number 数字型，包含整数和小数。 NaN表示非数字，和自身不相等，一般发生在数字转换失败时。
  • String 字符串型，可以用单引号和双引号表示。在String中定义的方法和Java类似。 在JS中，数组和字符串的长度都是length属性
类型转换
  • 自动类型转换：
//结果为8，先将“10”转化为number，再和2相减
console.log("10"-2);
//结果为“102”，做+运算时，操作数有一个是字符串都做连接
console.log("10"+2);
//结果为6，先将字符串转化为number类型，再相乘
console.log("2"*"3");
//结果为NaN，当做乘法运算时，会先将操作数自动转换为number，转换失败为NaN
console.log("四"*"五")
//结果为假，NaN和自身不相等
console.log(NaN==NaN);
//结果为真，先将“55”字符串转化为number，然后再比较
console.log(55=="55");
//结果为假，= = =不但比较内容，而且会比较类型
 console.log(55= = ="55");
  • 强制类型转换

parseInt(“2”) 将字符串转化为number类型。自动丢弃第一个非数字之后的内容。如果第一个字符串为非数字，结果为NaN。 parseFloat(“3.4”) 将字符串转化为number类型，允许转小数。 引用数据类型：在变量中，存放对象的引用。所有对象的父类都是Object。

JS弹出框

a lert（内容）;
JS控制台打印
console.log(内容);

JS操作样式

元素对象.style.样式=“”;
改变class属性时，必须为className 
divObj.className=”body”

JS跳转页面

location.href='7.html';

正则表达式

定义：var rexp=/^···$/;

if (rexp.test(“”) 判断字符串是否匹配正则表达式

[]：匹配[]中描述的任意字符

{3，}：表示至少出现3次，没有上限

(com|cn|net)： 表示com、cn、net三个字符串任意出现一个

{3}：表示前一个规则，只能出现三次，不能多不能少

{3,10}：表示前一个规则，最少出现3次，最多出现10次

汉字：\u4e00-\u9fa5

+：等价于{1，}，表示前一个规则至少一次，没有上限

*：等价于{0，}，表示前一个规则可以不出现，也可以出现多次

？：等价于{0,1}，表示前一个规则可以不出现，最多出现一次

.：表示匹配任意字符

\d：匹配数字，\D：匹配非数字

\s：匹配空格、回车

\w：匹配字母、数字、下划线

JS面向对象

js对象的特点

js是基于原型的面向对象语言，只有面向对象的部分特征，没有接口。

js函数本身也是对象。

js对象的属性和方法，可以在运行期间动态的添加和删除。

js对象的创建

<script>
    var obj=new Object();
    //添加属性
    obj.name="张三";
    obj.age=30;
    //添加方法
    obj.speak=function (){
        alert("说话")
    }
    alert(obj.name+" "+obj.age);
    obj.speak();

    //删除obj对象的age属性
    delete obj.age;
    alert(obj.name+" "+obj.age);
</script>

js对象属性的访问

 //访问对象的属性(2种方式)
  alert(obj.name+"  "+obj["name"]);

遍历对象中所有属性和方法
for (var filedName in obj){
    // 获取属性
    console.log(filedName)
    // 获取属性值
    console.log(obj[filedName])
}

JSON对象

json对象的定义

//创建没有任何属性的对象
var jsonObj={};//等价于：var jsonObj=new Object;
//定义拥有name和age属性对象
var jsObj={'name':"张三",'age':20};

json对象和json字符串的转换

//将js对象以json字符串方式进行显示
alert(JSON.stringify(jsObj))
//将json字符串转化为json对象
//引号包引号的写法：" 内容 "
var str="{"name":"张三","age":20}";
//将字符串转化为json对象：JSON.parse(str);
var strObj=JSON.parse(str);
alert(strObj.name+"  "+strObj.age)

js数组

js数组的创建

方式一

//创建一个长度为0的数组
var arr=new Array();
//push,在数组尾部添加元素
arr.push("abc");
arr.push(12);
console.log(arr);

方式二

//创建一个长度为0的数组
var ar=[];
//创建有初始值的数组，数组的长度为初始值的个数
var array=[1,2,"123","abc"];
//array.length，得到数组的长度
console.log(array+"  "+array.length);

//给第9个元素赋值，产犊自动扩展到9个元素，没赋值的元素为undefined
array[8]=9;
console.log(array[6]+"  "+array.length);

js数组的长度

js数组的长度采用length属性表示。length属性是可以修改的。当length属性赋为0时，表示清空数组

var array=[1,2,3,4,5,6];
console.log(array);
console.log("---------------");
array.length=0;
console.log(array)

js数组的常见操作

  • 添加元素
arr.push(12);
  • 删除元素
var array=[1,2,3,4,5,6];
//从下标为2开始，删除2个元素。返回删除元素的集合
var x=array.splice(2,2);
//打印删除的元素
console.log(x);
//打印剩下的元素
console.log(array);
  • 插入元素
//从下标为2开始，删除0个元素，添加“abc”元素
array.splice(2,0,"abc");
console.log(array);
  • 替换元素
//替换元素，从下标为2开始，删除一个元素，添加一个元素
array.splice(2,1,"abc");
console.log(array);

json数组

  • 定义
//定义
var studentArray=[{name:'张三',age:12},{name:'张涛',age:22},{name:'王月',age:32},{name:'刘红',age:21}];

  • 遍历

    方式一

// json数组遍历  
for (var i =0;i<studentArray.length;i++){
    console.log(studentArray[i].name+"   "+studentArray[i].age);
}

方式二

//forEach遍历，n表示集合中的元素
studentArray.forEach(n=>{
    console.log(n.name+"   "+n.age);
})
  • 查找元素

方式一：查找元素的下标---findIndex

//找到"王月"所在的下标
var index=studentArray.findIndex(n=>n.name=="王月");
console.log(index);

方式二：查找元素的整个信息---find

查找"王月"的信息
    var obj=studentArray.find(n=>n.name=="王月");
    console.log(obj);
  • 数组的筛选--------filter
//    筛选姓“张”的学生信息
    var newArray=studentArray.filter(n=>n.name.startsWith("张"));
    console.log(newArray);
  • 排序
//    按学生的年龄排序,其中a和b表示数组中的两个元素
//    升序
// studentArray.sort((a,b) =>a.age-b.age);
//    降序
studentArray.sort((a,b) =>b.age-a.age);
console.log(studentArray)

map():返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，map()方法按照原始数组元素顺序依次处理元素。

模板字符串

在一个字符串中，如果要插入变量的值，那么需要频繁的拼接字符串，显得很繁琐。模板字符串可以在``中，用${变量值}方式，将变量值插入字符串。从而避免拼接字符串。

var x="张三";
var str=`<span>${x}</span>`
//结果是<span>张三</span>
avatar
文章
阅读
粉丝