JavaScript（JS）基本语法（一）

时间：2022-12-11 11:46:29

https://www.cnblogs.com/haiyan123/p/7577598.html

一、JavaScript的历史

  • 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)

  • Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript

  • 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.

  • 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.

二、ECMAScript  

尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：

  • 核心（ECMAScript）
  • 文档对象模型（DOM） Document object model (整合js，css，html)
  • 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
  • Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.

　　JavaScript（JS）基本语法（一）

简单地说，ECMAScript 描述了以下内容：

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 运算符
  • 对象 (封装 继承 多态) 基于对象的语言.使用对象

三、JavaScript基础

1.JS的引入方式

1 直接编写

    <script>

        alert('hello yuan')

    </script>

2 导入文件

    <script src="hello.js"></script>
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

</head>

<body>

<script>

    alert(666);

    console.log('hello javascript');

</script>

</body>

</html>

2.JS的变量、

　1.声明变量时不用声明变量类型，全部使用var关键字

var a;<br>a=3;

　2.一行可以声明多个变量.并且可以是不同类型

var name="yuan", age=20, job="lecturer";

　3.一行可以声明多个变量.并且可以是不同类型

　4.变量命名,首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写，x与X是两个变量　

Camel 标记法

首字母是小写的，接下来的字母都以大写字符开头。例如：

var myTestValue = 0, mySecondValue = "hi";

Pascal 标记法

首字母是大写的，接下来的字母都以大写字符开头。例如：

Var MyTestValue = 0, MySecondValue = "hi";

匈牙利类型标记法

在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“

Var iMyTestValue = 0, sMySecondValue = "hi";

3.常量和标识符

常量 ：直接在程序中出现的数据值

标识符：

  1. 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
  2. 常用于表示函数、变量等的名称
  3. 例如：_abc,$abc,abc,abc123是标识符，而1abc不是
  4. JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符

关键字：

JavaScript（JS）基本语法（一）

JavaScript（JS）基本语法（一）

4.JS的数据类型

数据类型有：

number     -----  数值

boolean    -----  布尔值

string     -----  字符串

undefined  -----  undefined

null       -----   null

JavaScript（JS）基本语法（一）

字符串类型（string）:

是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；
字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 \':单引号 \":双引号 \\:右划线

 布尔类型（bolean）:

Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false
Boolean值主要用于JavaScript的控制语句，例如：

Null 和 Undefined类型

Undefined类型

1.Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。

2.当函数无明确返回值时，返回的也是值 "undefined";

Null类型

另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。

尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。

四、运算符

运算符分类

算术运算符：

    +   -    *    /     %       ++        -- 

比较运算符：

    >   >=   <    <=    !=    ==    ===   !==

逻辑运算符：

     &&   ||   ！

赋值运算符：

    =  +=   -=  *=   /=

字符串运算符：

    +  连接，两边操作数有一个或两个是字符串就做连接运算

算术运算符：自增，自减

++i:先计算后赋值

i++：先赋值后计算

js是一门弱类型语言

能够进行数据转换的叫做弱类型

console.log('1'==1)  //True

console.log('1'===1)  //False
静态类型语言

一种在编译期间就确定数据类型的语言。大多数静态类型语言是通过要求在使用任一变量之前声明其数据类型来保证这一点的。Java 和 C 是静态类型语言。

动态类型语言

一种在运行期间才去确定数据类型的语言，与静态类型相反。VBScript 和 Python 是动态类型的，因为它们确定一个变量的类型是在您第一次给它赋值的时候。

强类型语言

一种总是强制类型定义的语言。Java 和 Python 是强制类型定义的。您有一个整数，如果不明确地进行转换 ，不能将把它当成一个字符串去应用。

弱类型语言

一种类型可以被忽略的语言，与强类型相反。JS 是弱类型的。在JS中，可以将字符串 '12' 和整数 3 进行连接得到字符串'123'，然后可以把它看成整数 123 ，所有这些都不需要任何的显示转换。

所以说 Python 既是动态类型语言 (因为它不使用显示数据类型声明)，又是强类型语言 (因为只要一个变量获得了一个数据类型，它实际上就一直是这个类型了)。

NaN

    var d = "hello";

    d += d;

    alert(d);// hellohello

    alert(typeof(d)); // string

    var n = NaN;

    alert(n>3); // false

    alert(n<);// false

    alert(n==3); // false

    alert(n==NaN); // false

    alert(n!=NaN); // true NaN参与的所有的运算都是false,除了!=

 比较运算符

>   >=   <    <=    !=    ==    ===   !==

等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同，只是它们在检查相等性前，不执行类型转换。

  console.log(2==2); //true

  console.log(2=='2'); //true  因为js是弱类型的，所以返回true

  console.log(2==='2'); //false (===判断的是类型，类型不一样就为false了)

  console.log(2!=='2'); //true ！==和===是相反的
var bResult = "Blue" < "alpha";

alert(bResult); //输出 true　　

在上面的例子中，字符串 "Blue" 小于 "alpha"，因为字母 B 的字符代码是 66，字母 a 的字符代码是 97。

比较数字和字符串

另一种棘手的状况发生在比较两个字符串形式的数字时，比如：

var bResult = "25" < "3";

alert(bResult); //输出 "true"

上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串，所以比较的是它们的字符代码（"2" 的字符代码是 50，"3" 的字符代码是 51）。

不过，如果把某个运算数该为数字，那么结果就有趣了：

var bResult = "25" < 3;

alert(bResult); //输出 "false"

这里，字符串 "25" 将被转换成数字 25，然后与数字 3 进行比较，结果不出所料。

总结：

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.

比较运算符两侧如果都是字符串类型,比较的是最高位的asc码,如果最高位相等,继续取第二位比较.

parseInt

    console.log(parseInt("hello")); // NaN

    console.log(parseInt("123")); // 123

    console.log(parseInt("123dfjs")); // 123

    console.log(parseInt("abcd1234")); // NaN

typeof

    //typeof :区分基本数据类型

        console.log(typeof 123); // number

        console.log(typeof "hello"); // string

        console.log(typeof true); // boolean

        console.log(typeof null); // object

        console.log(typeof undefined); // undefined

        console.log(typeof [12,3,4]); // object

        console.log(typeof {"name":"123"}); // object
console.log(3>20); // false

console.log(3>"20"); // false

console.log(3>parseInt("2abc")); // true

console.log("3">"28") // true

逻辑运算符

console.log(1&&3); //3  两个为真才为真（0为假，其他的数字都代表真）

console.log(0&&3); //0  只要有一个为假则为假

console.log(0||3); //3

console.log(2||3); //2

五、流程控制

  • 顺序结构(从上向下顺序执行)
  • 分支结构
  • 循环结构

分支结构：

　1.　if.....else结构：

if (表达式1) {

    语句1;

}else if (表达式2){

    语句2;

}else if (表达式3){

    语句3;

} else{

    语句4;

}

2.switch-case结构

switch基本格式

switch (表达式) {

    case 值1:语句1;break;

    case 值2:语句2;break;

    case 值3:语句3;break;

    default:语句4;

}

循环语句

for循环：（推荐使用）

语法规则：

    for(初始表达式;条件表达式;自增或自减)

    {

            执行语句

            ……

    }

for循环的另一种形式：

for( 变量 in 数组或对象)

    {

        执行语句

        ……

    }
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!--<script src="test.js"></script>-->

</head>

<body>

<p>aaaaaaaaaaaa</p>

<p>bbbbbbbbbbbb</p>

<p>cccccccccccc</p>

<p>dddddddddddd</p>

<script>

    var elem_P = document.getElementsByTagName("p");

    for (var i = 0; i < elem_P.length; ++i){

        document.write(i);

        document.write("<br>")

        console.log(i);

        console.log(elem_P[i]);

    }

</script>

</body>

</html>

JavaScript（JS）基本语法（一）

六、异常处理

try {

    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行

}

catch (e) {

    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。

    //e是一个局部变量，用来指向Error对象或者其他抛出的对象

}

finally {

     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。

}

注：主动抛出异常 throw Error('xxxx')

    try{

        console.log(123);

        throw Error("error");

    }

    catch(e){

        console.log(e);

    }

    finally {

        console.log("finally");

    }

JavaScript（JS）基本语法（一）的更多相关文章

  1. JavaScript进阶 - 第2章 你要懂的规则&lpar;JS基础语法&rpar;

    第2章 你要懂的规则(JS基础语法) 2-1什么是变量 什么是变量? 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储某种/某些数值的存储器.我们可以把变量看做一个盒子,盒子用来存放物品,物品 ...

  2. paip&period;java 以及JavaScript &lpar;js&rpar; 的关系以及区别

    paip.java 以及JavaScript (js) 的关系以及区别 作者Attilax  艾龙,  EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...

  3. JavaScript编程：javaScript核心基础语法

    1.javaScript核心基础语法: javaScript技术体系包含了5个内容:          1.核心语言定义:          2.原生对象和雷子对象:          3.浏览器对象 ...

  4. vue&period;js 常用语法总结（一）

    作者:曾萍,目前就职于京东商城. 概述 2016年已经结束了.你是否会思考一下,自己在过去的一年里是否错过一些重要的东西?不用担心,我们正在回顾那些流行的趋势.通过比较过去12个月里Github所增加 ...

  5. JavaScript&lpar;js&rpar;&sol;上

    JavaScript(js) ECMA-----定义的基础语法 DOM------document  object  model BOM------Browser  object  model Jav ...

  6. Javascript和Jquery语法对比总结

    目的 相信大家都知道jq是js的一个类库,是为了方便我们开发前端,但是笔者在刚开始学习js和jq时经常将两者的语法记混和混用,所以整理下两者实现相同功能之前的语法区别. 声明变量 javascript ...

  7. JS高级语法与JS选择器

    元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"&gt ...

  8. Vue&period;js 数据绑定语法详解

    Vue.js 数据绑定语法详解 一.总结 一句话总结:Vue.js 的模板是基于 DOM 实现的.这意味着所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强.Vue ...

  9. Atitit&period; Java script 多重多重catch语句的实现and Javascript js 异常机制

    Atitit. Java script 多重多重catch语句的实现and Javascript js 异常机制 1. 语法错误(ERROR)和运行期错误(Exception) 1 2. 错误类型判断 ...

  10. Vue&period;js 模板语法

    本章节将详细介绍 Vue.js 模板语法,如果对 HTML +Css +JavaScript 有一定的了解,学习起来将信手拈来. Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 ...

随机推荐

  1. 理解 Delphi 的类&lpar;八&rpar; - 关于类的定义

      //标准语法   TMyClass1 = class(TObject)   end;   //如果是继承自 TObject 可以省略   TMyClass2 = class   end;   // ...

  2. 提额 APP

    提额 APP 开始参与这个APP也是巧合,一个月之前,我还在忙于电信运营商的工作,上级就过来问我在之前公司有没有用过 html css js这些.在维库的时候,可是从前台到后台都是要全包的呀,因为项目 ...

  3. 在Excel中将数字转换为大写

    123.09 ＝ 壹佰贰拾叁元零玖分 =SUBSTITUTE(SUBSTITUTE(IF(G10<0,"負","")&TEXT(TRUNC(ABS ...

  4. A quick tour of JSON libraries in Scala

    A quick tour of JSON libraries in Scala Update (18.11.2015): added spray-json-shapeless libraryUpdat ...

  5. idempotence

    如果要追根溯源,幂等性是数学中的一个概念,表达的是N次变换与1次变换的结果相同 http://www.cnblogs.com/weidagang2046/archive/2011/06/04/idem ...

  6. Spring&plus;SpringMVC&plus;MyBatis&plus;easyUI整合基础篇（十一）SVN服务器进阶

    日常啰嗦 上一篇文章<Spring+SpringMVC+MyBatis+easyUI整合基础篇(十)SVN搭建>简单的讲了一下SVN服务器的搭建,并没有详细的介绍配置文件及一些复杂的功能, ...

  7. Python之set方法

    class set(object): """ set() -> new empty set object set(iterable) -> new set o ...

  8. legend2---开发日志8（thinkphp和vue如何配合才能达到最优）

    legend2---开发日志8(thinkphp和vue如何配合才能达到最优) 一.总结 一句话总结:凡是php可以做的,都可以先在后端处理好数据,然后再丢给前端 凡php可以做的,都可以先在后端处理 ...

  9. Recommended Practices for WPF Custom Control Developers

    I have always found that there isn’t enough documentation about Custom Control development in WPF. M ...

  10. 【文档】三、Mysql Binlog事件类文件和类型

    在内部,服务器使用C++类文件来表示binlog事件.标准在log_event.h文件中,这些类的方法代码在log_event.cc中. log_event是基础类.其他的详细的事件子类都是来源于他. ...

相关文章