一、 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变量的更多相关文章

  1. 详解js变量、作用域及内存

    详解js变量.作用域及内存 来源:伯乐在线 作者:trigkit4       原文出处: trigkit4    基本类型值有:undefined,NUll,Boolean,Number和Strin ...

  2. JS变量写到HTML页面中并修改变量值(前台处理数据序号问题)

    有时候我们在前台需要对序号进行处理,我们需要将JS变量写到页面中进行显示. 第一种方式:后台处理 第二种方式:JS中定义全局变量,然后进行显示,可以书写一个JS函数对不同的需要进行不同的替换,也就可以 ...

  3. js字符串转换为数字的三种方法。（转换函数）（强制类型转换）（利用js变量弱类型转换）

    js字符串转换为数字的三种方法.(转换函数)(强制类型转换)(利用js变量弱类型转换) 一.总结 js字符串转换为数字的三种方法(parseInt("1234blue"))(Num ...

  4. C++11特性——变量部分（using类型别名、constexpr常量表达式、auto类型推断、nullptr空指针等）

    #include <iostream> using namespace std; int main() { using cullptr = const unsigned long long ...

  5. js变量及其作用域（附例子及讲解）

    Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量   工具/原料   Ch ...

  6. javascirpt对象运用与JS变量

    abcdefghijklmnopqrstuvwyz String 对象方法 charAt() 方法可返回指定位置的字符.stringObject.charAt(index)(index从0开始)[ht ...

  7. js变量及其作用域

    Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量   一.js变量的类型及 ...

  8. JS变量和函数的一些理解

    今日看了下JS变量的一些文章,有些感触,把自己总结的一些写出来. JS初始化的过程1.JS解释器执行代码之前,创建全局变量2.用预定义的值和函数来初始化全局对象中的属性,3.搜索函数外的var声明,创 ...

  9. js变量在属性里的写法 常用mark 多个DL遍历添加一个父级DIV

    标记用 js变量比如url链接一般都是a里面的href属性值 在js里单引号链接 以后再忘记就能有地方找了 例子: /* 添加1200 居中div 包裹 获取元素集合 上层元素100% * @ele ...

  10. js 变量提升+方法提升

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. [剑指offer]25.合并两个排序的链表(迭代+递归)

    25.合并两个排序的链表 题目 输入两个递增排序的链表,合并这两个链表并使新链表中的节点仍然是递增排序的. 示例1: 输入:1->2->4, 1->3->4 输出:1-> ...

  2. Selenium系列（二） - 控制浏览器操作的详细解读

    如果你还不想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识 ...

  3. Flutter 实现不同样式(有样式) 的TextField (可自定义)，类似微博#话题#、@用户，（给TextField加TextSpan）

    描述 先上效果图 在项目中,有 @ 和 话题功能,需要在编辑时即可回显,但是官方原生的TextField不支持对部分文字定义不同的样式,所以封装了一个. 注意:这不是富文本插件,不支持在输入框中显示图 ...

  4. CTF_WriteUp_HTTP基本认证（Basic access authentication）

    HTTP基本认证 在HTTP中,基本认证(英语:Basic access authentication)是允许http用户代理(如:网页浏览器)在请求时,提供用户名和密码 的一种方式.HTTP基本认证 ...

  5. [Unity] Unity 2019.1.14f 在Terrain中使用Paint Texture的方法

    1.点击Terrain中的Paint Texture按钮2.将按钮下面的下拉菜单选择paint texture3.点击Edit Terrain Layers按钮T4.点击弹出菜单的Create Lay ...

  6. [ex-kmp] HDU 2019 Multi-University Training Contest 5-string matching

    string matching Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Others ...

  7. 《Java多线程编程实战指南（核心篇）》阅读笔记

    <Java多线程编程实战指南(核心篇)>阅读笔记 */--> <Java多线程编程实战指南(核心篇)>阅读笔记 Table of Contents 1. 线程概念 1.1 ...

  8. Unity 阴影淡入淡出效果中Shader常量 unity_ShadowFadeCenterAndType和_LightShadowData的问题

    由于Universal Render Pipeline目前(2020年4月1日)把阴影淡入淡出这个功能竟然给取消了…我自己拿片元位置到相机位置的距离进行了一个淡化,但是阴影边缘老是被裁切…后来研究了一 ...

  9. Java实现自定义数组及其方法

    自定义数组 主要功能有增.删(根据索引,根据值).改.查扩容等功能 package array; public class CustomArray { private int[] array = nu ...

  10. jQuery数组去重复

    例如: var yearArray = new Array("三二一", "三二一", "学历", "学历", &quo ...