一、 JavaScript 是什么

JavaScript是一种运行在客户端（浏览器）的脚本语言

客户端：客户端是相对于服务器而言的，在这里先简单理解为浏览器

浏览器就是一个客户端软件，浏览器从服务器上将资源（html,css,js,图片等）请求下来并且在本地利用浏览器去解析这些资源

服务器本质上也是一台电脑。用来接收客户端发过来的请求，并处理请求。同时存储数据读取数据等操作

脚本语言：不需要编译读取一句解析一句一句报错下一句不会继续执行

执行过程：源代码 - 预解析 - 运行

编译语言：需要编译编译一旦出错整个程序都不会运行

执行过程：源代码 - 编译后的字节码文件 - 运行

二、 JavaScript 历史

Nombas与ScriptEase

大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言,并将这个脚本语言捆绑在一个可以嵌入到浏览的2的共享软件中，代表了第一个在万维网上使用的客户端语言。后来由于mm听起来比较消极，Nombas又将Cmm的名字修改为ScriptEase.虽然Nombas如今在互联网行业已经销声匿迹，但是它的理念却成为因特网的一块重要基石。

Netscape与JavaScript

当网上冲浪越来越流行时，对于开发客户端脚本的需求也逐渐增大。那时，大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络，即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次地往返交互。设想一下，用户填完一个表单，点击提交按钮，等待了 30 秒的处理后，看到的却是一条告诉你忘记填写一个必要的字段。

为了解决这一问题，NetScape公司的 Brendan Eich 开始为即将在1995年发行的 Netscape Navigator 2.0浏览器开发一款名为LiveScript的脚本语言，最终NetScript与Sun公司合作完成了LiveScript,并且将这种语言命名为JavaScript.

微软与JScript

在JavaScript 1.1 版本发布时，微软公司也决定进军浏览器行业。微软公司在推出的IE 3.0上搭载了一个JavaScript的克隆版，并且命名为JScript.

ECMAScript

在微软进入后，有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase.和其他编译语言不同的是，JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。

1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）.ECMA指派由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的第 39 技术委员会(TC39) 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。

总结：Javascript是ECMAscript的一个实现并且在此基础上扩展了DOM和BOM

三、 JavaScript 的组成

ECMAscript： JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关
DOM：（document object model 文档对象模型）一套操作页面元素的API
BOM：（browser object model 浏览器对象模型）一套操作浏览器功能的API

四、 JavaScript 的写入方式

1.行内式

<div onclick="alert('行内引入')">点我试试</div>

2. 内嵌式

<body>

    <div>点我试试</div>

    <script>

        alert('试试就试试');

    </script>

</body>

3. 外链式

<script src="./03.外链式.js"></script>

注意：当一个script标签已经作为引入标签时，里面放入任何值，都是无效的。

内嵌式和外链式js文件写在哪里都会生效，但是一般都将js文件写在body的末尾。

五、 JavaScript 的输出语句

    <div onclick="alert('警示框')">弹出警示框</div>

    <div onclick="prompt('输入框')">弹出输入框</div>

    <div onclick="console.log('只能在控制台看到')">控制台看到</div>

    <div onclick="confirm('用户选择框')">用户选择确定或取消</div>

    <script>

        document.write('<h1>在html页面中打印东西，可以解析html标签</h1>');

    </script>

alert:弹出框，会阻断下面代码的执行

console.log：控制台输出

prompt：用户可以输入内容，点击取消返回null

confirm：点击确认返回true，点击取消返回false

document.write：可以在页面中打印元素，还可以写入html标签

六、 JavaScript 的变量

1.变量的声明和赋值

    <script>

        // 定义变量

        var age;

        // 给变量赋值

        age = 23;

        // 输出变量

        alert(age);

        // 变量初始化：定义变量时同时复制

        var myName = '小艾同学';

        alert(myName);

        // 更新变量

        var address = 'www.baidu.com';

        var address = 'www.sougou.com';

        // 下面的变量会层叠掉上面的变量

        alert(address);

        // 同时声明和输出多个变量

        var age = 18, name = '小艾同学', sex = 2;

        alert(age + name + sex);

    </script>

1.1 变量的声明和赋值特殊情况

    <script>

        // 只声明，不赋值

        // var age;

        // console.log(age);//undefined，未定义的

        // 不声明，不赋值，直接使用

        // console.log(sex);//报错sex is not defined

        //不声明，只赋值

        address = 66;

        console.log(address);

    </script>

2.变量的数据类型

2.1 基本数据类型

number数据类型：所有的数字都是number类型，特殊值：NaN not a number 不是一个数字。

String数据类型：所有用引号包裹的都是字符串

boolean数据类型：false，true

undefined数据类型：未定义，未赋值

null数据类型：空

2.2 引用数据类型

object对象

array数组

function函数

2.3 区别

1.基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问。

2.引用类型是存放在堆内存中的对象，变量其实是保存的在栈内存中的一个指针（保存的是堆内存中的引用地址），这个指针指向堆内存。

引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象

3.基本数据类型从一个变量向一个变量复制时，会在栈中创建一个新值，然后把值复制到为新变量分配的位置上，改变源数据不会影响到新的变量（互不干涉）

4.引用类型复制的是存储在栈中的指针，将指针复制到栈中为新变量分配的空间中，而这个指针副本和原指针执行存储在堆中的同一个对象，复制操作结束后，两个变量实际上将引用同一个对象；因此改变其中的一个，将影响另一个；

3.数据交换案例

    <script>

        var num1 = 100;

        var num2 = 200;

        // 使num1与num2互换值

        // 建立一个临时变量，将num1复制一份赋值给temp

        var temp = num1;

        // 将num2复制一份赋值给num1

        num1 = num2;

        // 最后把temp的复制一份值赋值给num2

        num2 = temp;

        console.log('num1:' + num1);

        console.log('num2:' + num2);

    </script>

        var num3 = 10;

        var num4 = 20;

        num3 = num3 + num4;//num3 = 10 + 20

        num4 = num3 - num4;//num4 = 10 + 20 - 20 = 10

        num3 = num3 - num4;//num3 = 10 + 20 - 10 = 20

        console.log('num3:' + num3);

        console.log('num4:' + num4);

11-JS变量的更多相关文章

详解js变量、作用域及内存
详解js变量.作用域及内存来源:伯乐在线作者:trigkit4 原文出处: trigkit4 基本类型值有:undefined,NUll,Boolean,Number和Strin ...
JS变量写到HTML页面中并修改变量值(前台处理数据序号问题)
有时候我们在前台需要对序号进行处理,我们需要将JS变量写到页面中进行显示. 第一种方式:后台处理第二种方式:JS中定义全局变量,然后进行显示,可以书写一个JS函数对不同的需要进行不同的替换,也就可以 ...
js字符串转换为数字的三种方法。（转换函数）（强制类型转换）（利用js变量弱类型转换）
js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...
C++11特性——变量部分（using类型别名、constexpr常量表达式、auto类型推断、nullptr空指针等）
#include <iostream> using namespace std; int main() { using cullptr = const unsigned long long ...
js变量及其作用域（附例子及讲解）
Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量工具/原料 Ch ...
javascirpt对象运用与JS变量
abcdefghijklmnopqrstuvwyz String 对象方法 charAt() 方法可返回指定位置的字符.stringObject.charAt(index)(index从0开始)[ht ...
js变量及其作用域
Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量一.js变量的类型及 ...
JS变量和函数的一些理解
今日看了下JS变量的一些文章,有些感触,把自己总结的一些写出来. JS初始化的过程1.JS解释器执行代码之前,创建全局变量2.用预定义的值和函数来初始化全局对象中的属性,3.搜索函数外的var声明,创 ...
js变量在属性里的写法常用mark 多个DL遍历添加一个父级DIV
标记用 js变量比如url链接一般都是a里面的href属性值在js里单引号链接以后再忘记就能有地方找了例子: /* 添加1200 居中div 包裹获取元素集合上层元素100% * @ele ...
js 变量提升+方法提升
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

Journal of Proteome Research | Clinically Applicable Deep Learning Algorithm Using Quantitative Proteomic Data (分享人：翁海玉)
题目:Clinically Applicable Deep Learning Algorithm Using Quantitative Proteomic Data 期刊:Journal of Pro ...
Python编写“去除字符串中所有空格”
#利用迭代操作,实现一个trim()函数,去除字符串中所有空格 def trim(str): newstr = '' for ch in str: #遍历每一个字符串 if ch!=' ': news ...
rest_framework序列化，反序列化
序列化组件 from rest_framework.response import Response1.Response本质也是继承了httpresponse,比httpResponse还强大,传入一 ...
两个看似相同，结果不同的SQL逻辑
一朋友问我的,看着挺有意思,记录一下: 表item1,里面有上面三个字段,一共10条数据,接下来有两个相似的sql语句得到了不一样的查询结果. 表数据如下: 两条SQL及查询结果: 我的理解答: S ...
Building Applications with Force.com and VisualForce (DEV401) （二三）：Visualforce Componets (Tags) Library Part III
Dev401-024:Visualforce Pages: Visualforce Componets (Tags) Library Part IIIStatic Resources1.Static ...
TensorFlow系列专题（五）：BP算法原理
欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/ ,学习更多的机器学习.深度学习的知识! 一．反向传播算法简介二．前馈计算的过程第一层隐藏层的计算第 ...
coding++：java操作 FastDFS（上传 | 下载 | 删除）
开发工具 IDEAL2017 Springboot 1.5.21.RELEASE --------------------------------------------------------- ...
iOS 内置图片瘦身
一.iOS 内置资源的集中方式 1.1 将图片存放在 bundle 这是一种很常见的方式,项目中各类文件分类放在各个 bundle 下,项目既整洁又能达到隔离资源的目的.采用 bundle 的加载方式 ...
使用jdbc实现简单的mvc模式的增删改查
Mvc模式设计: 视图:添加界面(addUser.jsp),修改界面(updateUser.jsp),显示页面(allUser.jsp) 控制器:添加信息控制器(AddUserServlet),修改信 ...
EEPROM存储芯片24C02
1.24C02简介 24C02是一个2Kbit的串行EEPROM存储芯片,可存储256个字节数据.工作电压范围为1.8V到6.0V,具有低功耗CMOS技术,自定时擦写周期,1000000次编程/擦除周 ...

11-JS变量