一、 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 ...

随机推荐

python浅学【网络服务中间件】之Redis
一.关于NoSQL: NoSQL(NoSQL = Not Only SQL ),"不仅仅是SQL". 相比MySQL等关系型数据库,NoSQL为非关系型的数据存储 Nosql中比较 ...
CF1326A Bad Ugly Numbers 题解
原题链接简要题意: 构造一个长为 \(n\) 的数,使得每位均不为 \(0\),且 \(n\) 不被它的各位数字整除. 比方说, \(n = 239\) 是合法的.因为: \(2 \not | 23 ...
利用 MinIO 轻松搭建静态资源服务
目录 1 引言 2 MinIO 简介 3 MinIO 运行与静态资源使用 3.1 MinIO 获取 3.2 MinIO 启动与运行 3.2.1 前台简单启动 3.2.2 后台指定参数运行 3.2.3 ...
java物流查询接口测试代码-快递100
测试代码返回json格式,xml/html格式自行修改参数 import java.io.IOException; import java.io.InputStream; import java.n ...
python之目录
一.python基础 python之字符串str操作方法 python之int (整型) python之bool (布尔值) python之str (字符型) python之ran ...
Selenium系列（十四） - Web UI 自动化基础实战（1）
如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...
JavaScript中去除字符串空格的方法
语法 string.trim() 参数值无返回值类型:string 描述:返回移除头尾空格的字符串技术细节 JavaScript版本: ECMAScript 5 去除字符串左右两端的空格,在v ...
API开放平台接口设计-------基于OAuth2.0协议方式
1,简介OAuth http://www.ruanyifeng.com/blog/2019/04/oauth_design.html OAuth 是什么? http://www.ruanyifeng. ...
Word文档转html并提取标题
最近做了一个功能,需要将word文档转化成html的格式,并提取出标题生成导航.考虑到功能的复杂程度,将需要降低为对“标题1”这种格式进行提取. docx为后缀的文档(word2007)支持XML的文 ...
RuntimeError: Exception thrown in SimpleITK ReadImage: /tmp/SimpleITK/Code/IO/src/sitkImageReaderBase.cxx:107: sitk::ERROR: Unable to determine ImageIO reader for "./data/.train.txt.swp"问题解决
原因:产生此类错误是因为SimpleITK不能读取ubuntu中的隐藏文件,比如".train.txt.swp",因为此类文件是隐藏文件另外SimpleITK不支持读取此类文件. ...

11-JS变量