首页 > 编程语言 > 详细

JavaScript

时间:2020-02-02 22:06:58      阅读:101      评论:0      收藏:0      [点我收藏+]

一、简介

JavaScript诞生于1995年,它的出现主要用于处理网页中的前端验证。当时,网速很慢而且上网费很贵,有些操作不宜在服务器端完成。比如,如果用户忘记填写“用户名”,就点了“发送”按钮,到服务器再发现这一点就有点太晚了,最好能在用户发出数据之前,就告诉用户“请填写xx栏”。这就需要在网页中嵌入小程序,让浏览器检查每一栏是否都填写了。

Javascript诞生记

JavaScript的诞生

技术分享图片

 

ECMAScript 是一个标准,而这个标准需要由各厂商去实现,不同浏览器厂商对该标准会有不同的实现:

技术分享图片

 

 一般认为ECMAScript和JavaScript一个意思,实际JavaScript的含义更大一些。

一个完整的JavaScript实现应该由以下三个部分构成:
技术分享图片

 

特点:

  • 解释型语言
  • 类似于C和Java的语法结构
  • 动态语言
  • 基于原型的面向对象

 

 二、基本语法

编写位置

1.标签内部,不推荐
2.script标签中
3.外部文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        
        <!--可以将js代码编写到外部js文件中,然后通过script标签引入
            写到外部文件中,可以在不同的页面同时引用,也可以利用到浏览器的缓存机制
        -->
        <script type="text/javascript" src="js/script.js">
            alert(hello) <!--一旦引入外部文件,这里的代码都被忽略,
            如果想写可以再创建新的script标签写
            -->        
        </script>
        <!--可以将js代码写在script标签中-->
        <script type="text/javascript">
            alert(我是script标签中的代码)
        </script> 
    </head>
    <body>
        <!--可以将js代码编写到标签的onclick属性中
        当我们点击按钮时,js代码才会执行
        
        虽然可以写在标签的属性中,但是结构与行为耦合,不方便维护,不推荐使用
        -->
        
        <button onclick="alert(‘讨厌,别点我‘)">点我</button>
        
        <!--
           可以将js代码写在超链接的href属性中,这样当点击超链接时,会执行js代码
        -->
        <a href="javascript:alert(‘汪汪‘)">点我</a>
        <a href="javascript:;">点我</a>
                
    </body>
</html>

 

严格区分大小写

 

注释

单行注释: // 这是注释

多行注释:/* 这是注释 */

 

标识符

在JS中所有可以自主命名的都可以称为标志符
例如:变量名、函数名、属性名

1.标志符中可以包括字母、数字、下划线和$
2.不能以数字开头
3.不能是ES中的关键字或保留字
4.标志符一般采用驼峰命名法
首字母小写,每个单词开头字母大写,其他小写 helloWorld

JS底层保存标志符式,实际采用的Unicode编码,所以,理论上所有的utf-8中含有的内容都可以作为标志符,如:

 var 变量 = 789; //千万别用

 

关键字和保留字

关键字

技术分享图片

 

 

保留字符

技术分享图片

 

 

其他不建议使用的标识符

技术分享图片

 

 

变量

变量的作用是给某个值或对象标注名称。

变量声明

使用var关键字

var a;

变量的赋值

a = 123;

声明和赋值同时进行

var a = 123;

 

数据类型

 数据类型决定了一个数据特征,对于不同的数据类型进行的操作会有很大不同。总体而言,JavaScript共有六种数据类型。

5种基本数据类型,首字母都大写:

  • String 字符串
  • Number 数值
  • Boolean 布尔值
  • Null 空值
  • Undefined 未定义

这5种之外的类型都称为Object。

typeof运算符

使用typeof操作符可以用来检查一个变量的数据类型

使用方式:typeof 数据

返回结果:

技术分享图片

 

String

String用于表示一个字符序列,即字符串。字符串需要使用‘或"括起来。转义字符:

技术分享图片

 

 将其他数值转换为字符串有三种方式:toString()、String()、拼串。

Number

Number 类型用来表示整数和浮点,最常用的功能就是用来表示 10 进制的整数和浮点数。

Number表示的数字大小是有限的,范围是:

技术分享图片

NaN,即非数值(Not a Number)是一个特殊的数值,当数值进行计算时没有结果返回,则返回NaN。

数值的转换

有三个函数可以把非数值转换为数值:Number()、parseInt()和parseFloat()。

Number()可以用来转换任意类型的数据,而后两者只能用于转换字符串。

parseInt()只会将字符串转换为整数,而parseFloat()可以转换为浮点数。

Boolean

布尔型也被称为逻辑值类型或真假类型。布尔型只能够取真(true)和假(false)两种数值。除此以外其他的值都不被支持。

其他的数据类型也可以通过Boolean()函数转换为布尔类型。

转换规则:

技术分享图片

Undefined

Undefined类型只有一个值,即特殊的undefined。

使用var声明变量但未对其初始化时,这个变量的值就是undefined。如:

var message;

message的值就是undefined。

typeof对没有初始化和没有声明的变量都会反变换undefined。

Null

是第二个只有一个值的数据类型,这个特殊的值是null。

从语义上看null表示的是一个空对象,所以使用typeof检查null返回一个Object。

undefined值实际上是由null值衍生出来的,所以如果比较undefined和null是否相等,会返回true。

 

运算符

JavaScript中的运算符包括:算数运算符、位运算符、关系运算符等。

算术运算符

技术分享图片

 

自增和自减

自增++ 自减--

自增和自减分为前置运算和后置运算,所谓的前置元素就是将元素符放到变量的前边,而后置将元素符放到变量的后边。

    var a=3;
    var b=++a;

b的值为4

    var a=3;
    var b=a++;

b的值为3

逻辑操作符

一般情况下使用逻辑运算符会返回一个布尔值。逻辑运算符主要有三个:非、与、或。

在进行逻辑操作时如果操作数不是布尔类型则会将其转为布尔类型再进行计算。

技术分享图片

 

赋值运算符

简单的赋值操作符由=表示,如果再等号左边添加加减乘除等运算符就可以完成复合赋值操作:+=、*=、-+、/=、%=。

关系运算符

<、>、<=、>=

相等

==、!=

null和undefined使用==判断时是相等的

全等

===、!===

== 在判断两个值时会进行自动转换,===不会进行自动转换。

逗号

使用逗号可以在一条语句中执行多次操作,从左到右依次执行。

var num1=1, num2=2, num3=3;

条件运算符

也称为三元运算符,通常写为 ?: 。需要三个操作数,第一在?之前,第二个在?和:之间,第三个在:之后。

运算符的优先级

技术分享图片

语句

语句是一个程序的基本单位,JavaScript的程序就是由一条一条语句构成的,每一条语句使用;结尾。默认是由上至下顺序执行的,也可以通过一些流程控制语句来控制语句的执行。

 

代码块

代码块是在大括号{}中所写的语句,以此将多条语句的集合视为一条语句来使用。

 

条件语句

通过判断指定表达式的值来决定执行还是跳过某些语句。

if...else

switch...case

 

循环语句

while

do...while

for

break

continue

 

label语句

在代码中添加标签,以便将来使用。

 

三、对象

基本数据类型的局限?

JS的基本数据类型有Number、String、Boolean、Null和Undefined,这些基本数据类型是有局限的:

都是单一的值,值和值之间没有联系,如在JS中表示一个人的信息(name gender age)

var name = "孙悟空";
var gender = "男";
var age = 18;

如果使用基本数据类型,所创建的变量都是独立的,不能成为一个整体。对象属于一种复合的数据类型,在对象中可以保存多个不同的数据类型的属性。

于是,我们需要引用数据类型。

Object类型,也称为一个对象,是JS中的引用数据类型,只要不是基本数据类型的都是对象。它是一种复合值,将很多值聚合在一起,可以通过名字访问这些值。
对象除了可以创建自有属性,还可以通过从一个名为原型的对象哪里继承属性。

引用类型的值是保存在内存中的对象。当一个变量是一个对象时,实际上变量中保存的并不是对象本身,而是对象的引用。当从一个变量向另一个变量复制引用类型的值时,会将对象的引用复制到变量中,并不是创建一个新的对象。此时,两个变量指向的是同一个对象。因此,改变其中一个变量会影响另一个。

 

创建对象

两种方式:

第一种

var person = new Object();
person.name = "孙悟空";
person.age = 18;

第二种

var person = {
    name: "孙悟空",
    age: 18
};

 

对象属性的访问

语法:对象.属性名

console.log(obj.name);

 

如果读取对象中没有的属性,返回Undefined

 

修改对象的属性值
语法:对象.属性名= 新值

 

删除对象的属性
语法:delete 对象.属性名

 

使用 [‘属性名‘] 操作属性,更加灵活
JS对象的属性值可以是任意数据类型,甚至可以是一个对象

var obj = new Object();
obj.test = true;
var obj2 = new Object();
obj2.name = "猪八戒";
obj.test = obj2;

in运算符
通过该运算符可以检查一个对象是否含有指定的属性
如果有则返回true,没有则返回false
语法:“属性名” in 对象

//检查obj中是否含有test2属性
console.log("test2" in obj)

 

基本数据类型和引用数据类型的区别

var a = 1;
var b = a;
var a = 2;
//b的值不会变
var obj = new Object();
obj.name = "孙悟空";
var obj2 = obj;
//修改obj的name属性
obj.name = "猪八戒";
//obj2的name也变为猪八戒

JS在运行时数据是保存到栈内存和堆内存中的。

简单来说,栈内存用来保存变量和基本数据类型。堆内存用来保存对象。
基本数据类型的值直接在栈内存中存储,值与值之间是独立存在的,修改一个变量不会影响其他变量。

声明一个变量时实际上就是在内存中创建了一个空间用来保存变量,如果是基本类型则在栈内存中直接保存。如果是引用类型则会在堆内存中保存,变量中保存的实际上是对象在堆内存中的地址。

基本数据类型保存在栈内存中

技术分享图片

 对象保存在堆内存中

JS的变每创建一个新对象,就会在堆内存中开辟一个新的空间,而变量保存的是对象的内存地址(对象的引用)。如果两个变量保存的是同一个对象引用,当一个通过一个变量修改属性时,另一个也受影响。

技术分享图片

obj2 = null;

技术分享图片

当比较两个基本数据类型的值时,就是比较值。
而比较两个引用数据类型时,它是比较对象的内存地址,如果两个对象是一模一样的,地址不同也会返回false。

技术分享图片

 

 对象字面量

使用对象字面量创建对象

var obj = {};
obj.name = "swk";

使用对象字面量,可以在创建对象时,直接指定对象中的属性
属性名可以加引号,也可以不加,建议不加
一些特殊的名字要加
属性名和属性值是一组的名值对结构,名和值之间使用:连接,多个名值对之间使用,隔开
如果一个属性之后没有其他的属性,就不要写逗号(,)

var obj2 = {
    name:‘swk‘, 
    age:28,
    test:{name:‘shs‘}
};

 

 工厂方式创建对象

 重复创建对象很麻烦:

var obj = {
    name:"swk",
    age:18,
    gender:"male",
    sayName:function(){
        alert(this.name);
    }
};

var obj2 = {
    name:"zbj",
    age:18,
    gender:"male",
    sayName:function(){
        alert(this.name);
    }
};

var obj3 = {
    name:"shs",
    age:18,
    gender:"male",
    sayName:function(){
        alert(this.name);
    }
};

使用工厂方法创建对象:

function createPerson(){
    //创建一个新对象
    var obj = new Object();
    //向对象中添加属性
    obj.name=name;
    obj.age=age;
    obj.gender=gender;
    obj.sayName=function(){
        alert(this.name);
    }
    return obj;
}

 

Date对象

表示时间
如果直接使用构造函数创建一个Data对象,则会封装为当前代码执行的时间

var d = new Date(); //创建对象
console.log(d); //打印当前时间

技术分享图片

 

 

创建一个指定的时间对象
需要在构造函数中传递一个表示时间的字符串作为参数
日期的格式 月份/日/年 时:分:秒

var d2 = new Date("12/03/2016 11:10:30");

 

getDate()获取当前日期对象是几日
getDay()获取当前日期对象是一周中的某一天,即周几,1-6,周日是0
getMonth()获取月份,会返回0-11的值,0表示1月,11表示12月,用时表示正常月份可以加1
getFullYear()获取年份

getTime()获取当前日期对象的时间戳,从格林威治标准时间1970年1月1日,0时0分0秒,
到当前的毫秒数(1秒=1000毫秒)

Date.time() 获取当前的时间,返回该代码执行时的时间

 

Math对象

Math和其他对象不同,不是构造函数,它属于一个工具类,不用创建对象
里面封装了数学运算相关的属性和方法

var m = new Math()会报错
Math.PI 圆周率
Math.E 自然对数的底数
...
abs()
ceil()向上取整
floor()向下取整
round()四舍五入
random()生成0-1之间的随机数
Math.random()*(y-x)+x生成x-y之间随机数
max()
min()
pow()

 

四、数组

 

 

五、函数

 

 

六、DOM

 

七、事件

 

八、BOM

 

JavaScript

原文:https://www.cnblogs.com/aidata/p/12250807.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!