走进JavaScript

推荐一本必买的书《JavaScript 高级程序与设计》。今天这篇文章先分享最基础入门的一些 Js 的知识。

1、什么是 JavaScript?

JavaScript 是一门基于对象的客户端脚本语言,用来与 web 页面进行交互。

js 的主要作用:轮播图,表单验证,选项卡。。。。。

web 页面三层结构:

结构层 从语义角度来说,布置页面结构 html

表现层 从审美角度来说,用来美化页面 css

行为层 从交互角度来说,提升用户体验 js

2、JavaScript 的组成?

ECMAScript(欧洲计算机制造商协会) 不是一门语言,而是一个组织, 用来规范 JavaScript 的语法标准。

BOM (浏览器对象模型)

DOM (文档对象模型) 核心部分

3、JavaScript 代码实现

1
2
3
4
5
6
7
8
9
js 代码嵌入到网页中,通过 script 标签对来实现

js 中的 script 标签可以写在页面的任意位置(除了 title 中)

通过<script src="xx.js"></script>

js 的代码按照从上到下的顺序执行

某个 script 如果连接了外部文件,标签对中的代码不会被识别。

4、Javascript 的几个输出语句

1
2
3
4
5
alert() 通过弹出对话框的方式输出一段语句 , 会阻塞浏览器的执行 使用 换行

console.log() 控制台输出 用于代码调试 使用 换行

document.write() 在浏览器中打印输出 使用br换行

5、Js 中的字面量(常量)

数值 :
整数
十进制整数 0-9 组成的数值(常用) 89
二进制整数 0- 1 组成的数值 1001
八进制整数 0–7 组成的数值 一般八进制 以 0 开头 023
十六进制整数 0-9 a–f 组成 一般十六进制 以 0x/X 开头
小数

字符 :
js 中 字符可以用单引号 或 双引号 引起来
但是要注意 引号嵌套问题: “ ‘’ “ 或 ‘ “ “ ‘

6、Js 中标识符(变量)的命名规范

标识符由字母、数字、下划线、$组成(中文也可以但一般不用)

不能用数字开头

不能用系统指定的一些关键字命名

标识符具有一定的含义

命名法:

驼峰式命名法:

大驼峰:IsMe
小驼峰:isMe

匈牙利命名法:

iNum 通常表示整数的变量 以 i 开头

fNum 通常表示小数的变量 以 f 开头

sStr 通常表示字符的变量 以 s 开头

oObj 通常表示对象的变量 以 o 开头

arr 通常表示数组类型的变量

reg 通常表示正则表达式的变量

7、变量的定义和赋值

显示定义

通过 var 定义的变量

var iNum = 10; 表示 变量在定义的时候 同时又为该变量赋值

var fNum;

fNum = 2.3; 先定义一个变量,然后在为该变量赋值

定义多个变量:

var name=”程序员”,age = 28;

var name,age;

name = “jack”,age = 35;

隐式定义 : 变量定义的时候 var 可以省略的。

变量一定要先定义,后使用。

8、Js 中输出结果时注意几个问题:

1、如果输出的是字符,该字符一定要用引号括起来 比如: alert(hello); 错误 alert(“hello”);

2、如果输出的是一个变量的值,该变量一定不能用引号括起来

3、如果既要输出字符又要输出变量, 字符和变量之间 用 + 表示连接

4、如果输出的是一个数值,该数值可以不用引号括起来

9、变量的数据类型

js 中变量的数据类型又变量的初始值来决定

基本数据类型:

数值类型 number

整数、小数 ,值可以有多个

字符类型 string

由单引号或双引号括起来 , 值可以有多个

布尔类型 boolean

值只有两个 true、false, 这两个关键字不能用引号括起来

复合数据类型(引用数据类型):

对象 object

数组 Array(本身也是一个 object)

特殊数据类型:

undefined 未定义的 (如果一个变量定义了,但没有给初始值,初始值就是 undefined)

null 表示 空 (本身也是一个对象 object)

测试变量的数据类型 typeof() 用法: typeof(变量名)

10、运算符和表达式

运算符: 运算符号

表达式: 一个式子 变量、常量、或一个通过运算符连接的式子 2+3

运算符有哪些

该运算符对应的表达式的值如何计算

11、算术运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
+ - * / % (双目:运算符两侧都有操作数)

* :

表达式 : 8*9

表达式的值:

1、如果运算符两侧都是数值,正常计算

2、如果运算符两侧中有一侧是纯数字字符串,则该字符串自动转成数值进行计算 7*"8"=56 ,

否则 结果为NaN(不能正常计算的结果都是NaN) NaN:not a number 不是一个数字

3、如果表达式中有一个布尔值,自动将true解析为1,false解析为0 7*true

- / % (运算结果同*)

% 模运算符(求余数):

4%2 = 0

2%4 = 2

2%1 = 0

134%10 = 4

56%10 = 6

任何数 % 10 = 个位数

编程实现: 7893 计算这个数的各个位数和---(将这个数的个位 、十位、百位、千位取出就好)。

个位 : 7893 % 10

十位 : 取整(7893 / 10 ) % 10

百位 : 取整(7893 / 100) % 10

千位 : 取整(7893 / 1000)

+ :

算术运算

表示连接符

数值和字符串相加表示连接,.. 100+“90” = 10090

练习:计算这个表达式的值 : 10 + "2" - "1" = 101 结果的类型是:number

10 + "2" - "1r" = NaN

++ -- (单目:运算符只有一侧有操作数)

++:自增 : ++ 或 -- 两侧的操作数必须是变量

var i = 2;

表达式 : i++ (后置++) 或 ++i(前置++)

后置++和前置++的异同:

相同点:

自增变量都会加一

不同点:

表达式的值不同

如果++在后 -> j = i++; ,表达式的值是原i的值 (先赋值、再自增 ---> 先将i的值赋值给整个表达式,然后i在自增)

如果++在前 -> j = ++i; ,表达式的值是自增后i的值(先自增,再赋值 ---> 先将i的值自增1 ,再将i的值赋值给整个表达式)

--:自减

var i = 2;

j = i--; // i = 1 j = 2

var k = 9;

j = --k;

j = 8 k = 8;

k++ + ++k + k++ + k

12、关系运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
运算符 : >   >=   <   <=    ==(等于)   != (不等于)    ===(全等)   !==(全不等)

关系表达式 : 2>3 6<7 7>=7 7==9 7>"8" "bds" < "bnd"

关系表达式的值: truefalse

1、如果表达式的两侧都是数值型,正常比较 8 > 9 false

2、如果表达式的两侧都是字符型,正常比较 (按照字符的编码值进行比较 a:97 A:65 0: 48) "b1">"a" true

3、如果表达式的两侧有一侧是纯数字字符串,字符串自动转成数值型,再正常比较

4、如果表达式的两侧有一侧是非数字字符串,不能自动转换,表示不能正常比较,结果为false

5、所有不能正常比较的结果都是false

==: 只比较值,不比较类型 ,值相等就为true ( 100 == "100" true 100!="100" false )

===: 先比较类型, 再比较值 ,都满足条件结果为true,否则就是false (100 === "100" false , 100!=="100" true )

13、逻辑运算符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
运算符: &&与(并且) ||或 ! 非(单目)

逻辑表达式: 3 && 5 3 || 7 !9

逻辑表达式的值:truefalse

js中 非0 表示真,0 表示假

&& 对应的表达式的值:

&& 符号两侧只要有一侧为假false, 表达式的值就是false 地球是方的 && 王哲是男生--- > false

|| 对应的表达式的值:

|| 符号两侧只要有一侧为真true,表达式的值就是true 地球是方的 || 王哲是男生 ---> true

! 对应的表达式的值:

非真即假,非假即真

14、 条件运算符 ? : (三目)

1
2
3
4
5
6
7
条件表达式 : 表达式1 ? 表达式2 : 表达式3

条件表达式的值:

如果表达式1的结果为真,整个条件表达式的值取表达式2的值,否则整个条件表达式的值取表达式3的值

<view class="get-code" bindtap="handleGetYzm">{{isReset?clickText:msgText}}</view>

结语

自己当时学js的时候一步步的啃红宝书,现在也不是很厉害。只是把自己的一些笔记发出来~ 不定时更新

本文标题:走进JavaScript

文章作者:Jonathon

发布时间:2018年09月04日 - 20:09

最后更新:2018年09月08日 - 11:09

原始链接:https://www.jonathon.cn/javascript.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

苟富贵,勿相忘!