web前端第五篇javascript基础

呆萌小河马的博客      2022-02-17     409

关键词:

一、JavaScript的历史

  • 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)

  • Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript

  • 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.

  • 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会(ISO/IEC)也采纳 ECMAScript 作为标准(ISO/IEC-16262)。从此,Web 浏览器就开始努力(虽然有着不同的程度的成功和失败)将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.

二、ECMAScript  

尽管 ECMAScript 是一个重要的标准,但它并不是 JavaScript 唯一的部分,当然,也不是唯一被标准化的部分。实际上,一个完整的 JavaScript 实现是由以下 3 个不同部分组成的:

  • 核心(ECMAScript) 
  • 文档对象模型(DOM) Document object model (整合js,css,html)
  • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器)
  • Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的. 

简单地说,ECMAScript 描述了以下内容:

  • 语法 
  • 类型 
  • 语句 
  • 关键字 
  • 保留字 
  • 运算符 
  • 对象 (封装 继承 多态) 基于对象的语言.使用对象.

三、JavaScript基础

1.JS的引入方式

1 直接编写
    <script>
        alert('hello yuan')
    </script>
2 导入文件
    <script src="hello.js"></script>

2.JS的变量、

 1.声明变量时不用声明变量类型,全部使用var关键字 

var a;<br>a=3;

 2.一行可以声明多个变量.并且可以是不同类型

var name="yuan", age=20, job="lecturer";

 3.一行可以声明多个变量.并且可以是不同类型

 4.变量命名,首字符只能是字母,下划线,$美元符 三选一,余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写,x与X是两个变量 

//命名规范
Camel 标记法
首字母是小写的,接下来的字母都以大写字符开头。例如:
var myTestValue = 0, mySecondValue = "hi";
Pascal 标记法
首字母是大写的,接下来的字母都以大写字符开头。例如:
Var MyTestValue = 0, MySecondValue = "hi";
匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。例如,i 表示整数,s 表示字符串,如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";

  

3.常量和标识符

常量 :直接在程序中出现的数据值

标识符:

  1. 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
  2. 常用于表示函数、变量等的名称
  3. 例如:_abc,$abc,abc,abc123是标识符,而1abc不是
  4. JavaScript语言中代表特定含义的词称为保留字,不允许程序再定义为标识符

关键字:

  

4.JS的数据类型

 数据类型有:

number     -----  数值
boolean    -----  布尔值
string     -----  字符串
undefined  -----  undefined
null       -----   null  

 数字类型:

  • 不区分整型数值和浮点型数值;

字符串类型(string):

是由Unicode字符、数字、标点符号组成的序列;字符串常量首尾由单引号或双引号括起;JavaScript中没有字符类型;常用特殊字符在字符串中的表达;
字符串中部分特殊字符必须加上右划线\;常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线

 布尔类型(bolean):

Boolean类型仅有两个值:true和false,也代表1和0,实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false
Boolean值主要用于JavaScript的控制语句,例如:

if (x==1){
      y=y+1;
}else{
      y=y-1;
      }

Null 和 Undefined类型

Undefined类型

1.Undefined 类型只有一个值,即 undefined。当声明的变量未初始化时,该变量的默认值是 undefined。

2.当函数无明确返回值时,返回的也是值 "undefined";

Null类型

另一种只有一个值的类型是 Null,它只有一个专用值 null,即它的字面量。值 undefined 实际上是从值 null 派生来的,因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等,但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值,null 则用于表示尚未存在的对象(在讨论 typeof 运算符时,简单地介绍过这一点)。如果函数或方法要返回的是对象,那么找不到该对象时,返回的通常是 null。

 四、运算符

运算符分类

算术运算符:
    +   -    *    /     %       ++        -- 

比较运算符:
    >   >=   <    <=    !=    ==    ===   !==

逻辑运算符:
     &&   ||   !

赋值运算符:
    =  +=   -=  *=   /=

字符串运算符:
    +  连接,两边操作数有一个或两个是字符串就做连接运算

 算术运算符:自增,自减

++i:先计算后赋值
i++:先赋值后计算

 假如x=2,那么x++表达式执行后的值为3,x--表达式执行后的值为1;i++相当于i=i+1,i--相当于i=i-1;

 js不同于python,是一门弱类型语言

能够进行数据转换的叫做弱类型
console.log('1'==1)  //True
console.log('1'===1)  //False
  
强类型
print(1='1') //False
静态类型语言
一种在编译期间就确定数据类型的语言。大多数静态类型语言是通过要求在使用任一变量之前声明其数据类型来保证这一点的。Java 和 C 是静态类型语言。 
动态类型语言
一种在运行期间才去确定数据类型的语言,与静态类型相反。VBScript 和 Python 是动态类型的,因为它们确定一个变量的类型是在您第一次给它赋值的时候。 
强类型语言
一种总是强制类型定义的语言。Java 和 Python 是强制类型定义的。您有一个整数,如果不明确地进行转换 ,不能将把它当成一个字符串去应用。 
弱类型语言
一种类型可以被忽略的语言,与强类型相反。JS 是弱类型的。在JS中,可以将字符串 '12' 和整数 3 进行连接得到字符串'123',然后可以把它看成整数 123 ,所有这些都不需要任何的显示转换。 
所以说 Python 既是动态类型语言 (因为它不使用显示数据类型声明),又是强类型语言 (因为只要一个变量获得了一个数据类型,它实际上就一直是这个类型了)。

 

 

 注意3: NaN

var d="yuan";
    d=+d;
    alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
    alert(typeof(d));//Number

    //NaN特点:
    
    var n=NaN;
    
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);
    
    alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=

 比较运算符

>   >=   <    <=    !=    ==    ===   !==

 

 等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。

  console.log(2==2); //true
  console.log(2=='2'); //true  因为js是弱类型的,所以返回true

  console.log(2==='2'); //false (===判断的是类型,类型不一样就为false了)
  console.log(2!=='2'); //true !==和===是相反的

 注意:

var bResult = "Blue" < "alpha";
alert(bResult); //输出 true  
在上面的例子中,字符串 "Blue" 小于 "alpha",因为字母 B 的字符代码是 66,字母 a 的字符代码是 97。

比较数字和字符串

另一种棘手的状况发生在比较两个字符串形式的数字时,比如:

var bResult = "25" < "3";
alert(bResult); //输出 "true"
上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串,所以比较的是它们的字符代码("2" 的字符代码是 50,"3" 的字符代码是 51)。

不过,如果把某个运算数该为数字,那么结果就有趣了:

var bResult = "25" < 3;
alert(bResult); //输出 "false"

这里,字符串 "25" 将被转换成数字 25,然后与数字 3 进行比较,结果不出所料。

总结:

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

 逻辑运算符

console.log(1&&3); //3  两个为真才为真(0为假,其他的数字都代表真)
console.log(0&&3); //0  只要有一个为假则为假
console.log(0||3); //3  
console.log(2||3); //2

 五、流程控制

  • 顺序结构(从上向下顺序执行)
  • 分支结构
  • 循环结构

分支结构:

 1. if.....else结构:

if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

 

   2.switch-case结构

switch基本格式
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

 

 示例

switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定义";
}

 

 switch比else if结构更加简洁清晰,使程序可读性更强,效率更高。

循环语句

for循环:(推荐使用)

语法规则:

    for(初始表达式;条件表达式;自增或自减)
    {
            执行语句
            ……
    }

 

 for循环的另一种形式:

for( 变量 in 数组或对象)
    {
        执行语句
        ……
    }

while循环:

语法规则:

while (条件){
    语句1;
    ...
}

六、异常处理

try {
    //这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
    //e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}

注:主动抛出异常 throw Error('xxxx')

 

 

 
 

 

web前端入坑第五篇:秒懂vuejsangularreact原理和前端发展历史

秒懂Vuejs、Angular、React原理和前端发展历史2017-04-07 小北哥哥 前端你别闹今天来说说“前端发展历史和框架” 「前端程序发展的历史」「不学自知,不问自晓,古今行事,未之有也」我们都知道现在流行的框架:Vue.Js... 查看详情

htmldom第五篇

通过HTMLDOM,JavaScript能够访问HTML文档中的每个元素。HTMLDOM允许您在事件发生时执行代码。当HTML元素"有事情发生"时,浏览器就会生成事件:在元素上点击加载页面改变输入字段添加、删除和替换HTML元素HTMLDOM允许JavaScript对HTML事... 查看详情

web安全第五篇--其他注入的奇技淫巧:xml注入xpath注入json注入crlf注入

零、前言  最近做专心web安全有一段时间了,但是目测后面的活会有些复杂,涉及到更多的中间件、底层安全、漏洞研究与安全建设等越来越复杂的东东,所以在这里想写一个系列关于web安全基础以及一些讨巧的payload技巧以... 查看详情

深入理解javascript作用域系列第五篇

前面的话  对于执行环境(executioncontext)和作用域(scope)并不容易区分,甚至很多人认为它们就是一回事,只是高程和犀牛书关于作用域的两种不同翻译而已。但实际上,它们并不相同,却相互纠缠在一起。本文先用一张图开宗... 查看详情

java学习第五篇--java基础语法

1.Java关键字     定义:被Java语言赋予特定含义的单词     注意:goto和const是Java的保留字用于定义访问权限修饰符的关键字   private  protected  public用于定义类,函数,变量... 查看详情

前端工程师技能之photoshop巧用系列第五篇——雪碧图

 显示目录目录[1]定义[2]应用场景[3]合并[4]实现[5]维护前面的话  前面已经介绍过,描述性图片最终要合并为雪碧图。本文是photoshop巧用系列第五篇——雪碧图 定义  css雪碧图(sprite)是一种网页图片应用处理方式,它... 查看详情

#java学习之路——基础阶段二(第五篇)

我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容。前言:此随笔主要是J... 查看详情

前端三系列

阅读目录第一篇:HTML第二篇:CSS第三篇:JavaScript第四篇: jQuery第五篇:Bootstrap持续更新中...  查看详情

第五篇:路由网关(zuul)(代码片段)

在微服务架构中,需要几个基础的服务治理组件,包括服务注册与发现、服务消费、负载均衡、断路器、智能路由、配置管理等,由这几个基础组件相互协作,共同组建了一个简单的微服务系统。在SpringCloud微服务系统中,一种... 查看详情

dwr第五篇之文件上传

1. 在第一篇架构基础上进行2. 修改maven依赖1<dependencies>2<dependency>3<groupId>org.directwebremoting</groupId>4  <artifactId>dwr</artifactId>5  <version>3.0.1-RELE 查看详情

mysql从青铜到王者第五篇:mysql内置函数

系列文章目录文章目录系列文章目录前言一、日期函数1.获得年月日2.获得时分秒3.获得时间戳4.在日期的基础上加上时间5.在日期的基础上减去时间6.计算两个日期相差多少天7.当前日期时间date(now())8.date(datetime)返回datetime的参数... 查看详情

springcloud教程|第五篇:路由网关(zuul)(finchley版本)

在微服务架构中,需要几个基础的服务治理组件,包括服务注册与发现、服务消费、负载均衡、断路器、智能路由、配置管理等,由这几个基础组件相互协作,共同组建了一个简单的微服务系统。一个简答的微服务系统如下图:... 查看详情

web前端培训都有哪些课程

...端网站布局、响应式布局实战第二阶段JS高级程序设计:JavaScript核心技术-网站动效交互、JavaScript核心技术-网站前后端交互、jQuery交互效果开发第三阶段NodeJS前端架构及后台开发:版本控制工具、NodeJS核心技术第四阶段前端框架... 查看详情

web前端基础知识-javascript基本操作

JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后,可由所有的现代浏览器执行。JavaScript很容易学习。一、如何编写?1.JavaScript代码存在形式<!--方式一--><scripttype="text/javascript"... 查看详情

web前端基础知识-javascript基本操作

JavaScript是一种轻量级的编程语言。JavaScript是可插入HTML页面的编程代码。JavaScript插入HTML页面后,可由所有的现代浏览器执行。JavaScript很容易学习。一、如何编写?1.JavaScript代码存在形式<!--方式一--><scripttype="text/javascript"... 查看详情

如果要学习web前端开发,需要学习啥?

...L5进阶、CSS3进阶、Less  第二阶段JS交互设计:主要学习JavaScript核心语法、DOM和BOM、JavaScript高级进阶、面向对象编程、Touch、jQuery、Zepto  第三阶段Node开发:主要学习JavaScriptES6、Node、Express、MySQL、Webpack+Gulp+模块化、WebSocket+K... 查看详情

flask初识,第五篇,做一个用户登录之后查看学员信息的小例子

...学生的详细信息 后端: 相信写的代码才是最好的前端:login.html: 登录页面前端代码student_list.html: 一点儿也不难student.html 写不出来说明你没动脑子& 查看详情

第五篇:数据预处理-异常值处理

前言    数据中如果有某个值偏离该列其他值比较离谱,那么就有可能是一个异常的值。在数据预处理中,自然需要把这个异常值检测出来,然后剔除掉,或者光滑掉,或者其他各种方法进行处理。   &nb... 查看详情