avatar

目录
【前端06_JS】ECMA 语法标准:声明变量、数据类型_、tupeof返回值、输入输出、运算、循环、条件、函数_、事件_

概述

以下简称 JS,首先 JS 跟 java 是两个东西,JS 是专门用来做 功能 的,有如下功能:

  • 表单验证,减轻服务端的压力
  • 添加页面动画效果,等等

在 body 外建立 所有的 JS 代码都写在这里。

js 是一种 类型语言,语句之后是否加分号都不影响运行,==但是要养成加分号的习惯==

它由以下三个内容构成:

  • ECMAScript 语法标准
  • Dom 文档对象模型
  • Bom 浏览器对象

ECMA 语法标准

现在学的版本是 ECMA 5,南方开始用 ECMA 6

声明变量

  • 声明变量,用来 保存数据
  • 变量名可以由 字母、数字、下划线、$符号 组成
  • 变量名必须以 字母、下划线或 $ 开头
  • 不可以用中文起名字
  • 严格区分大小写,也就是大小写起的变量名字,变量都是不一样的
  • int 它也可以做变量名字,在别的语言里 int 是关键字,但是在 JS 里没事,但是 var 不行。
  • 这里编辑器可能会在声明变量的单词 var 下有下划线,解决方法如下:
    https://blog.csdn.net/u010263423/article/details/97968925
  • NaN 是非数值,它是个 number 类型的
  • isNaN 是判断这个数是不是NaN, 也是 number

全局变量

Javascript
1
2
3
4
5
6
7
8
function text() {
a = 1;/*这个是全局变量,es5的引擎就是这样实现的
等价于window.a*/
window.b = 2;
/*为什么要加var:因为他们有本质上的区别,不加var 是追加在windows下的子空间
* 加了var 就是开辟新的空间*/
}
text();

注释方法

  • 在代码中有 双斜杠 //单行注释 来单行注释

  • 也可以使用快捷键 Ctrl + Shift + / 来多行注释


数据类型 *

数据类型有 6 大类 (ECMA5 版本的)

  • undefined:未定义
  • object 复杂数据模型
  • boolean:布尔运算
  • string:字符串
  • number:数,包括整数+浮点
  • null:空值

ECMA6 中添加新的数据类型 symbol

typeOf

安全性

在ECMA5中是绝对安全的

而在ECMA6,用错typeof是会报错的

能返回的值 *

检查数据类型用 typeof ,用法如下:typeof (sum);

  • undefined
  • object
Javascript
1
2
console.log(typeof (null));
//object
  • boolean
  • string
  • number
  • function (就这个是跟数据类型不一样的)
Javascript
1
2
console.log(typeof (Date));
//function
数据类型(7个) typeof 返回值 解释
number number
string string 字符串
boolean boolean 布尔值
null ==object==
undefined undefined 未定义
object object 对象
symbol (ES6) symbol 新来的
==function== typeof 的特殊返回值
## 输入与输出
>输入会在浏览器中弹出会话框 ,语句这样: var num = prompt('请输入');
括号内是提示语序,语气要委婉些
- 确定的话 返回字符串,取消的话会返回 null
Chrome 弹出框是这个亚子的:

Edge的话弹出这个亚子:

输出的话有以下常用的方法

  • 弹出框: alert(1);

    给开发人员看的,用户看的太丑了

    不同浏览器的弹出框样式都不一样,会有专门的 UI 组去设计弹出框的。

    优点:直观,明显
    缺点:会卡住线程

  • 控制台打印: console.log(1);


    ## 运算 运算有:算数运算,赋值运算,关系运算,三目运算,逻辑运算符,指数运算符

算数运算

  1. 加法 +:数 + 字符串中,数会自动转换成字符串,这是隐式转换,
    num1 + "" 这样就会转换成字符串,这也是隐式转换*,对其结果没影响
  2. 减法 -字符串-0 结果是 Number 类型的,这个隐式转换只能转纯数字的,比方说 “1qwe” - 0 中,1qwe他就不是纯数字,它会被转成 NaN
  3. 乘法 *:不说了,字符串玩不了
  4. 除法 /:比如123 取十位的数的话,123 先除以 10,然后取余 %10
  5. 取余 %:取个位,比如取10的余数:123 % 10 = 3
  6. 自加 ++
    num3 = num1++ 先赋值,后自己加加
    num4 = ++num1 先自增,后赋值
  7. 自减 --

赋值运算

  • 加等 +=
  • 减等 -=
  • 乘等 *=
  • 除等 /=
  • 取余等 %=

关系运算

返回布尔值,有 True,和 False
== != >= <=

  • 两个 == 数值相等就行,比方 1=="1" 这个就是 true
  • 严格相等=== 是数值相等并且数据类型也要相等,比方 1==="1" 这个就是 False?

    关系运算中的特殊题目

Javascript
1
2
3
4
5
6
7
//1.数和纯数字的字符串比较
//把字符串变成数字
console.log(5 < "10");
//true

console.log(5 > "10");
//false
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
//1.1数和不纯数字的字符串比较
//不纯数字在转化成数时,变成NaN
console.log(5 < "10a");
//false

console.log(5 > "10a");
//false

console.log(5 < NaN);
//false

console.log(5 > NaN);
//false
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//2.数字跟 true 和 false 对比
//true 等于1,false 等于0 (只是在和数字比较的时候)
console.log(5 > true);
//true

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

console.log(1 === true);
//false

console.log(0 == false);
//true

console.log(0 === false);
//false
Javascript
1
2
3
4
5
6
7
8
9
//3.字符串和对象的比较
//比的是字符串每一位的的asc2码,从头开始比较
var c = "xj";
var d = {x:1};
console.log(c < d);
//false

console.log(c > d);
//true
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//4.常见的几个情况
console.log(NaN == NaN);
//false

//如何让NaN等于NaN呢?
console.log(Object.is(NaN, NaN));

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

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

console.log(0 == -0);
//true
  • 对象在比较的时候会转换成 [object Object]
Javascript
1
2
3
4
5
6
7
console.log({6:8} > "7");
//true
console.log(({6: 8}.toString()));
//[object Object]

//这里的{6:8}会转换成 [object Object]
//也就是"7"和"["比较,"["的asc2是91,所以是中括号大

三目运算

样式是这个亚子的:var flag = (a > b) ? true : false; ?微信小程序中经常用

逻辑运算

  • && 与运算
  • || 或运算
  • ! 非运算 (烧脑题:! isNaN == true) 值为 false

指数运算符

用到数学库 Math.pow(底数,幂数),这是 ecma 规定的求幂方法


循环

循环有三种:whiledo-whilefor

  • do-while:先执行语句,后判断
    猜数游戏:
Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
do{
var guessNum = parseInt(prompt("你要猜啥数啊:请输入" + min +"~"+ max + "之间的数"));
if(guessNum > 100 || guessNum < 0){
alert("你输错了,给我重新输入!");
continue;
}
if(guessNum > num){
max = guessNum;
alert("哎呀数大了,请输入" + min +"~"+ max + "之间的数");
}else if (guessNum < num) {
min = guessNum;
alert("数太low了,请输入" + min +"~"+ max + "之间的数");
}else{
alert("你猜对了!");
break
}
}while (true)
  • while: 先判断,后执行语句
  • for: 比较重要的循环,很常见
Javascript
1
2
3
4
5
6
7
8
9
for (1初始变量,2条件,4步长){
3语句;
}

执行顺序为 `1初始变量--2条件--3语句--4步长--2条件--3语句--4步长.....`

for(var i=1;i <= 10;i++){
sum += i * i;
}

For 循环的优化

在循环的条件中,尽量把值写成 固定 的,不要老是去获取值,比如这样

Javascript
1
2
3
4
//优化前
for(var i = 0;i < loc.lenght;i++){}
//优化后
for(var i = 0,len = loc.lenght;i < len;i++){}

链式作用域 *

在(10-25)日考了一遍,没有想起来!!!!

现在有这样一个问题:我想给每个 li 用 for 循环添加点击事件,点击那个li,就输出这个的下标, 语句如下:

Javascript
1
2
3
4
5
6
7
var li = document.getElementsByTagName("li");

for (var j = 0; j < li.length; j++) {
li[j].onclick = function () {
console.log(j); /* 这里j的值其实是 window.j,值是跳出for循环时的值,为5*/
}
}

这样写看着没啥问题,以为点第一个 li 就会打印 1,同理,但是结果如下:

这并不是我想要的结果啊,如何改呢,在外面套层匿名函数,如下:

Javascript
1
2
3
4
5
6
7
8
var li = document.getElementsByTagName("li");
for (var j = 0; j < li.length; j++) {
(function (j) { /*来个匿名函数,j在console时,找不到值的话就会像上级的函数中寻找参数值*/
li[j].onclick = function () {
console.log(j);
}
})(j)
}

再次测试结果如下:

结果是我想要的。


条件语句

条件选择包括 if-else,和 switch-case

  • if 语句
    格式要写成如下,注意 if 第一个括号的位置,不要换行,还有 else if 和 else 的位置,在括号之后写,这是大公司的规范
Javascript
1
2
3
4
5
6
7
8
9
10
var mark = parseInt(prompt("请输入考试成绩:"));
if(mark > 90){
alert("优");
}else if( mark >= 80 && mark < 90){
alert("良");
}else if(mark >= 60 && mark < 80){
alert("中");
}else{
alert("差");
}
  • switch 语句
    如果分支很多,switch 的效率会更高点
    注意点:每个语句最后 要有 break 跳出,不然会一直往下走的,比如case1没写break的话,那么就会走case1,case2…直到遇到 break
    default 是除了以上case,最后执行的,看一下下面的代码,能理解的更好

    用法如下

Javascript
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
var month = parseInt(prompt("请输入月份:"));
switch (month) {
case 1:;
case 2:;
case 3:;
alert("第1季度");
break
case 4:;
case 5:;
case 6:;
alert("第2季度");
break
case 7:;
case 8:;
case 9:;
alert("第3季度");
break
case 10:;
case 11:;
case 12:;
alert("第4季度");
break;
default:
alert("你TM输错了");
break;

}

与 C 语言不一样的细节

  • for(var i = 1;i <= 100;i++) 中的变量 i全局变量
  • 单引号,双引号 都是字符串!
  • 在函数中,js 的形参可以是多个,不需要严格数量一致
Javascript
1
2
3
4
5
function text(x,y,z) {  /*x 只在函数里有用*/
/*与其他语言不一样,js中形参可以是多个,不需要严格数量一致*/
sum = x + 1;
}
text(1)

函数

首先函数分为:

  1. 无参函数
  2. 有参函数
  3. 匿名函数:自调用,他自己会立即执行函数,能够解决很多问题
    变量初始化以后要放在匿名函数中,自调用

声明

有参 & 无参的声明如下

Javascript
1
2
3
4
5
6
function text() {  /*x 只在函数里有用*/
/*与其他语言不一样,js中形参可以是多个,不需要严格数量一致*/
alert("点我干嘛?");

document.writeln(""); /*往页面中写东西,仅供测试*/
}

匿名函数的声明如下,匿名函数也可以传递参数

Javascript
1
2
3
(function (){                   /*匿名函数的自调用*/ /*这里有个括号*/
alert("qwe") /*立即执行函数,能够解决很多问题*/
})() /*qwe不加引号为变量*/

截断

函数内经常写 return ;
return 的值是返回给了函数,没有 return 的话此函数的值是 Undefined,return 还会截断代码,其后面的语句将不会执行

变量、函数提升(es5)

浏览器的默认行为,浏览器会把 变量的声明提到最前面

Javascript
1
2
console.log(x);
var x = 1;

这时候的 console.log(x) 的结果是 undefined ,是个数据类型✍,而 不是报错 ❌(c++ 会把他当作报错处理),这两句话等价于

Javascript
1
2
3
var x; 			//先声明
console.log(x);
x = 1;

封装

把功能包装到函数里

  • 缘由:增加代码的复用性?
  • 一个好的封装要给传递的参数加上 默认值
  • 功能拆分,降低耦合性(关联程度越高,耦合性越高),可以提高其独立性。
Javascript
1
2
3
4
5
function stopBul(e) {
e = e || window.event;
e.stopPropagation(); /*这里可以做封装处理*/
/*也可以做 ie 兼容*/
}

水仙花数的判断:

Javascript
1
2
3
4
5
6
7
8
9
10
function check_isWaterNum(num) {
var a = parseInt(num / 100);
var b = parseInt(num /10) % 10;
var c = parseInt(num % 10);
if(Math.pow(a,3) + Math.pow(b,3) + Math.pow(c,3) === num){
return true;
}else{
return false;
}
}

Argument

Arguments 用来拿到所有传递的参数

Javascript
1
2
3
4
function text1() {
console.log(arguments); /*用来承接传过来的参数*/
}
text1("1","2");

Chrome 控制台内容如下:


函数调用

  • 直接调用
  • 事件调用
    比方说用户点击事件,参考代码如下:
Code
1
2
3
4
5
6
7
​```js
//这个写在body


function text(){ //这个写在script里
return;
}

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

### 全局变量 & 局部变量
如果是局部变量的话,那么它就会有变量生命周期,当局部变量在函数内执行完毕后, gc(gc 是垃圾处理 )会把局部变量收回。

### 默认值

- 参数后面的值更需要默认值,因为我们在调用一个方法的时候,可能就写一个实参,而这个方法可能有多个实参,而你不去传值的话,方法也应该有效,这时候就需要这个方法里有默认值。

```js
/*设计:如果不传参的话就报错*/
function error() {
throw new Error("错误")
}

//主要是这里,默认值给了一个报错函数
function test(a = error()) {
console.log(a);
}

test(5);
//5

test();
//Uncaught Error: 错误

函数的 length (ES 6)

函数的 length 是找多少个形参没有默认值的

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
   function show(a, b, c = 2) {

}
console.log(show.length);
//2
//这里a,b就没有默认值,所以输出2

function show1(a = 3, b, c = 2) {

}
console.log(show1.length);
//0
//看有多少个参数没有默认值,从左往右数,a是第一个,有值
//虽然b没有初值,但是不符合条件

函数中参数的作用域 (ES 6)

一旦设置了函数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域
等到初始化结束这个作用域就会消失
这种语法行为,在不设置参数默认值时,是不会出现的

Javascript
1
2
3
4
5
6
7
8
9
var x = 1;
function test(x, y = x) {
console.log(y)
}
test(2);
//2

test();
//undefined
Javascript
1
2
3
4
5
6
7
8
9
//
var x1 = 1232;
/*这里给y1赋值,是不会用函数里面的*/
function test1(y1 = x1) {
let x1 = 22;
console.log(y1);
}
test1();
//1232

事件、事件因子 e

这里引入个重要的变量 e,事件因子,记录所有的参数,包括鼠标点击的笛卡尔坐标,距离 body 的margin 值等等
e 事件中 path 记录着层级结构,前端的结构中,最大的是 Window 、然后是 document、html、body

几种事件的分类如下:

鼠标事件

on 代表事件触发
常用的鼠标事件有 :

  • onmousedown-鼠标按下
  • onmouseup-鼠标松开
  • onmousemove-鼠标移动
  • onmouseout-鼠标移出
  • onclick按下并抬起 down and up

键盘事件:(08-06 补)

首先你想:这个事件应该触发在谁身上,应该是 body 吧。
那么先获取 body var key = document.body;
然后在 body 上加事件触发器 onkeydown

  • onkeydown 按键被按下

    如果是 shift 键的 keyCode 话,左 shift 和右 shift 就一样
    e.code 是键盘编码
    e.code,keycode不区分大小写,key 区分大小写
    通常是用键盘编码,是一套规范,浏览器通用的

Html 事件:用户触发的

此事件有如下几个常用的触发器:

  • onselect 文本被选中
  • onreset 重置
  • onresize 窗口重新调整大小
  • scroll 监测滚动条,只要滚动条一动就会触发
  • **`Window.onload = function () {
        /!*一般是最后执行的*!/
    }*/`** 文档就绪函数,所有文档(很难加载的东西:图片,视频,音频;这些也算是文档)加载完之后才会调用此函数
  • onchange 失去焦点时判断内容是否改变(一般是 input框 或者是 textarea 文字?域)
  • onfocus 焦点,元素获得焦点时触发,一般也是input框这类能输入的有焦点
  • oninput 实时监测 input 框,只要输入一个值就会触发,删去一个值也是

获取当前点击对象的方法

  • e.path[0]
  • e.target
  • console.log(this) ,js 中 this 看最终谁调用,跟 java 一点也没有关系

画板制作:事件练习

  • 主要是学习分析思路,引入了重要的因素 开关 flag ,默认通常是关闭的,当鼠标按下的时候,flag=true 开启 context.stroke();
  • canvas 这个如果在 style 里设置宽高的话,画画的时候就会错位,因为 CSS 是改的缩放,所以要用canvas自带的宽高写在 canvas 标签内样式中,不是 style 里!!
html
1
2

<canvas height="555" width="1288">canvas>

这是个画板

html
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>画画</title>
<style>
*{
margin: 0px;
padding: 0px;
}
canvas{
/* height: 555px;*/
display: flex;
/*width: 1288px ;*/
border: 2px solid skyblue;

}
.tool{
display: flex;
flex-wrap: wrap;
height: 100px;
width: 1288px;
margin: 0px auto;
background-color: pink;
justify-content: space-around;
align-content: center;

margin-top: 10px;
}
.tool div{
height: 60px;
width: 8%;
/*background-color: orange;*/
border: 1px solid #999999;
}
.color1{
background-color: #b3ffc1;
}
.color2{
background-color: #923810;
}
.color3{
background-color: #7b5f3e;
}
.color4{
background-color: skyblue;
}
.size1,.size2,.size3,.size4{
text-align: center;
line-height: 60px;
}
</style>
</head>
<body>
<canvas height="555" width="1288"></canvas>
<div class="tool">
<div class="color1" onclick="change_color('#b3ffc1')"></div>
<div class="color2" onclick="change_color('#923810')"></div>
<div class="color3" onclick="change_color('#923810')"></div>
<div class="color4" onclick="change_color('skyblue')"></div>
<div class="size1"> x1 </div>
<div class="size2"> x2 </div>
<div class="size3"> x4 </div>
<div class="size4"> x8 </div>
</div>


</body>

<script>
/*canvas 空在if中代表false*/
/*canvas属于html5,ie678不好使*/
var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
var color = "black";
/*moveto 起始点,lineTo终点,lineWidth = 20,strokeStyle = "red"*/
/*stroke 画*/
/* 画布.beginPath() 新路径*/

/*传参不一样 函数一样 :重载*/

/*开关flag通常是false的*/
/*变量污染*/
/*鼠标按下*/
var flag = false;
canvas.onmousedown = function (e) {

var x = e.clientX;
var y = e.clientY;
context.strokeStyle = color;
context.moveTo(x,y);
context.beginPath();
flag = true;
};
/*鼠标移动*/
canvas.onmousemove = function (e) {
if (flag) {
var x = e.clientX;
var y = e.clientY;
console.log(e);
context.lineTo(x,y);
context.stroke();
}

};
/*鼠标弹起*/
canvas.onmouseup = function () {
flag = false;
};
/*鼠标移出*/
canvas.onmouseout = function () {
flag = false;
};
var a;
function change_color(a) {
color = a;
}
</script>
</html>

算法介绍

n 位数的倒序

比方说输入个 1234,输出的结果 4321

Javascript
1
2
3
4
5
6
7
8
9
var number = parseInt(prompt("请输入一个4位数"));
var d = 0;
var sum = 0;
while(number > 0){
d = ( number % 10 ); /*取个位*/
sum = sum * 10 + d; /*倒序求和*/
number = parseInt(number / 10); /*把number缩小*/
}
alert(sum);

从 0~100,非 3 的倍数的和相加大于 2000 时的位数

一个判断比较装逼的语句 i / 3 == parseInt(i / 3) 这个语句也可以判断是否能被三整除,如果能整除,返回 True,否则返回 False

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var sum = 0;

/* 这里的i是全局变量 */

for(var i = 1;i <= 100;i++){ /*有些场景的话会更好*/

if(i % 3 != 0 ){ /* i / 3 == parseInt(i / 3) 也能判断*/
sum += i;
if(sum >= 2000){
alert("第" + i + "位加到了2000,和为" + sum);
break;/*这个break是跳出所有的if,跳出了for*/
}
}
}
文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/59368.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论