概述
以下简称 JS,首先 JS 跟 java 是两个东西,JS 是专门用来做 功能 的,有如下功能:
- 表单验证,减轻服务端的压力
- 添加页面动画效果,等等
在 body 外建立 <script></script>
所有的 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
全局变量
function text() {
a = 1;/*这个是全局变量,es5的引擎就是这样实现的
等价于window.a*/
window.b = 2;
/*为什么要加var:因为他们有本质上的区别,不加var 是追加在windows下的子空间
* 加了var 就是开辟新的空间*/
}
text();
注释方法
-
在代码中有 双斜杠
//单行注释
来单行注释 -
也可以使用快捷键 Ctrl + Shift + / 来多行注释
数据类型 *
- 基本数据类型:除了object
- 引用数据类型:object
- 引用:function
数据类型有 6 大类 (ECMA5 版本的)
- undefined:未定义
- object 复杂数据模型
- boolean:布尔运算
- string:字符串
- number:数,包括整数+浮点
- null:空值
ECMA6 中添加新的数据类型 symbol
typeOf 能返回的值 *
检查数据类型用 typeof ,用法如下: typeof (sum);
- undefined
- object
console.log(typeof (null));
//object
- boolean
- string
- number
- function (就这个是跟数据类型不一样的)
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);
运算
运算有:算数运算,赋值运算,关系运算,三目运算,逻辑运算符,指数运算符
算数运算
- 加法
+
:数 + 字符串中,数会自动转换成字符串,这是隐式转换,
num1 + ""
这样就会转换成字符串,这也是隐式转换*,对其结果没影响 - 减法
-
:字符串-0 结果是 Number 类型的,这个隐式转换只能转纯数字的,比方说 “1qwe” - 0 中,1qwe他就不是纯数字,它会被转成 NaN - 乘法
*
:不说了,字符串玩不了 - 除法
/
:比如123 取十位的数的话,123 先除以 10,然后取余 %10 - 取余
%
:取个位,比如取10的余数:123 % 10 = 3
- 自加
++
:
num3 = num1++
先赋值,后自己加加
num4 = ++num1
先自增,后赋值 - 自减
--
赋值运算
- 加等
+=
- 减等
-=
- 乘等
*=
- 除等
/=
- 取余等
%=
关系运算
返回布尔值,有 True,和 False
== != >= <=
- 两个
==
数值相等就行,比方1=="1"
这个就是 true - 严格相等:
===
是数值相等并且数据类型也要相等,比方1==="1"
这个就是 False?
关系运算中的特殊题目
//1.数和纯数字的字符串比较
//把字符串变成数字
console.log(5 < "10");
//true
console.log(5 > "10");
//false
//1.1数和不纯数字的字符串比较
//不纯数字在转化成数时,变成NaN
console.log(5 < "10a");
//false
console.log(5 > "10a");
//false
console.log(5 < NaN);
//false
console.log(5 > NaN);
//false
//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
//3.字符串和对象的比较
//比的是字符串每一位的的asc2码,从头开始比较
var c = "xj";
var d = {x:1};
console.log(c < d);
//false
console.log(c > d);
//true
//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]
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 规定的求幂方法
循环
循环有三种:while
,do-while
,for
-
do-while:先执行语句,后判断
猜数游戏: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: 比较重要的循环,很常见
for (1初始变量,2条件,4步长){ 3语句; }
执行顺序为
1初始变量--2条件--3语句--4步长--2条件--3语句--4步长.....
for(var i=1;i <= 10;i++){ sum += i * i; }
For 循环的优化
在循环的条件中,尽量把值写成 固定 的,不要老是去获取值,比如这样
//优化前
for(var i = 0;i < loc.lenght;i++){}
//优化后
for(var i = 0,len = loc.lenght;i < len;i++){}
链式作用域 *
在(10-25)日考了一遍,没有想起来!!!!
现在有这样一个问题:我想给每个 li 用 for 循环添加点击事件,点击那个li,就输出这个的下标, 语句如下:
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,同理,但是结果如下:
这并不是我想要的结果啊,如何改呢,在外面套层匿名函数,如下:
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 的位置,在括号之后写,这是大公司的规范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,最后执行的,看一下下面的代码,能理解的更好用法如下
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 的形参可以是多个,不需要严格数量一致
function text(x,y,z) { /*x 只在函数里有用*/ /*与其他语言不一样,js中形参可以是多个,不需要严格数量一致*/ sum = x + 1; } text(1)
函数
首先函数分为:
- 无参函数
- 有参函数
- 匿名函数:自调用,他自己会立即执行函数,能够解决很多问题
变量初始化以后要放在匿名函数中,自调用
声明
有参 & 无参的声明如下
function text() { /*x 只在函数里有用*/
/*与其他语言不一样,js中形参可以是多个,不需要严格数量一致*/
alert("点我干嘛?");
document.writeln(""); /*往页面中写东西,仅供测试*/
}
匿名函数的声明如下,匿名函数也可以传递参数
(function (){ /*匿名函数的自调用*/ /*这里有个括号*/
alert("qwe") /*立即执行函数,能够解决很多问题*/
})() /*qwe不加引号为变量*/
截断
函数内经常写 return ;
return 的值是返回给了函数,没有 return 的话此函数的值是 Undefined,return 还会截断代码,其后面的语句将不会执行
变量、函数提升(es5)
浏览器的默认行为,浏览器会把 变量的声明提到最前面
console.log(x);
var x = 1;
这时候的 console.log(x) 的结果是 undefined ,是个数据类型✍,而 不是报错 ❌(c++ 会把他当作报错处理),这两句话等价于
var x; //先声明
console.log(x);
x = 1;
封装
把功能包装到函数里
- 缘由:增加代码的复用性?
- 一个好的封装要给传递的参数加上 默认值
- 功能拆分,降低耦合性(关联程度越高,耦合性越高),可以提高其独立性。
function stopBul(e) {
e = e || window.event;
e.stopPropagation(); /*这里可以做封装处理*/
/*也可以做 ie 兼容*/
}
水仙花数的判断:
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 用来拿到所有传递的参数
function text1() {
console.log(arguments); /*用来承接传过来的参数*/
}
text1("1","2");
Chrome 控制台内容如下:
函数调用
-
直接调用
-
事件调用
比方说用户点击事件,参考代码如下:<div onclick="text()"></div> //这个写在body function text(){ //这个写在script里 return; }
全局变量 & 局部变量
如果是局部变量的话,那么它就会有变量生命周期,当局部变量在函数内执行完毕后, gc(gc 是垃圾处理 )会把局部变量收回。
默认值
- 参数后面的值更需要默认值,因为我们在调用一个方法的时候,可能就写一个实参,而这个方法可能有多个实参,而你不去传值的话,方法也应该有效,这时候就需要这个方法里有默认值。
/*设计:如果不传参的话就报错*/
function error() {
throw new Error("错误")
}
//主要是这里,默认值给了一个报错函数
function test(a = error()) {
console.log(a);
}
test(5);
//5
test();
//Uncaught Error: 错误
函数的 length (ES 6)
函数的 length 是找多少个形参没有默认值的
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)
一旦设置了函数的默认值,函数进行声明初始化时,参数会形成一个单独的作用域
等到初始化结束这个作用域就会消失
这种语法行为,在不设置参数默认值时,是不会出现的
var x = 1;
function test(x, y = x) {
console.log(y)
}
test(2);
//2
test();
//undefined
//
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 里!!,canvas自己可以改宽高。
<canvas height="555" width="1288"></canvas>
<!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
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
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*/
}
}
}