JavaScript介绍

一、JavaScript简介

  • 1.在1995年时,由Netscape公司的Brendan Eich,在网景导航者浏览器上首次设计实现二层,因为Netscape与Sun合作,Netscape管理层希望它外观看起来像Java,因此取名JavaScript。但实际上它的语法风格与Self及Scheme较为接近;
  • 2.为了取得技术优势,微软推出了JScript,CEnvi退出ScriptEase,与JavaScript同样可以在浏览器上运行,为了统一规格,因为JavaScript兼容于ECMA标准,因此也称为ECMAScript;

二、JavaScript基本特点

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,通常JavaScript脚本是通过嵌入在HTML中来实现自身功能的。

  • 1.是一种解释性脚本语言(代码不进行预编译);
  • 2.主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为;
  • 3.可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离;
  • 4.跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如:windows、Linux、Mac、Android、iOS等);

JavaScript脚本语言同其他语言一样,有它自身的基本数据类型,表达式和算数运算符及程序的基本流程框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型来处理数据和文字。而变量提供存放信息的地方,表达式则可以完成较复杂的信息处理。

三、JavaScript组成部分

  • ECMAScript:描述了该语言的语法和基本对象;
  • 文档对象模型(DOM):描述处理网页内容的方法和接口;
  • 浏览器对象模型(BOM):描述与浏览器进行交互的方法和接口

简单地说,ECMAScript描述了以下内容:

  • 语法;
  • 类型;
  • 语句;
  • 关键字;
  • 保留字;
  • 运算符;
  • 对象,基于面向对象的语言;

四、JavaScript基础

1.JS的引入方式

# 直接编写:js代码可以放在head标签中,也可以放在body标签中,推荐放在body标签内的最下面
<script>
alert("hello world!")
</script> # 文件导入
<script src="hello.js"></script>

2.JS的变量

  • 变量分为全局变量和局部变量,声明变量时不用声明变量类型,局部变量使用var关键字,如果没有var关键字,则为全局变量;
var a;
<br>a=3;
  • 一行可以声明多个变量,并且可以是不同类型;
var name="eric", age=10,job="lecture";
  • 变量命名:首字符只能是字母、下划线和$三选一,其余字符可以是下划线、$或任意字母数字,且区分大小写,x与X是两个变量;
Camel 标记法
首字母是小写的,接下来的单词都以大写字符开头。例如:
var myTestValue = 0, mySecondValue = "hi"; Pascal 标记法
首字母是大写的,接下来的单词都以大写字符开头。例如:
Var MyTestValue = 0, MySecondValue = "hi"; 匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母(或小写字母序列),说明该变量的类型。例如,i 表示整数,s 表示字符串,如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";

3.常量和标识符

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

标识符

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

关键字:

4.JS的数据类型

数据类型:

Number        数字值
Boolean 布尔值
String 字符串
Undefined undefined
null null

数字类型(number):不区分整型数值和浮点型数值;

var num1 = 10;                // 表示整数10
var num2 = 1.1; // 表示浮点数1.1
var num3 = 10.0; // 整数,解析成10
var num4 = 10.; // 小数点后面没有数字,解析成10
var num5 = 3.124e7; // 等于32140000,科学记数法

字符串类型(string):是由Unicode字符、数字、标点符号组成的序列;字符串常量首尾由单引号或双引号括起;JavaScript中没有字符类型;常用特数字符在字符串中的表达;字符串种特殊字符必须加上反斜杠();常用的转义字符"\n":换行;"'":单引号;""":双引号;"\":反斜杠;

布尔类型(boolean):Boolean类型仅有两个值,true和false,也代表1和0。实际运算中true=1,false=0。布尔值也可以看作on/off、yes/no、1/0;Boolean值主要用于JavaScript的条件控制语句:

if (x==1){
y=y+1;
}else{
y=y-1;
}

undefinedl:undefined类型只有之一个值,即undefined。当声明的变量未初始化时,该变量的默认值是undefined,当函数无明确返回值时,返回的也是undefined。

null:null类型也只有一个值,即专用的null,就是它的字面值。undefined实际上是从null派生而来的,因此ECMAScript将它们定义为相等的。尽管这两个值相等,但是它们的含义不同。undefined是声明了变量但未对其初始化(变量未赋值),null则用于表示未存在的对象。如果函数或方法要返回的是对象,那么找不到该对象时,通常返回的是null。

5.运算符

运算符分类

算术运算符:
+ - * / % ++ -- 比较运算符:
> >= < <= != ==(值相等) ===(值相等,类型相同) !== 逻辑运算符:
&& || ! 赋值运算符:
= += -= *= /= 字符串运算符:
+ 连接,两边操作数有一个或两个是字符串就做连接运算

算术运算符:自增、自减

i++:先赋值后计算;
++i:先计算后赋值;

假设x=2,那么x++表达式执行后的值为3,x--表达式执行后的值为1;i++相当于i=i+1,i--相当于i=i-1;

注意:NaN

var d="property";
d=+d;
alert(d); //NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
alert(typeof(d)); //Number //NaN特点: var n=NaN; alert(n>3);
alert(n<3);
alert(n==3);
alert(n==NaN); alert(n!=NaN); //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 进行比较,结果不出所料。 总结: 比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
比较运算符两侧如果都是字符串类型,比较的是最高位的ascii码,如果最高位相等,继续取第二位比较.

逻辑运算符

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;
}

实例:

switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定义";
}

switch-case结构比if...else if... else结构更加清晰,程序更具可读性

循环结构

1.for循环:(推荐使用)

语法规则:

    for(初始表达式; 条件表达式; 自增或自减)
{
执行语句
……
}

for循环另一种形式:

for( 变量 in 数组或对象)
{
执行语句
……
}

2.while循环:

语法规则:

while (条件){
语句1;
...
}

六、异常处理

try {
//这段代码从上往下运行,其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常,catch代码块中的代码就会被执行。
//e是一个局部变量,用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出(甚至是try代码块中有return语句),finally代码块中始终会被执行。
}

前端基础:JavaScript介绍的更多相关文章

  1. 前端基础-JavaScript

    转载地址:http://www.cnblogs.com/yuanchenqi/articles/6893904.html 一.Javascript结构   ECMAScript  ECMAScript ...

  2. 前端基础-html 介绍和head标签 ( 1 )

    主要内容 web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 HTML规范 HTML结构详解 写在前面: 前端               后端 C(client)        S ...

  3. 前端基础----JavaScript基础

    一.JavaScript概述 1,JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...

  4. 2021年3月-第03阶段-前端基础-JavaScript基础语法-JavaScript基础第01天

    1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的指令集合,而程序全部都是用我们所掌 ...

  5. 前端基础-JavaScript的基本概述和语法

    1.JavaScript概述 2.JavaScript引入方式 3.JavaScript语言规范 4.JavaScript语言基础 5.JavaScript数据类型 6.JavaScript运算符 7 ...

  6. 前端基础JavaScript

    JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...

  7. Web前端基础——JavaScript

    一.脚本程序和 javascrip    Javascript脚 本是嵌套在HTML网页中的程序语言,浏览器带有脚本程序的解释器(脚本引擎).脚本也可以有多种,比如还有vbscript, JScrip ...

  8. 前端基础 JavaScript~~~ 数据处理 奇技淫巧!!!!!!

    常用的JS数据处理手段      2016-09-21          17:40:07 1.   number类型  数组中取出里面的最大/最小值: // 数组中取出 最小值 [数值] var n ...

  9. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

随机推荐

  1. Splay初学习

    例题传送门 听YZ哥哥说Splay是一种很神奇的数据结构,所以学习了一下它的最基本操作.O(1)的Spaly. 伸展树(Splay Tree),也叫分裂树,是一种二叉排序树,它能在O(logn)内完成 ...

  2. 北京Uber优步司机奖励政策(1月17日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  3. 成都Uber优步司机奖励政策(1月15日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  4. git的一些操作指令

    1. mkdir learn 创建learn文件夹(也可不用命令创建,直接右击新建即可)   cd learn进入learn文件夹   git init  把learn文件夹 变成 可以用git管理的 ...

  5. Ubuntu目录与权限

    Ubuntu目录 / /bin /sbin /boot /etc /mnt /home d :directory - :file b :block  磁盘以块进行 l :link Ubuntu权限 U ...

  6. jieba结巴分词

    pip install jieba安装jieba模块 如果网速比较慢,可以使用豆瓣的Python源:pip install -i https://pypi.douban.com/simple/ jie ...

  7. 网站端测试常见BUG

    1.翻页 翻页时,没有加载数据为空,第二页数据没有请求 翻页时,重复请求第一页的数据 翻页时,没有图片的内容有时候会引用有图片的内容 2.图片数据为空 图片数据为空时,会保留为空的图片数据位置 3.链 ...

  8. 第四篇 与Flask相关的插件(flask-session、wtforms)

    公司中使用SQL的种方式: 1. 写Django:ORM(关系对象映射), 2. 写Flask和其他:有两种方式: (1) 原生SQL:使用原生SQL有两种选择: A. pymysql (python ...

  9. Vuejs 实现简易 todoList 功能 与 组件

    todoList 结合之前 Vuejs 基础与语法 使用 v-model 双向绑定 input 输入内容与数据 data 使用 @click 和 methods 关联事件 使用 v-for 进行数据循 ...

  10. markdown语法介绍

    1. 标题类 每级标题用"# title"表示,共支持6级标题: 2. 段落类 1.建议用换行符控制: 2.用"<p></p>"控制: ...