JavaScript语法基础(1)

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语句----------------

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

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

时间: 2024-10-25 21:08:46

JavaScript语法基础(1)的相关文章

javascript语法基础-变量与函数

三 javascript语法基础-变量与函数 (一)变量的声明与运用 JavaScript中的变量与Java.C等强类型语言有很大区别,虽然在JavaScript中具有字符串.数字等数据类型. 变量申明语句的结构是var保留字加标识符,var和标识符之间用空格隔开. 赋值语句的结构是在变量和需要赋的值之间加上一个等号,例如a=1的含义是将变量a的值指定为1. 变量在定义的时候也可以同时赋值,如var a=1. PS:在变量使用前事先进行声明是个良好的编程习惯,这对将来学习Java等其他语言有帮助

Javascript语法基础

Javascript语法基础   一.基本数据类型   JavaScript中支持数字.字符串和布尔值三种基本数据类型: 1.数字 数字型是JavaScript中的基本数据类型.在JavaScript中的数字不区分整型和浮点型,所有的数字都是以浮点型来表示的. 2.字符串 字符串型是JavaScript中用来表示文本的数据类型,是由Unicode字符.数字和标点符号组成的一个字符串序列.字符串通常都是用单引号或双引号括起来的.如果在字符串中包括着特殊字符,可以使用转义字符来代替.例如: “”  

30 May 18 Javascript语法基础

30 May 18 # 图片太多,详细见link 以及文本 一.每日面试(知识复习) 1.问:执行完下面的代码后,  l,m的内容分别是什么? def func(m): for k,v in m.items(): m[k+2] = v+2 m = {1: 2, 3: 4} l = m  # 浅拷贝 l[9] = 10 func(l) m[7] = 8 print("l:", l) print("m:", m) # 报错:dictionary changed size

javascript语法基础-控制语句

四 JavaScript 控制语句 (一)if-else if -else 语句是JavaScript中最基本的控制语句,通过它可以改变语句的执行顺序 . 表达式中必须使用关系表达式或逻辑表达式来实现判断,表达式的结果通常作为一个布尔值用来判断 . 在表达式的结果中零或非零的数分别转化成false和true . 花括号{}内的语句允许包括多行,如果只有一条语句允许不使用花括号{} . (二)switch基本格式 switch (表达式) { case 值1:语句1;break; case 值2:

JavaScript之基础-1 JavaScript(概述、基础语法)

一.JavaScript 概述 JavaScript 概念 - JavaScript 是一种运行于 JavaScript解释器/引擎中的解释型脚本语言 - JavaScript 解释器作为JS脚本的运行环境,有如下两种呈现方式 - 独立安装的 JavaScript 解释器; - 嵌入在浏览器内核中的 JavaScript 解释器; - 目前 PC .平板.手机.机顶盒中安装的主要浏览器全部支持JavaScript JavaScript 发展史 - 1992年,Nombas公司为自己的CEnvi软

JavaScript:基础语法

JavaScript:基础语法 注释 JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{...}.但是,JavaScript并不强制要求在每个语句的结尾加;浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;.JavaScript严格区分大小写,如果弄错了大小写,程序将报错或者运行不正常. 注释: // 这是一行注释 alert('love qinjiang'); // 这也是注释 /* 从这里开始是块注释 仍然是注释 仍然是注释 注释结束 */ 变

javascript的基础知识及面向对象和原型属性

自己总结一下javascript的基础知识,希望对大家有用,也希望大家来拍砖,毕竟是个人的理解啊 1.1 类型检查:typeof(验证数据类型是:string) var num = 123; console.log(typeof num); // 1.2 in 运算符 作用:判断指定属性是否存在于指定的对象中. 如果指定的属性存在于指定的对象中,则 in 运算符会返回 true. 语法: 属性 in 对象 返回值:true 或者 false 示例: var obj = { age: 18 };

JavaScript RegExp 基础详谈

前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果我们不去真正仔细研究.学习.掌握,而是抱着需要的时候,就去网上找现成的正则表达式来使用,像这样恐怕永远都是很难对正则有一个详细且全面的了解. 所以通过查阅书籍.网上的资料以及通过自己的理解.组织.表达,写了这篇<JavaScript RegExp 基础详谈>,算是对自己学习过程的一次总结梳理吧. 如果有什么欠缺,遗漏或者不足的地方,多多麻烦大家的

javascript笔记基础总结篇

Created at 2016-09-24 Updated at 2016-10-02 CategoryFront-End TagJavascript 转载请声明出处博客原文 随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧 第一课时 入门基础 知识点: 操作系统就是个应用程序 只要是应用程序都要占用物理内存 浏览器本身也是一个应用程序 浏览器本身只懂得解析 HTML 调用浏览器这个应用程序的一个功能绘制 1.javascript介绍 JavaScript 操作