资讯专栏INFORMATION COLUMN

前端学习记录(JS篇)

Keagan / 3321人阅读

摘要:简介俗称,的正式名称是,是网景公司公司开发的一种基于客户端浏览器基于面向对象事件驱动式的网页脚本语言。变量名不能使用关键字变量名对大小写敏感。

javascript简介

javascript俗称jsjs的正式名称是ECMAScript,是网景公司Netscape公司开发的一种基于客户端浏览器、基于面向对象、事件驱动式的网页脚本语言。主要用于:交互式操作,表单验证,网页特效,web游戏,服务器脚本开发等;

特点

js是一种解释性脚本编程语言

js是基于对象的脚本编程语言

简单性

安全性(不能访问本地硬盘)

动态性的

跨平台性(依赖浏览器,与操作系统无关)

三种使用方法

(1)使用onclick:属性构建执行js代码

点击

(2)使用标签来包含js代码


(3)导入外部的javascript文件,让html页面和js脚本分离


javascript变量和数据类型

js是弱类型脚本语言,使用变量之前,可以无需定义,当使用某个变量的时候直接使用即可。主要分为以下两种定义方式:
(1)隐式定义:直接给变量赋值(隐式变量声明的时候必须赋初值)
a = 10;
(2)显示定义:使用var关键字定义变量(使用之前必须赋初值,不然会报undefined错误)
var a = 10;

变量命名规则:

首字母必须是字母、下划线或者$符号。

余下的字母可以是下划线、$、任意字母或数字。

变量名不能使用关键字

变量名对大小写敏感。

js是弱类型脚本语言,声明变量时无需指明变量的数据类型,js是解释时动态决定的,数据保存在内存中时也是有数据类型的,常用数据类型如下:

数值类型(number):包含整数和浮点数

布尔类型(boolean):只有truefalse两个值

字符串类型(string):字符串必须用单引号或双引号括起来

对象类型(object)

数组类型(array

未定义类型(undefined):专门用来确定一个已经创建但是没有初值的变量

空类型(null):用来表明某个变量的值为空

NaN:非数值型

注:undefinednull的值相等,类型不同。 两个字符串是否相等,可用==来判断。

数据类型转换:

+号或者toString():数值number类型转换成字符串
parseInt():将字符串转为整型
parseFloat():将字符串转换为浮点型

注意:

parseInt("67red") -> 67(字符串转为整型的时候会自动截取前面的数字,后面的忽略)
parseInt("red67") -> NaN(字符串前面没有数字,会报not a number错误)

字符串常用方法:
stringObject.charAt(index):获取字符串特定索引处的字符 
index:下标(如果不在0~stringObject.length-1的范围内,返回"") 
返回值:string

stringObject.toUpperCase():将字符串的所有字符转换成大写字母 
返回值:string

stringObject.toLowerCase():将字符串的所有字符转换成小写字母 
返回值:string

stringObject.substring(start, end):提取字符串中介于两个指定下标之间的字符 
start:必须,字符串中开始位置 
end:非必需,字符串中结束位置,如果不指定,会一直到字符串的结尾 
返回值:string

arrayObject.slice(start, end):提取字符串中介于两个指定下标之间的字符,可指定负数 
start:必须,字符串中开始位置 
end:非必需,字符串中结束位置,如果不指定,会一直到字符串的结尾 
返回值:string

stringObject.indexOf(searchvalue,fromindex):返回某个指定的字符串值在字符串中首次出现的位置 
searchvalue:必须,需要查找的字符串 
fromindex:非必须,字符串的指定位置,如果不指定,会从字符串的开始位置开始查找 
返回值:number

stringObject.replace(regexp/substr,replacement):将字符串中的某个子串以特定的字符串替换 
regexp/substr:需要替换的字符串 
replacement:替换字符串的值 
返回值:string

stringObject.split(separator,limit): 
separator    必需,分隔符 
limit 可选。该参数可指定返回的数组的最大长度,如果不指定,整个字符串都会被分割 
返回值:string数组

stringObject.concat(str1, str2...):用于将多个字符串拼加成一个字符串 
str1:字符串 
返回值:string

注意:

用字符串做加法的时候,会做字符串拼接工作

用字符串做减法、乘法、除法的时候,会将字符串转换成数值类型进行减法、乘法、除法运算

js数组

三种定义数组的方法:
(1)定义时直接给数组变量赋值
var arr = [1, 2, 3];
(2)定义一个空数组
var arr = [];
(3)用new方法定义数组
var arr = new Array();

特点:

数组长度可变

同一数组中的元素类型可以互不相同

当访问未赋值的数组元素时,该元素值为undefined,不会数组越界

js里面没有数组越界的概念,会显示undefined

js运算符

算术运算符:+ - * / % ++ --
赋值运算符:=
比较运算符:> < >= <= == != === !==
逻辑运算符:&& || !
位运算符:& | ~ ^ << >>
其他运算符:三目运算符(?:)
void运算符:强行指定某个表达式的不会返回值

        `typeof` 运算符:获取某个变量的数据类型
         `instanceof`运算符:判断某个变量的数据类型是否为指定的数据类型
         `var a = void 3;  //输出为undefined`
         `document.write(typeof(str));  //输出为string`
         ` alert(arr instanceof Array);  //输出为true`

注意:js中没有继承的概念,所有的对象的父类都是object

js流程控制

js支持的分支语句主要有ifswitch语句。

if(条件){
    //表达式
}else{
    //表达式
}

//注意:switch中表达式的值可以是number类型,也可以是string类型
switch(表达式){
    case 值1: //表达式 break;
    case 值1: //表达式 break;
    ...
    default://表达式;

}

js支持的循环语句主要有while循环,do-while循环,for循环,for-in循环

//先判断,后执行
while(循环条件){
    //表达式
}

//先执行,后判断,至少执行一次
do{
    //表达式
}while(循环条件)

//当循环次数确定的情况下,一般用for循环,更简洁
for(表达式1; 表达式2; 表达式3){
    //表达式
}

//可用于遍历对象,比如数组(数组遍历的是下标,对象遍历的是属性,注意:都不是具体的值)
for(变量 in 对象){
    //表达式
}

//遍历的是下标
var arr = [1, 2, 3, 4, 5];
            arr[5] = 10;
            arr[10] = 11;

for(var a in arr){
    document.write(arr[a]+"    ");
}

js提供了breakcontinue来改变循环的控制流

break:跳出该层循环

continue:结束该层循环的本次循环

常用的特殊语句

语句是js的基本执行单元,每条语句都是以分号结束,语句了前面的赋值语句、算术运算等语句之外,还有一些特殊语句。

语句块(包含在一对大括号里)

空语句(使用运用比较少)

异常抛出语句
throw new Error("异常抛出");

异常捕捉语句

try{
    var age = 5;
    if(age == 5){
        throw new Error("异常抛出");
    }
}catch(e){
    document.write("出错:"+e.message);
}finally{
    document.write("总会执行的finally块");
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/107887.html

相关文章

  • 深入理解js

    摘要:详解十大常用设计模式力荐深度好文深入理解大设计模式收集各种疑难杂症的问题集锦关于,工作和学习过程中遇到过许多问题,也解答过许多别人的问题。介绍了的内存管理。 延迟加载 (Lazyload) 三种实现方式 延迟加载也称为惰性加载,即在长网页中延迟加载图像。用户滚动到它们之前,视口外的图像不会加载。本文详细介绍了三种延迟加载的实现方式。 详解 Javascript十大常用设计模式 力荐~ ...

    caikeal 评论0 收藏0
  • 前端面试系列--前言

    摘要:这个系列的文章将记录我准备春招的整个过程,我会将自己学习到的新知识记录在这个系列里文章目录前言说明准备方向目标前言说明作为半个科班出身学数学的应届生,在学习计算机的时候还是比较吃力的,从今年月份开始接触前端,到现在也有个月左右了。 这个系列的文章将记录我准备春招的整个过程,我会将自己学习到的新知识记录在这个系列里 文章目录 前言说明 准备方向 目标 前言说明   作为半个科班出身...

    sshe 评论0 收藏0
  • 前端面试系列--前言

    摘要:这个系列的文章将记录我准备春招的整个过程,我会将自己学习到的新知识记录在这个系列里文章目录前言说明准备方向目标前言说明作为半个科班出身学数学的应届生,在学习计算机的时候还是比较吃力的,从今年月份开始接触前端,到现在也有个月左右了。 这个系列的文章将记录我准备春招的整个过程,我会将自己学习到的新知识记录在这个系列里 文章目录 前言说明 准备方向 目标 前言说明   作为半个科班出身...

    zsirfs 评论0 收藏0
  • 前端面试系列--前言

    摘要:这个系列的文章将记录我准备春招的整个过程,我会将自己学习到的新知识记录在这个系列里文章目录前言说明准备方向目标前言说明作为半个科班出身学数学的应届生,在学习计算机的时候还是比较吃力的,从今年月份开始接触前端,到现在也有个月左右了。 这个系列的文章将记录我准备春招的整个过程,我会将自己学习到的新知识记录在这个系列里 文章目录 前言说明 准备方向 目标 前言说明   作为半个科班出身...

    Freelander 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<