JavaScript学习笔记

最新推荐文章于 2021-11-27 18:32:49 发布
最新推荐文章于 2021-11-27 18:32:49 发布
阅读量190 收藏
点赞数 1
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/THUG_IN_SUIT/article/details/109118692
版权

JavaScript入门

编辑器:
Sublime
H5Build
Atom
运行环境:
主流的浏览器
1、谷歌
2、IE
3、火狐
4、safari
JS组成:
1、ECMAScri
2、BOM(Browse Object Model):浏览器对象模型,指整个浏览器
3、DOM(Document Object Model):文档对象模型,指整个文档,从开始到结束

JavaScript语法

Sublime:!+Tab生成html模板

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">

	</script>
</head>
	<body>
	</body>
</html>

查看JS语法错误：
1、谷歌 chome控制台
2、火狐 fireBug

语法规范：

1、Script标签写在head标签里
2、所有JS代码都要写在Script标签里
3、每一条JS语句后面要加分号
4、可以引入多个Script标签，多个Script标签之间顺序执行
5、JS代码可以外部引入，src引入外部文件
6、若当前Script标签作用引入外部文件，则此Script标签不能写其他JS代码了

引入外部JS代码：

<script type="text/javascript" src="demo.js">
</script>

语句：

<script type="text/javascript">
</script>
//type="text/javascript"说明当前script标签中文本的类型

alert("Hello World!");
//在页面上弹出警告框

document.write("Hello World!")
//在当前文本上输入内容

当要输出时，需用"&lt；“代替”<"，"&gt；“代替”>"

<script type="text/javascript">
	document.write("&lt;/script&gt;");
</script>

关于注释：

//  单行注释		快捷键：ctrl+/
/*
	多行注释		快捷键：ctrl+Shift+/
*/

变量详解：

JS数据类型：

1、基本数据类型
	<1>数字(number)	100;3.14
	<2>字符串(string)	所有带单引号/双引号 'hello';"hello"
	<3>特殊数据类型	空值(null)	未声明(undefined)
2、复合数据类型

常量： 确定的值叫常量，也称字面量
变量： 值可以改变的量叫变量
变量初始化： 通过关键字var(系统定义的有特殊功能的单词)声明，声明变量的同时给变量赋值叫做初始化

var name = "xxx"；
var age = 18；

可以同时定义多个变量，变量之间使用逗号隔开

var name = "xxx",age = 18,sex = "男";

标识符： 用户自定义的名字
命名规则：
1、必须由数字、字母、下划线和美元符号$组成
2、不能以数字开头
3、区分大小写，如age和Age是两个变量
4、尽量顾名思义

typeof 变量/常量：输出当前变量/常量的数据类型

var name = 'xxx';
alert(typeof name);

【注】JS是弱语言，变量被赋值成什么类型就是什么类型，不要在后续的代码里改变变量的数据类型，容易引起代码歧义

自动数据类型转换：

运算符

运算符说明示例备注
+加a=5+8
-减a=8-5
/除a=20/5
*乘a=5*8
%取模——两个数相除的余数10%3=1
++一元自加，该运算符只带一个操作数，将操作数的值加1，返回的值取决于++运算符位于操作数的前面或是后面++x,x++++x：将返回x自加运算后的值。x++：将返回x自加运算前的值。
- -一元自减，该运算符只带一个操作数，将操作数的值减1，返回的值取决于++运算符位于操作数的前面或是后面- -x,x- -- -x：将返回x自减运算后的值。x- -：将返回x自减运算前的值。

复合赋值运算符： +=；*=；/=；%=

var tmp = 5;
tmp += 10;//tmp = tmp + 10
alert(tmp);//输出结果为15

var tmp = 5;
tmp *= 2;//tmp = tmp * 2
alert(tmp);//输出结果为10

运算法则：
1、任何类型的数据类型的数据和字符串类型的数据做相加操作时，其他数据类型会自动转换成为字符串类型，此时的相加操作不再是数学意义上的加法，而是进行字符串拼接，其中一个操作数是字符串的时候，“+”叫做字符串拼接符。

var tmp = 1 + 1;
alert(tmp);
//输出结果为2，类型为number

var tmp = "1"+ 1;
alert(tmp);
//输出结果为11，类型为string

var tmp = "你"+"好";
alert(tmp);
//输出结果为你好，类型为string

var tmp = "x"+"true";
alert(tmp);
//输出结果为xtrue，类型为string

var tmp = "x"+"undefined";
alert(tmp);
//输出结果为xundefined，类型为string

2、任何数据除了和字符串做相加运算外，先要将字符串转成数字在进行运算，与NaN(not a number)做算术运算的结果始终是NaN，包括NaN本身与NaN做算术运算结果也为NaN，字符串如果是纯数字字符串则转成数字，否则转成NaN。

var tmp = 1 - "2";
alert(tmp);
//输出结果为-1，类型为number

var tmp = 1 - "2b";
alert(tmp);
//输出结果为NaN

var tmp = NaN - NaN;
alert(tmp);
//输出结果为NaN

【注】布尔值：true转成数字为1，false转成数字为0
特殊数据类型：null转成数字为0，undefined转成数字为NaN

var tmp = 1 + true;
alert(tmp);
//输出结果为2，类型为number

var tmp = 1 + false;
alert(tmp);
//输出结果为1，类型为number

var tmp = 1 + null;
alert(tmp);
//输出结果为1，类型为number

var tmp = 1 + undefined;
alert(tmp);
//输出结果为NaN

关于0作被除数

var tmp = 1 / 0;
alert(tmp);
//输出结果为Infinity，无穷大

var tmp = -1 / 0;
alert(tmp);
//输出结果为-Infinity，无穷小

强制数据类型转换：

Boolean() ：将别的数据类型强制转换成布尔值
1、数字0转成布尔值为false，所有非零数字转换成布尔值都为true

var tmp = Boolean(0);
alert(tmp);
//输出结果为false

var tmp = Boolean(1);
alert(tmp);
//输出结果为true

var tmp = Boolean(-1);
alert(tmp);
//输出结果为true

2、空字符串转成布尔值为false，所有非空字符串(包括"0")转成布尔值为true

var tmp = Boolean("");
alert(tmp);
//输出结果为false

var tmp = Boolean("0");
alert(tmp);
//输出结果为true

var tmp = Boolean("x");
alert(tmp);
//输出结果为true

3、null和undefined转成布尔值都是false

var tmp = Boolean(null);
alert(tmp);
//输出结果为false

var tmp = Boolean(undefined);
alert(tmp);
//输出结果为false

Number() ：将别的数据类型强制转换成数字
1、布尔值 true => 1 false => 0

var tmp = Number(true);
alert(tmp);
//输出结果为1

var tmp = Number(false);
alert(tmp);
//输出结果为0

2、字符串 纯数字字符串 => 对应数字，否则 => NaN

var tmp = Number("2");
alert(tmp);
//输出结果为2

var tmp = Number("2b");
alert(tmp);
//输出结果为NaN

3、特殊数据类型 null => 0 undefined => NaN

var tmp = Number(null);
alert(tmp);
//输出结果为0

var tmp = Number(undefined);
alert(tmp);
//输出结果为NaN

ParseInt() ：兼容Number的功能，取整

var tmp = ParseInt("2b");
alert(tmp);
//输出结果为2

var tmp = ParseInt(3.14);
alert(tmp);
//输出结果为3

ParseFloat() ：取浮点数，可将别的数据类型转换成数字

var tmp = ParseFloat(3.14);
alert(tmp);
//输出结果为3.14，类型为number

一元运算符：

只能操作一个值的运算符称为一元运算符
a++; 表达式值：++后置，先取a的值，然后再进行+1操作

var a = 5；
alert(a++);	//结果为5
alert(a);	//结果为6

++a; 表达式值：++前置，先进行+1操作，然后再取a的值

var a = 5；
alert(++a);	//结果为6
alert(a);	//结果为6

a–; 表达式值：–后置，先取a的值，然后再进行-1操作

var a = 5；
alert(a--);	//结果为5
alert(a);	//结果为4

–a; 表达式值：–前置，先进行-1操作，然后再取a的值

var a = 5；
alert(--a);	//结果为4
alert(a);	//结果为4

关系运算符：

运算符说明示例
==等于：如果两个操作数相等，则返回真a == b
!=等于：如果两个操作数不相等，则返回真Var2 != 5
>大于：如果左边的操作数大于右边的操作数，则返回真Var1 > Var2
<大于：如果左边的操作数小于右边的操作数，则返回真Var2 < Var1
>=大于等于：如果左边的操作数大于或等于右边的操作数，则返回真Var1 >= 5;Var1 >= Var2
<=小于等于：如果左边的操作数小于或等于右边的操作数，则返回真Var2 <= 4;Var2 <= Var1

关系运算符中操作数为非数字时的比较规则
1、若两个操作数都是单字母字符串则比较两个字符串对应的字符编码值（ASCII码表）
2、若为多字母字符串，则对位依次比较，直到比较出大小终止
3、两个操作数有一个是数值，则将另一个转换成数值再进行比较
进阶：在等于和不等于比较，操作数为非数值
1、一个数为布尔值，则比较前将其转换成数值，false=>0;true=>1

alert(1 == true);//结果为true
alert(0 == false);//结果为true

2、一个操作数为字符串，则比较前将其转换为数值再进行比较

alert(20 == "20");//结果为true

3、一个操作数为NaN，则==返回false，!=返回true，并且NaN和NaN自身不等

alert(1 == NaN);//结果为false
alert(1 != NaN);//结果为true
alert(NaN != NaN);//结果为true

4、在全等"= = =“和全不等”! = ="上,只有当值和类型都相等才返回true，否则返回false

alert(20 === "20");//结果为false
alert(20 === number("20"));//结果为true

逻辑运算符：

与： Var1 && Var2
只有当两个表达式结果都为真的时候，与运算结果才为true（一假则假）
【短路操作】当表达式1为false的时候，表达式2将不会执行，即使表达式2有语法错误而无法执行，直接判断整个与运算为false

alert(5<3 && alert(a))
//结果为false，即使第二个表达式未声明

或： Var1 || Var2
只有当两个表达式结果都为假的时候，或运算结果才为false（一真则真）
【短路操作】当表达式1为true的时候，表达式2将不会执行，即使表达式2有语法错误而无法执行，直接判断整个或运算为true

alert(5>3 && alert(a))
//结果为true，即使第二个表达式未声明

非： !Var
逻辑非运算可以用于任何值，无论这个值是什么数据类型，结果都会返回一个布尔值（“true” or “false”）。运算流程是：先将值转换成布尔值然后取反
1、若操作数是一个空字符串，返回true
2、若操作数是一个非空字符串，返回false
3、若操作数是0，返回true
4、若操作数是任意非0数值（包括Infinity），返回false
5、若操作数是NaN，返回true
6、若操作数是undefined，返回true

alert(!"");//结果为true
alert(!"x");//结果为false
alert(!0);//结果为true
alert(!Infinity);//结果为false
alert(!NaN);//结果为true
alert(!undefined);//结果为true

流程语句：

三大流程控制结构：顺序；分支（选择）；循环
顺序结构： 最简单的程序结构，若干个语句依次执行
输入两个数，然后交换顺序再输出：

var num1 = 2;
var num2 = 1;
var tmp = num1;
num1 = num2;
num2 = tmp;
alert("num1:" + num1 + ";num2:" + num2);

选择结构：
【单分支】【格式】

if(判断条件){
	执行语句;
}

【注】JS语句中，把{}里的所有语句都当做一条语句对待，执行语句一定要比判断条件缩进四个空格

var num = x;
if(num % 2 == 0){
	alert("x")
	alert("是偶数")
}

【双分支】【格式】

if(判断条件){
	执行语句1;
}else{
	执行语句2；
}

判断一个数的奇偶性：

var num = x;
if(num % 2 == 0){
	alert("这是一个偶数");
}else{
	alert("这是一个奇数");
}

判断两个数的大小：

var num1 = x;
var num2 = y;
var max = null;
//如果声明变量的时候没有赋值，一般将这个变量的值设置成null
if(num1 > num2){
	max = num1;
}else{
	max = num2;
}

【多分支】【格式】

if(表达式1){
	执行语句1;
}else if(表达式2){
	执行语句2；
}else if(表达式3){
	执行语句3；
}
...
else{
	执行语句n；
}

var x = ?;
var y = null;
if(x < 1){
	y = x;
}else if(x >= 1 && x < 10){
	y = 2 * x + 1;
}else{
	y = 5 * x - 17;
}

【switch】【格式】
switch(表达式){
    case 常量1:
        语句1;
        break;
    case 常量2:
        语句2;
        break;
    case 常量3:
        语句3;
        break;
    default:
        上述都不成立执行这里;
        break;
}
表达式的结果等于哪个case的常量则执行其后的语句，执行完break以后就跳出switch结构，如果都不满足则执行default语句。
【注】1、break语句一定不能省略，否则会造成事件穿透
           2、default一般不要省略，为了避免语句歧义

var grade = 'A'
switch(grade)
	case "A":
		alert("80~100");
		break;
	case "B":
		alert("70~79");
		break;
	case "C":
		alert("60~69");
		break;
	case "D":
		alert("< 60");
		break;
	default:
		alert("error");
		break;

【三目运算符/条件运算符】【格式】
表达式1 ? 表达式2 : 表达式3;
执行过程：先求表达式1，若结果非0(真)则求表达式2；若结果0(假)则求表达式3
判断两个数的大小：

var num1 = x;
var num2 = y;
var max = numl > num1 : num2;
alert(max);

循环结构：
【while循环】【格式】

THUG_IN_SUIT
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
javascript
zzzz11y的博客
03-30 340
javascript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #a{font-size: 32px;text-decoration: underline;} </style> <script>
JavaScript语法详解（五）____运算符
congqianguaibaobao的专栏
05-31 659
一.赋值运算符
js运算符
weixin_46606000的博客
07-02 1111
1. 基本运算符 ++ 例 var a = 10; a = a + 1; document.write(a);//结果 11 a = a + 1;可以写成 a ++形式“，”++”即自身加一，再赋值给自身。a++是 a=a+1 的简化形式 ++a与a++的区别 例 var a = 1; document.write(a++); document.write(a); //答案 1；2 例 var a = 1; document.write(++a); document.write(a); //答案
Java或javaScript中的自增自减问题
weixin_44649811的博客
02-02 129
var a=5; var b=a++; document.write(a,b);//6,5 a=5; var c=++a; document.write(a,c);//6,6 a=5; var d=a++ + 1; document.write(a,d);//6,6 a=5; var e=(a++)+ (a++)+a+(a--)+(-...
alert方法使用
weixin_49321034的博客
08-07 806
<script type="text/javascript" src="12.js"></script> 调用js文件输出alert js文件如下 var arr = [];定义一个空函数 arr[0]=12; arr[2] = "abc";自动扩容数组，但是arr[1]中数值未定义undefine for(var i =0;i<arr.length;i++){ alert(arr[i]); } 输出结果： var arr = [true,1]; 把所有未
2109大数据第二阶段错题复习
ls021的博客
11-27 5641
下面的描述错误的是（B） A.Statement的executeQuery()方法会返回一个结果集 B.Statement的executeUpdate()方法会返回是否更新成功的boolean值 C.Statement的execute ()方法会返回boolean值 ，含义是是否返回结果集 D.Statement的executeUpdate()方法会返回值是int类型，含义是DML操作影响记录数 解析：JDBC在操作数据库时，exrcuteUpdate()会返回一个对数据库...
javaScript学习笔记
最新发布
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
2b2tQueueAlert:在队列减少时向您发送通知，以便您可以快速加入队列
05-25
2b2tQueueAlert 一个简单的节点脚本，它搭载在并在队列低于您选择的特定阈值时向您发出警报（可在config.js中配置）。 如果您不想要通知，也可以使用日志记录输出。 （也可以在config.js中配置）
JavaScript学习笔记讲解
05-07
这只是JavaScript学习笔记的一小部分，JavaScript还有更多高级特性和概念，如对象、数组、函数、类、模块、闭包等，以及DOM操作、事件处理、Ajax异步请求等内容，需要进一步深入学习和实践才能掌握。
JavaScript学习笔记.pdf
11-21
JavaScript 学习笔记 JavaScript 是互联网上流行的脚本语言，可以用于 HTML 和 web，广泛应用于服务器、PC、笔记本、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言，可以插入 HTML 页面的编程代码...
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
JavaScript 学习笔记（五）
10-29
在这一部分的学习笔记中，我们将深入探讨JavaScript中的本地对象、内置对象以及宿主对象，同时也会涉及作用域和关键字`this`的使用。 首先，我们来看本地对象。本地对象是JavaScript引擎自身提供的对象，它们直接由...
2-2警告（alert 消息对话框）
dada678的专栏
06-20 437
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。 语法: alert(字符串或变量); 看下面的代码: var mynum = 30; alert("hello!"); alert(mynum); 注:alert弹出消息对话框(包含一个
安全测试的考虑点及测试方法
xiaof_567的专栏
11-12 5840
软件安全性测试主要包括程序、数据库安全性测试。根据系统安全指标不同测试策略也不同。 用户认证安全的测试要考虑问题： 1.         明确区分系统中不同用户权限 2.         系统中会不会出现用户冲突 3.         系统会不会因用户的权限的改变造成混乱 4.         用户登陆密码是否是可见、可复制 5.         是否可以通过绝对途径登陆系统（拷贝
JavaScript面试题整理
weixin_34342905的博客
01-08 234
一、单选题 1、以下哪条语句会产生运行错误：（A） A.var obj = ( ); // 语法错误 B.var obj = [ ];//定义一个数组 C.var obj = { };//定义一个对象 D.var obj = / /;//定义一个正则表达式 2、以下哪个单词不属于javascript保留字：（B） A. with B. parent C....
alert方法
热门推荐
月小白
06-12 2万+
今天在看web类型的ctf练习题讲解时，遇到了一个alert()方法，题目是这样的 随便输入一串数字，提示密码错误，查看源文件，发现一段奇怪的代码，如下 输入key值是a的时候，返回true，否则提示密码错误。那我们就需要找到a的值，视频中老师将代码粘贴到控制台中，写成这样: var a,b,c,d,e,f,g; a = 3.14; b = a * 2; c = a + b;...
JavaScript学习笔记：元素交互与基本语法详解
本篇笔记记录了作者在学习JavaScript过程中的关键知识点，主要包括以下几个方面： 1. HTML中使用JavaScript: - 使用`<script>`元素插入脚本，这是在HTML文档中嵌入JavaScript的基本方式。 - 子页面与父页面之间的...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值