JavaScript笔记一

啊熊
253 阅读4分钟

www.lvyestudy.com/javascript 学习笔记

JavaScript简介

  • js，这是一种嵌入到html页面中的编程语言，由浏览器一边解释一边执行。

  • HTML用于控制网页的结构，CSS用于控制网页的外观，而JavaScript控制着网页的行为。

  • 学习建议

    • JavaScript是当下最流行也是最复杂的一门编程语言，对于JavaScript的学习，我给初学者两个建议。
    • 学完js，不要急着去学习js进阶内容，应该去学习JQuery
    • 经过jQuery的学习，会让我们对JavaScript的基础知识有更深一层的理解。等我们学完了jQuery，再去学习JavaScript进阶的内容。
    • 忽略细节，多学几遍

开发工具

  • HBuilder
  • 使用HBuilder创建一个项目

js引入方式

  • 3种方式：外部，内部，元素事件。 -（1）document.write()：在页面输出一个内容。 -（2）alert()：弹出一个对话框。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Hello World</title>
		<script type="text/javascript">
			function alertInfo() {
				alert('好好学习');
			}
		</script>
	</head>
	<body>
		<h1>我是一个标题</h1>
		
		<!-- 1.元素内部JavaScript -->
		<!--<input type="button"value="按钮" onclick="alert('元素属性JavaScript')" />-->
		<input type="button" value="按钮" onclick="alertInfo()" />
		<a href="javascript:alert('提示信息')">a标签</a>
		
		<!-- 2. 外部JavaScript -->
		<script src="js/index.js"></script>
		
		<!-- 3. 内部JavaScript -->
		<script type="text/javascript">
			document.write("我是内部JavaScript。")
		</script>
		
	</body>
</html>

document.write('外部JavaScript，我是从外部文件引入的一段内容。');

一个简单的js程序

<script type="text/javascript">
// 下面这个例子实现的功能是：当页面打开时，会弹出对话框，内容为“欢迎光临萌萌小店”；当页面关闭时，也会弹出对话框，内容为“记得下次再来喔”。
	window.onload = function () {
		alert("欢迎光临萌萌小店！");
	}
	
	widnow.onbeforeunload = function (event) {
		var e = event || window.event;
    e.returnValue = "记得下来再来喔！";
	}
// 上面代码在不同浏览器运行的效果有一点不一样，但是功能是一样的。
</script>

语法基础

语法简介

  • 人类有非常多的语言，比如中文，英语，法语等。计算机也有很多语言，比如C/C++/java等。JavaScript就是众多计算机语言中的一种。

  • 跟人类语言类似，计算机语言也有一些共性，基本的变量，表达式，运算符，分支，循环，数组，函数等等。

  • 这一章种，我们主要学习JavaScript以下7个方面的语法：

    • 变量与常量
    • 数据类型
    • 运算符
    • 表达式与语句
    • 类型转换
    • 转义字符
    • 注释

变量与常量

  • 变量
    • 变量指的是一个可以改变的量。
    • 变量的命名规则
      • 由字母，下划线，或数字组成，并且第一个字符必须是“字母，下划线，或数字组成，并且第一个字符必须是 “字母，下划线，”。
      • 变量不能是关键字或保留字。
      • 推荐使用驼峰命名，使用有意义的名字。
  • 变量的使用

    • 变量的声明

    • 变量的使用

    • 例如：var a = 10;

    • 含义：用var声明一个变量a，并且数值10赋值给它。

  • 常量
    • 常量指的是一个不能改变的量。
    • 一般情况下，常量名大写，例如，var PI = 3.14;
// 变量的使用
var a = 10;
a = 12;
document.write(a);

// 同时声明多个变量
var a = 10, b = 20, c = 30;

// 常量
var DEBUG = 1;

数据类型

  • 在JavaScript中，数据类型可以分为两种：一种是基本数据类型；另一种是引用数据类型。
  • 基本数据类型有5种：数字、字符串、布尔值、未定义值和空值。而常见的引用数据类型有两种：数组、对象。

数字

  • js中不区分整型int和浮点型float。

字符串

  • 单引号或双引号括起来的一串字符。

布尔值

  • 布尔类型的值只有2个：true和false。
  • 布尔值最大的用途就是：选择结构的条件判断。

未定义值

  • 一个变量已经用var声明了，没有赋值。此时，这个变量的值就是未定义值。
  • 未定义值用undefined表示。

空值

  • 一个变量等于null，表示没有给这个变量分配空间。
// 数字
var n = 1001;
document.write(n);

// 字符串
var str = "好啊好啊";
document.write(str);

// 布尔值
var a = 10;
var b = 20;
if (a < b) {
	document.write("a小于b");
}

// 未定义值
var c;
document.write(c);

运算符

算数运算符

    • 加
    • 减
    • 乘
  • / 除
  • % 取余
  • ++ 自增
  • -- 自减
  • 对于算术运算符，我们需要重点掌握这3种：加法，自增，自减。
加法运算符
  • 在js中，加法运算符并非想象那么简单，我们需要注意3点
数字 + 数字 = 数字
字符串 + 字符串 = 字符串
字符串 + 数字 = 字符串

var a = 10 + 5;
var b = "从0到1" + "系列图书";
var c = "今年是" + 2021;
console.log(a, typeof a); // 15 "number"
console.log(b, typeof b); // 从0到1系列图书 string
console.log(c, typeof c); // 今年是2021 string

赋值运算符

  • 赋值运算符用于将右边表达式的值保存到左边的变量中去
  • =、+=、-=、*=、/=
  • 例如：var a+=b; 其实就是var a = a + b;的简化形式

比较运算符

  • 比较运算符用于将运算符两边的值或表达式进行比较，如果比较结果是对的，则返回true；如果比较结果是错的，则返回false。

  • 、<、>=、<=、==、!=

逻辑运算符

  • 逻辑运算符用于执行“布尔值的运算”

  • &&、||、!

  • 对于与运算、或运算和非运算，我们可以总结出以下5点。 （1）true的!为false，false的!为true。 （2）a&&b：a、b全为true时，结果为true，否则结果为false。 （3）a||b：a、b全为false时，结果为false，否则结果为true。 （4）a&&b：系统会先判断a，再判断b。如果a为false，则系统不会再去判断b。 （5）a||b：系统会先判断a，再判断b。如果a是true，则系统不会再去判断b。

条件运算符

  • 也叫“三目运算符、三元运算符”
  • 格式：var a = 条件 ? 表达式1 : 表达式2;

表达式与语句

  • 一个表达式包含“操作数”和“操作符”两部分。操作数可以是变量或常量，操作符就是之前学习的运算符。每一个表达式都会产生一个值。

  • 语句，简单来说用一个分号; 分开的一句代码。一般情况下，一个分号对应一条语句。

  • 语句就是“JavaScript的一句话”，而表达式就是“一句话的一部分”。

类型转换

  • 类型转换，指的是将“一种数据类型”转换为“另外一种数据类型”。

  • 例如：如果一个数字与一个字符串相加，则JavaScript会自动将数字转换成字符串，然后再与另外一个字符串相加，例如"2018"+1000的结果是"20181000"，而不是3018。其中，“JavaScript会自动将数字转换成字符串”指的就是类型转换。

  • JavaScript种，有两种类型转换：

    • 隐式类型转换
    • 显示类型转换

  • 隐式类型转换，指的是JavaScript自动进行的类型转换。显式类型转换，指的是需要我们手动用代码强制进行的类型转换。这两种方式，我们从名字上就能区分开来。

  • 对于隐式类型转换不作介绍。重点介绍下显示类型转换。

“字符串”转换为“数字”

  • 想要将字符串转换为数字，可以有2种方式。

    • Number()
    • parseInt()和parseFloat()

  • Number()方法可以将任何“数字型字符串”转换为数字。比如，“123”，“3.1415”这些只有数字的字符串就是数字型字符串，而"hao123"、"100px"等就不是。

  • parseInt()和parseFloat是提取“首字母为数字的任意字符串”中的数字，其中，parseInt()提取的是整数部分，parseFloat()不仅会提取整数部分，还会提取小数部分。

var a = Number("2018") + 1000;
document.write(a); // 3018
document.write("Number('123')：" + Number("123") + "<br/>"); // Number('123')：123
document.write("Number('3.1415')：" + Number("3.1415") + "<br/>"); // Number('3.1415')：3.1415
document.write("Number('hao123')：" + Number("hao123") + "<br/>"); // Number('hao123')：NaN
document.write("Number('100px')：" + Number("100px")); // Number('100px')：NaN
  • NaN指的是“Not a Number（非数字）”，从中可以看出，Number()方法只能将纯“数字型字符串”转换为数字，不能将其他字符串（即使字符串内有数字字符）转换为数字。
  • 在实际开发中，很多时候我们需要提取类似"100px"中的数字，要怎么做呢？这个时候就应该使用parseInt()和parseFloat()，而不是Number()了。
<script>
document.write("parseInt('123')：" + parseInt("123") + "<br/>");
document.write("parseInt('3.1415')：" + parseInt("3.1415") + "<br/>");
document.write("parseInt('hao123')：" + parseInt("hao123") + "<br/>");
document.write("parseInt('100px')：" + parseInt("100px"));
/*
parseInt('123')：123
parseInt('3.1415')：3
parseInt('hao123')：NaN
parseInt('100px')：100
 */
</script>
  • 从这个例子可以看出来，parseInt()会从左到右进行判断，如果第1个字符是数字，则继续判断，直到出现非数字为止（小数点也是非数字）；如果第1个字符是非数字，则直接返回NaN。
  • 但是这里第1个字符是加号（+）或减号（-），也就是非数字，parseInt()同样也是可以转换的。
<script>
document.write("parseFloat('123')：" + parseFloat("123") + "<br/>");
document.write("parseFloat('3.1415')：" + parseFloat("3.1415") + "<br/>");
document.write("parseFloat('hao123')：" + parseFloat("hao123") + "<br/>");
document.write("parseFloat('100px')：" + parseFloat("100px"));

/*
parseFloat('123')：123
parseFloat('3.1415')：3.1415
parseFloat('hao123')：NaN
parseFloat('100px')：100
 */
</script>

“数字”转换为“字符串”

  • 在JavaScript中，想要将数字转换为字符串，也有2种方式。

    • 与空字符串相加
    • toString()

  • 在实际开发中，如果想要将数字转换为字符串来用，我们很少使用toString()方法，而更多使用隐式类型转换的方式（也就是直接跟一个字符串相加）就行了。

转义字符

  • 所谓的转义字符，指的是在默认情况下某些字符在浏览器是无法显示的，不过为了能够让这些字符能够显示出来，我们可以使用这些字符对应的转义字符来代替。

  • ' 英文单引号

  • " 英文双引号

  • \n 换行符

  • js中转义字符很多，记住上面3种就可以了。

  • 注意：对于字符串换行，有以下2种情况。

    • 如果在是document.write()，应该用：
    • 如果是在alert()中，则应该用：\n

注释

  • 单行注释 //
  • 多行注释 /* 内容 */
avatar
文章
阅读
粉丝