码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript语法基础(1)

时间:2017-07-19 19:28:59      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:内容   跳转   三目运算符   硬件   ber   进制   原码   关键字   提交   

1、JavaScript是什么?

1)定义:

JavaScript「JS」是一种高级的、动态的、
弱类型的、解释型的计算机编程脚本语言。

2)原理:

3)组成:

3大部分:

◆ ECMAScript: JS的语法核心

◆ DOM: Document Object Model;
文档对象模型;
提供访问和操作网页的方法和接口

◆ BOM: Browser Object Model;
浏览器对象模型;
提供与浏览器交互的方法和接口

4)总结:

JS是一种专门为网页交互而设计的、
简单而又复杂的脚本程序语言。

2、JS的发展简史是怎样的?

● 慢速的网络 + 表单提交 + 服务器验证 = 糟糕的体验;

● 1995年,Netscape「网景公司」,LiveScript;

● 为了跟风,更名为了JavaScript;

● "浏览器大战"时期,IE <=> Netscape Navigator;

● 由于语法和特性上没有标准化,
不同公司的浏览器实现不一样,
导致JS出现了一定程度的混乱;

● 欧洲计算机制造协会「ECMA」组织出现完成并定义了
ECMA-262这样一种名为ECMAScript的脚本语言标准;

● ECMAScript5「ES5」是最流行的版本;
ECMAScript6「ES6」是最新的版本;

● 各浏览器厂商基于ECMAScript的标准
完成了对各自浏览器的标准更新,实现统一;

● 微软借助Windows的垄断性在"浏览器大战"中战胜网景。


3、JS的使用场景有哪些?

1)HTML、CSS和JS三者的关系:

2)JS的使用场景:

最初的JS只用来支持网页表单数据的验证,
如今的JS广泛使用于如下各种场景:

◆ 网页/网游/页游;

◆ Electron.js框架和V8「JS渲染引擎」,制作桌面程序;

◆ React.js可以制作手机/移动端程序;

◆ Node.js用来作为后端运行环境。

3)为什么JS非常值得我们学习?

◆ 目前,全世界几乎所谓的网站都在使用JS;

◆ 几乎所有现代的浏览器都直接原生支持JS;
PC/手机/平板等几乎所有硬件设备也支持JS;

◆ 作为Web工程师和Java工程师,如果想制作漂亮的网页;
或者实现高效的动态验证,JS是必须的工具。

4、JS代码的怎样引入?

3种方式:

1)内联式

<script type="text/javascript">
...JS代码
</script>

2)外部式:

格式:

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

注意:

● 外部JS文件后缀:.js;

● 在JS文件中不需要<script>标签,直接写JS代码即可;

● JS文件不能直接运行,需要嵌入到HTML文档中执行。

3)嵌入式「将JS代码嵌入标签作为属性;不推荐」:

4)补充·JS在页面中的位置:

理论上可以将JS代码置于HTML任意位置,但一般放在head或body部分:

◆ 放在<head>部分:

最常用方式;浏览器解析head部分时就会执行JS代码,
这样页面在被载入之前,脚本就已经被载入;
即:这样可以确保页面被载入之后,脚本已经准备好被调用;
通常用来放置一些函数代码;

◆ 放在<body>部分:

在页面被载入时脚本才会被载入并立即执行;
通常用来放置一些动态生成页面内容的代码。

特别注意:

● 因为浏览器解析存在顺序,所有前面的<script>将会先执行;

● 进行页面初始化操作的JS代码应该放在head中,
因为初始化的操作应该在页面载入之前完成;

● 但如果是通过事件调用的function,那么位置没有要求。


5、JavaScript-认识语句和符号:

1)意义:

JS的语句就是给浏览器的命名,
这些命名的作用是告诉浏览器要做的事情。

2)格式:

每条JS的语句格式:语句;

注意:

● 一行的结束被认为是语句的结束,通常结尾以;作为标记;

● 虽然;也可以不写,但我们要养成良好的编程习惯。


6、JavaScript-认识注释符

2种:

1)单行注释:

// 注释文字

2)多行注释:

/*
* 注释文字
* 注释文字...
*/

7、JavaScript-变量

1)概念:

◆ 字面意思:可变的量;

◆ 编程角度:变量是用来存储某种/某些数据值的存储器;

◆ 简单来说:变量是一块内存区域,
用来临时性存放一些中转的数据,且存在数据类型。

2)定义:

使用var关键字声明,语法格式:

var 自定义变量名 = 值;

注意:

● 变量虽然也可以不声明直接使用,但不规范;

● JS是一种弱类型轻量级脚本语言,
不要求强制为变量指定一种类型「不同与Java/C」,
即:JS不严格限制变量使用的数据类型,
JS会自动推算它们的类型。

3)命名:

变量名可以任意取名,但要遵循如下命名规则:

◆ 组成:大写字母/小写字母、数字、下划线、美元符$、中文等;
建议:有意义的英文单词,多个单词首字母大写区分;

◆ 变量名严禁以数字开头;

◆ 变量名严禁使用JS关键字或保留字

◆ 变量名严禁使用特殊符号

◆ 变量名对大小写敏感

4)特殊:

◆ 变量可以同时声明,以,隔开;

1  var a,b,c;

◆ 变量可以先声明,再赋值;  

1 var a; 
2 a = 10;

◆ 变量可以重复声明和赋值。

1   var a = 10;
2 
3   var a = 5;

 

8、JavaScript-数据类型

1)什么是数据类型?

2)关于JS的数据类型:

◆ 说明:不同于Java/C等编程语言,强制要求定义变量的数据类型,
否则无法通过编译,JS为弱类型脚本语言,会智能推断数据类型,
即:数据类型无需强制定义;

◆ 注意:但是如果完全不定义类型,
有时JS也会帮助我们错误的设想一些类型,
从而造成一些不可预知的错误,
所以为了创建稳固的程序,
必须掌握JS的数据类型。

3)种类:

2类6种:

----基本数据类型----

数值型number: 保存整数/浮点数

字符串型string: 保存单个字符/字符串;‘‘或""

布尔型boolean: 定义真假;true真或false假

空类型null: 空对象指针/引用;
一个变量后续需要引用具体对象,。
初始化时建议初始化为null

不明确型undefined: 一个变量没有初始化赋值,就是undefined

----对象数据类型----

对象型object: JS中的对象一组属性和方法的集合;
具体的关于对象创建方法和特性,后续详解

4)转型:

◆ Number(): 将数据值转为整数,可以用于任何数据类型

◆ parseInt(): 将数据值转为整数,用的比较多

◆ parseFloat(): 将数据值转为小数

◆ toString(): 转字符串

◆ String(): 转字符串「不确定要转换的变量的类型/值」

◆ Boolean(): 转布尔值


9、JavaScript-转义符

1)什么是转义符?

◆ 说明:JS包含很多不能直接输入的特殊字符,可以使用转义字符替代

2)转义符:\n , \t ,...用反斜杠改变其原有的含义


10、JavaScript·运算符

1)概念:

统指能够对数据进行操作「赋值/运算/比较...」的特殊符号。

2)分类:

7种:

◆ 算术运算符
◆ 赋值运算符
◆ 关系运算符
◆ 逻辑运算符
◆ 位逻辑运算符
◆ 位移运算符
◆ 三目运算符

3)运算符1·算术运算符:

9种:

+ 正号
- 负号
+ 加号
- 减号
* 乘号
/ 除号
% 取余/求模
++ 自增
-- 自减

4)运算符2·赋值运算符:

6种:

=
+=
-=
*=
/=
%=

注:

<op>=表变量初值对<op>=右边的值或结果进行<op>运算,
运算完成后将最终结果重新赋给变量。

5)运算符3·关系元素符:

7种:

> 大于
< 小于
>= 大于等于
<= 小于等于
== 等于「只比较值」
=== 全等于/恒等于「值和类型都比较」
!= 不等于「也作<>」

注:

返回值一定是boolean值。

6)运算符4·逻辑运算符:

3种:

&& 逻辑与
|| 逻辑或
! 逻辑非

注:

逻辑运算符只能操作boolean值,返回值也是boolean值。

7)运算符5·位逻辑运算符:

4种:

~ 按位取反
& 按位与
| 按位或
^ 按位异或

注:

● 位逻辑运算符采用逻辑运算符运算思想对二进制数字进行运算;

● 操作数必须是整数;

● 数值在计算机中二进制的补码形式存放。

------------延伸知识:什么是原码、反码、补码?------------

Ⅰ、正数「三码合一」:

原码:二进制数本身
反码:二进制数本身
补码:二进制数本身

Ⅱ、负数「取反加1」:

正数的原码:二进制数本身
负数的原码:在正数原码基础上,修改最左边的符号位
注:计算机中0表正号,1表负号
负数的反码:在负数原码基础上,最左边的符号位不变,其他全变
负数的补码:在负数反码基础上,加1

8)运算符6·位移运算符:

3种:

<< 左移
>> 带符号右移
>>> 无符号右移

注:

● 操作数必须是整数;

● 运算法则:

<< :高位溢出 -> 舍去;低位空出 -> 直接补0;
>> :低位溢出 -> 舍去;高位空出 -> 补上符号位;
>>> :低位溢出 -> 舍去;高位空出 -> 直接补0。

思考:

为什么左移只有1种,而右移却有2种?

9)运算符7·三目运算符:

也称条件运算符/选择运算符

1种:

A ? B : C

注:

● A必须是boolean值;

● B和C的类型没有要求,且可以不一样。

10)补充·字符串拼接符:

注:

对字符或字符串变量使用+时,并不是对它们进行相加而是拼接。


11、JavaScript·语句

1)什么叫做程序的流程控制?

2)流程控制的方式:

3种:

◆ 顺序结构
◆ 选择结构
◆ 循环结构

3)流程控制的实现:

JS语句;

4)语句的分类:

6种:

◆ 表达式语句
◆ 空语句
◆ 标号语句
◆ 选择语句*
◆ 循环语句*
◆ 跳转语句*

5)语句1·表达式语句:

● 泛指:变量的赋值/运算符的操作/关系的判断...

● 特点:以;结尾。

6)语句2·空语句:

● 格式:;

● 意义:不执行任何实际操作。

7)语句3·标号语句:

● 格式:一般配合循环语句和跳转语句一起使用;
在循环语句外使用一个自定义的单词和一个冒号做一个标记;
后续配合跳转语句实现指定跳转。


8)语句4·选择语句:

2种句式:

--------------if...else if...else条件选择语句--------------

3种句型:

Ⅰ、

1 if (<boolean>) {
2 复合语句;
3 }
4 ...
5 boolean为true => 执行1次
6 boolean为false => 不执行

 

Ⅱ、

1 if (<boolean>) {
2 复合语句;
3 }
4 else {
5 复合语句;
6 }
7 
8 if满足    => 执行1次if,else不执行
9 if不满足    => 直接执行else

 

Ⅲ、

 1 if (<boolean>) {
 2 复合语句;
 3 }
 4 else if (<boolean>) {
 5 复合语句;
 6 }
 7 ...
 8 else {
 9 复合语句;
10 }
11 
12 if满足    => 执行1次if,else if和else都不执行
13 if不满足    => 开始判断else if => 谁判断谁执行谁终止
14 if和else if都不满足 => 直接执行else

 

--------------switch...case开关/分支选择语句--------------

 1 switch (value) {
 2 
 3 case 值1:
 4 复合语句;
 5 
 6 case 值2:
 7 复合语句;
 8 
 9 ...
10 
11 default:
12 复合语句;
13 }

 

case常量值==switch返回值 -> 执行该case及其下面的所有case和default;
case常量值!=switch返回值 -> 继续判断下一个case分支「从上往下依次」;
default分支 -> 所有case不满足时默认执行。

注:

● switch必须指定常量值或常量表达式;

● case也必须指定常量值或常量表达式,不能接undefined值;

● 所有case分支的值不能相同;

● case分支:1~n个;default分支:0~1个,且位置不固定。

9)语句5·循环语句:

3种:

-----------------while循环「先判断再执行」-----------------

while (<boolean>) {
复合语句;    => 循环体
迭代语句;    => ++ -- += -=
}

 

boolean为true => 执行1次循环体 => ... => 条件表达式+迭代决定次数
boolean为false => 结束循环

----------------do...while循环「先执行再判断再执行-----------------」

do {
复合语句;    => 循环体
迭代语句;    => ++ -- += -=
}
while(<boolean>);

 

执行1次循环体 => boolean为true => ... 条件表达式+迭代决定次数
=> boolean为false => 结束循环

----------------for循环「最常用;穷举/遍历」----------------

2种:

Ⅰ、数值型for循环/普通for循环:

for (①变量表达式; ②条件表达式; ③迭代) {
复合语句; => 循环体
}

①变量表达式「执行1次」 => ②条件表达式为true => 执行1次循环体
=> ③迭代 => ②条件表达式... => ②条件表达式+③迭代决定次数

Ⅱ、对象型for循环/加强for循环/for-each循环:

for (①变量 in ②对象) {
复合语句; => 循环体
}

直接使用①变量保存②对象中的每个元素值「指针指向了每个数字值」。

----------------3种循环的总结----------------

Ⅰ、如果循环体只有一条语句,{}可以省略;

Ⅱ、3种循环的选择:

如果事先知道循环的次数 => for循环
eg:求1 - 3 + 5 - 7 + 9 - 11 + ...的前20项的结果。

如果事先不知道循环的次数 => while循环
eg:求1 - 3 + 5 - 7 + 9 - 11 + ... + n的结果,n让用户输入。

如果需要预先执行1次 => do...while循环

10)语句6·跳转语句:

● 为什么JS语法要引入跳转语句?

使程序的流程跳转到当前位置以外的部分「方法/switch/循环语句」。

● 句型:

3种:
特点 场景
return语句: 跳出+返回 方法「结尾」
break语句: 跳出+结束 switch/循环语句
continue语句: 跳出+继续 循环语句

----------------return语句----------------

● 场景:一般写在函数的结尾;

● 作用:使得主程序的流程从函数中跳出,并返回到调用该函数处。

----------------break语句----------------

● 场景:一般用在switch语句/循环语句内部;

● 作用:从上述语句中跳出,并且不再执行。

----------------continue语句----------------

● 场景:一般用在循环语句内部;

● 作用:从循环语句中跳出,并继续循环的下一次执行
「结束当前当次循环」。

 

JavaScript语法基础(1)

标签:内容   跳转   三目运算符   硬件   ber   进制   原码   关键字   提交   

原文地址:http://www.cnblogs.com/amazingbook/p/7207352.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!