js教程–从入门到精通 第一篇 js的前世今生以及js中基本数据类型和引入方式

1、Javascript前世今生

   1.1、什么是Javascript

      Javascript运行于Javascript 【解释器/引擎】中的解释性脚本语言

      Javascript运行环境:

      1、Javascript解释器 :NodeJS

      2、嵌入在浏览器中的内核(引擎)    1.2、Javascript 发展

      1、1992年 Nombas公司 开发了一款脚本语言 ScriptEase ,可以嵌入在网页中

  大概在 1992 年,一家称作 Nombas 的公司开发了一种叫做 C 减减(C-minus-minus,简称 Cmm)的嵌入式脚本语言。Cmm 背后的理念很简单:一个足够强大可以替代宏操作(macro)的脚本语言,同时保持与 C (和 C ++)足够的相似性,以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中,它首次向开发人员展示了这种语言的威力。

         Nombas 最终把 Cmm 的名字改成了 ScriptEase,原因是后面的部分(mm)听起来过于消极,同时字母 C “令人害怕”。

         现在 ScriptEase 已经成为了 Nombas 产品背后的主要驱动力。

      2、1995年 Netscape[neitskeip]公司(美国Netscape公司,以开发Internet浏览器闻名) 为 [?n?v?ge?t?(r)]Navigator2.0浏览器开发了一款脚本语言 LiveScript ,

         为了赶时髦 将其命名为 Javascript。Javascript与Java没有一点关系

      3、1996年,Microsoft[maikrisouft] ,为了IE3.0,发布了一个Javascript克隆版本 JScript

      4、1997年 Javascript1.1 作为草案提交给了 ECMA(欧洲计算机制造商协会)

         --> ECMA-262标准 -->ECMAScript

    1.3  Javascript (JS)的组成:

   1、核心(ECMAScript, ES)

          2、文档对象模型(DOM,Document Object Model) 一套操作页面元素的API

             DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作

          3、浏览器对象模型(BOM,Borowser Object Model) 弹出框、控制浏览器跳转、获取分辨率等 一套操作浏览器功能的API.     1.4  Javascript特点

         1、任何编辑工具都可以编写Javascript,语法类似于Java,C,...

         2、无需编译

         3、弱类型语言

          由值来决定数据类型   强数据类型:由数据类型 决定值

    1.5 基于对象的编程语言

         万物皆对象

 

     

    1.6 Javascript的用途

         JavaScript的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

  最初的目的是为了处理表单的验证操作。  ### JavaScript现在的意义(应用场景)  JavaScript 发展到现在几乎无所不能。  1. 网页特效 客户端数据计算 表单验证 非空验证 数据范围验证 浏览器事件的触发和处理 

 2. 服务端开发(Node.js) 服务器的异步数据提交(ajax)

 3. 命令行工具(Node.js)

 4. 桌面程序(Electron)

 5. App(Cordova)

 6. 控制硬件-物联网(Ruff)

 7. 游戏开发(cocos2d-js)

    JavaScript和HTML、CSS的区别  1. HTML:提供网页的结构,提供网页中的内容

 2. CSS: 用来美化网页

 3. JavaScript: 可以用来控制网页内容,给网页增加动态的效果

2、使用javaScript

   2.1 浏览器说明

 浏览器是指可以显示网页服务器或者文件系统的HTML文件内容,并让用户与这些文件交互的一种软件。

 通俗的讲:可以显示页面的一个软件,

 国内网民计算机上常见的网页浏览器有,QQ浏览器、Internet Explorer、Firefox、Safari,Opera、Google Chrome、百度浏览器、搜狗浏览器、猎豹浏览器、360浏览器、UC浏览器、傲游浏览器、世界之窗浏览器等,浏览器是最经常使用到的客户端程序。

 常用的五大浏览器:chrome,firefox,Safari,ie,opera

 我们用chrome(谷歌浏览器)

   2.2、JavaScript初体验(JavaScript的书写位置)

        CSS:行内样式、嵌入样式、外部样式

       A:写在行内

  <input type="button" value="按钮" onclick="alert(‘Hello World‘)" />

       B:写在script标签中

  <head>

    <script>

      alert(‘Hello World!‘);

    </script>

  </head>

      C: 写在外部js文件中,在页面引入

 <script src="main.js"></script>

      注意点

         引用外部js文件的script标签中不可以写JavaScript代码

   2.3语句

      被Javascript引擎所解释执行的一句代码

      组成:

           表达式、关键字、运算符

    运算符:+,-,*,/,%,> ....

    表达式:由一个或多个运算符以及一个或多个操作数组成的。 如:1+2,

      特点:以分号表示结束

            console.log();

     document.write();

     window.alert();

      习惯:一行只写一条语句

      注意:严格区分大小写

            console.log();

     console.Log();

   2.4、注释

         单行注释://

  多行注释:/* */

     /*

          /*

  

   */

    

     */      /*

     console.log();

     /*window.alert();

     document.write()*/

     console.log();*/

3、变量

   内存 : 临时性保存据算计程序在【运行过程中】要用到的数据。

   TB->GB->MB->KB->B->bit

   8bit = 1B

   1024B=1kb

   Javascript

   硬盘 : 永久性保存数据

   0x000000000000000000a13247aaccxx

   3.1、什么是变量

      就是内存中的一段空间,用于保存程序运行过程中要用到的数据。就是存储数据的容器。

   3.2、为什么要使用变量

      使用变量可以方便的获取或者修改内存中的数据

   3.3、什么是变量名

      内存空间的一个别名,为了方便记忆。即变量的名字。

   3.4、如何使用变量 到内存中开辟一段空间用于保存数据

       语法:var 声明变量

             var age;

      变量的赋值

          将数据保存进变量

             运算符:=   赋值运算符

      语法:

      变量名=值;

 var name;

      name="张无忌";    

  

        初始化:声明变量并赋值

     var 变量名称=值;  注意:没有被赋值的变量自动取值为undefined  var name;

 var age;

 var hobby;

 一条语句中声明多个变量:

 var name,age,hobby;

 var name="张三丰",age=30;

     3.5、变量名命名规范

         1、要求

     1、不允许使用关键字以及保留关键字命名

        标准关键字:

        eg : var , function , if , for ,true,false ...

        保留关键字:

        class,int,float,double ... ...

  2、命名规范

     a、可以包含字母、数字、下划线 _、$

     b、不能以数字开头

        var name;

        var name1;

        var 1name;错误

     c、不允许重复

     d、尽量见名知意

        var name;

        var age;         var a,b,c,d,....aa,ab,ac,ad;

        var xingming,nianling;

     e、推荐采用

          匈牙利命名法

       控件缩写+功能

       txtName

       rdoGender

       chkHobby

       selCity

   下划线命名法

       _功能名称

       _name;

       _age;

   驼峰命名法

     如果变量名称由多个单词组成,第一个单词全部小写,第二个单词开始,首字符变大小

     userName

     txtusernmae --> txtUserName

    下面哪些变量名不合法   ```

   a    

   1

    age18

    18age

    name

   $name

   _sex

   &sex

    theworld  theWorld

      3.6、变量使用注意问题

         1、未初始化变量的使用

     只定义未赋值,值为undefined

     未定义,使用,错误,not defined

  2、在可能的情况下,声明变量时尽量初始化

     var age=10;

     var name="张三";

     var isHappy=true;

  3、将变量的声明和赋值分开操作

     var name;

     var age;

     name="";

     age=18;

  4、对变量进行的存取操作

     1、设置变量的值(赋值,存)

         =

  var name="张三丰";//张三丰

  name="张无忌";//张无忌

  name+="殷素素";//张无忌殷素素

  name = name + "张翠山";//张无忌殷素素张翠山   name = name+""; ==> name+="";

  特殊:

     var i=10;

     i++;

     ++i; ==> i=i+1;

  注意:赋值时,=的左边一定是变量

     2、获取变量的值(取值)

         var uname="张无忌";

  console.log(uname);   var newName = uname;

  uname : 取值操作(=右边使用)

  newName : 赋值操作(=左边使用)

4、运算符 

   1、算数运算符

      +,-,*,/,%

      %:取余(模),计算两个数字相除后的余数

        5%2 结果为 1

 3%5 结果为 3  常用场合:

    1、获取数字的最后一位

       1234

       1234%10=123 ... 4

       1234%100 = 12 ... 34

     

    2、判断奇偶性 或 判断 是某数字的倍数

       58 % 2 结果是否为 0?

       78 是 3的倍数吗??

       78 % 3 结果是否为 0 ?

 + :

    1、求和:数字类型的数值求和

    2、"" 与 +联用 ,作用是追加

       "张无忌" + 123 结果为:张无忌123

       123 + "张无忌" 结果为:123张无忌        12+25 结果为:37        "12"+25 结果为:1225

       ‘12‘+25 结果为:1225

 注意:由算数运算符 与 操作数 组成的表达式,称为 算数表达式

5、数据类型

   1、什么是数据类型

      保存在内存中的数据的类型,根据不同的类型内存中所开辟的空间也不一样

   2、数据类型

      1、原始类型 (基本类型)

         1、number 类型

     数字

     可以表示 32 位 (4字节)的整数,或64位(8字节)的浮点数

     浮点数:小数      var age;

     age=12; //number

     age=24.5;//number   2、string 类型

     字符串

     一系列的文本数据

     注意:赋值时,必须使用 " " 或 ‘ ‘ 扩起

     var name="张三丰";//string

     var age = "12"; //string      特殊字符,可以通过转移字符实现

     "Hello World"

     console.log(""Hello World"");错误

     \ 作为开始

       \" : 表示一个 "

       \‘ : ‘

       \n : 换行

       \t : 制表符

       \\ : \

 

       console.log("Hello World");

  3、boolean 类型

     布尔

     只表示 肯定(真)  或  否定(假)的数据

     值:true(真) 和 false(假)

     使用场合:作为程序的条件(判断、循环)

     在与 number 类型做运算时,true=1,false=0

  4、null 类型

     空

  5、undefined 类型

     未定义

     表示 不存在的数据

      2、引用类型

         Object

  Number

  Boolean

  String

  Date

  ...

相关文章