JavaScript 基础学习笔记

JavaScript 简介

HTML 控制网页的结构，CSS 控制网页的外观，JavaScript 控制网页的行为

Java 与 JavaScript 的区别
JavaScript 往往在网页中使用，而 Java 却在软件、网页、手机 $App$ 等各个领域中使用
Java 是一门面向对象的语言，而 JavaScript 更像是一门函数式编程语言

外部 JavaScript

在实际开发中，为了提升网站的性能和可维护性，一般使用外部 JavaScript

<script src = "文件路径"></script>

内部 JavaScript

内部 JavaScript：把 HTML 代码和JavaScript 代码放在同一个文件中

<script type="text/javascript"> </script>
<script></script>  /* 等价 */

元素属性 JavaScript

元素属性 JavaScript：指的是在元素的 “事件属性” 中直接编写 JavaScript 或调用函数
document.write()：在页面输出一个内容
alert()：弹出一个对话框

语法基础

变量

JavaScript 命名规则：
变量由 字母、下划线、$ 或 数字 组成，并且第一个字母必须是字母、下划线 或 $
变量不能是系统 关键字 和 保留字

JavaScript 关键字
break、else、new、typeof、case、false、null、var、catch、for、switch、void、continue、function、this、while、default、if、throw、with、delete、in、true、do、instanceof、try

ECMA-262 标准的保留字
abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private、transient、debugger、implements、protected、volatile、double、import、public

浏览器定义的保留字
alert、eval、location、open、array、focus、math、outerHeight、blur、funtion、name、parent、boolean、history、navigator、parseFloat、date、image、number、regExp、document、isNaN、object、status、escape、length、onLoad、string

var 变量名 = 值;

常量

常量：不能改变的量；一般常量名全部大写

数据类型

基本数据类型： 数字、字符串、布尔值、未定义值、空值
引用数据类型： 数组、对象
JavaScript 中，所有变量都是用 var 声明

数字

数字是基本的数据类型，即数学上的数字，不分整型和浮点型

字符串

单引号括起来的一个或多个字符
双引号括起来的一个或多个字符
单引号括起来的字符串中可以包含双引号
双引号括起来的字符串中可以包含单引号
字符串不能进行加减乘除

布尔值

数字和字符串这两种类型的值可以有无数多个，但是布尔类型的值只有 true 和 false

未定义值

未定义值是用 var 声明的变量，但是并没有对这个变量进行赋值，未定义值就是 undefined

空值

数字、字符串等数据在定义的时候，系统都会分配一定的内存空间，空值用 null 表示

运算符

算术运算符

运算符	说明	举例
+	加	10+5 返回15
-	减	10-5 返回5
*	乘	10*5 返回50
/	除	10/5 返回2
%	求余	10%4 返回 2
++	自增	var i = 10; i++ 返回 11
–	自减	var i = 10; i–; 返回 9
JavaScript 中加法运算
**数字 + 数字 = 数字
字符串 + 字符串 = 字符串
字符串 + 数字 = 字符串**

赋值运算符

运算符	举例
=	var str = “JavaScript”
+=	var a += b 等价于 var a = a + b;
-=	var a -= b 等价于 var a = a - b;
*=	var a *= b 等价于 var a = a * b;
/=	var a /= b 等价于 var a = a/b;

比较运算符

运算符	说明
>	大于
<	小于
>=	大于等于
<=	小于等于
==	等于
!=	不等于

逻辑运算符

运算符	说明
&&	与运算
||	或运算
!	非运算

条件运算符

var a = 条件 ? 表达式1 : 表达式2;

表达式与语句

一个表达式包含 操作数 和 操作符 两部分

类型转换

JavaScript 类型转换包括 隐式类型转换 和 显式类型转换

字符串转换为数字

Number()：将数字型字符串转换为数字
parseInt() 和 parseFloat()：提取首字母为数字的任意字符串中的数字

数字转化为字符串

JavaScript 中，将数字转化为字符串的两种方式 与空字符串相加 和 toString()

转义字符

转义字符	说明
\’	英文单引号
\‘’	英文双引号
\n	换行符
document.write() 中换行，则应该用 <br/>
alert() 中换行用，则应该用 \n

注释

单行注释

// 单行注释
/* 多行注释 */

流程控制

顺序结构

JavaScript 按照代码从上到下、从左到右的顺序执行

选择结构

if

if(条件)  // 条件为真,执行 {}
{
    ....
}

if … else …

if(条件) // 条件为真执行 { }, 否则执行 else 部分
{
    ....
}
else
{
    ....
}

if 嵌套及多向选择

if 多项选择

if(条件1)
{
    ....
}
else if(条件2)
{
    ....
}
else
{
    ....
}

if嵌套

if(条件1)
{
    if(条件2)
    {
        ....
    }
    else
    {
        ....
    }
}
else
{
    if(条件2)
    {
        ....
    }
    else
    {
        ....
    }
}

switch 语句

switch(判断值)
{
    case 取值1:
        语块1; break;
    case 取值2:
        语块2; break;
    ......
    case 取值n:
        语句块n; break;
    default:
        语句块n+1;
}

循环结构

while

while(条件)
{
    // 当条件为 true,循环执行
}

do … while

do
{
    ....
}while(条件);

for

for(初始化表达式; 条件表达式; 循环后操作)
{
    ....
}

函数

函数定义

没有返回值的函数

function 函数名(参数1, 参数2, ..., 参数n)
{
    ....
}

有返回值的函数

function 函数名(参数1, 参数2, ..., 参数n)
{
   ....
   return 返回值;
}

全局变量与局部变量

全局变量： 主程序中定义，从定义开始，一直到整个程序结束为止
局部变量： 一般在函数中定义，函数之中可以使用，函数之外不能使用

函数调用

直接调用

一般用于没有返回值的函数

函数名(实参1, 实参2, ..., 实参n)

在表达式中调用

一般用于有返回值的函数

超链接中调用

在超链接中调用，指的是在 a 元素的 href 属性中使用 javascript:函数名 的形式调用函数。当用户点击超链接时，就会调用该函数

<a href="javascript:函数名"></a>

在事件中调用

当一个事件产生的时候，我们就可以调用某个函数来针对这个事件作出响应

函数嵌套

嵌套函数： 在一个函数的内部定义另外一个函数，在内部定义的函数只能在内部调用

内置函数

函数	说明
parseInt()	提取字符串中的数字，只限提取整数
parseFloat()	提取字符串中的数字，可以提取小数
isFinite()	判断某一个数是否是一个有限数值
isNaN	判断一个数是否是 NaN 值
escape	对字符串进行编码
uneascape()	对字符串进行解码
eval()	把一个字符串当做一个

字符串对象

JavaScript 常用的内置对象：字符串对象 String、数组对象 Array、日期对象 Date、数值对象 Math

获取字符串长度

字符串名.length

大小写转换

toLowerCase()：将大写字符串转化为小写字符串
toUpperCase()：将小写字符串转化为大写字符串

字符串名.toLowerCase()
字符串名.toUpperCase()

获取某一个字符

charAt(n)：获取第 n+1 个字符，因为字符串下标存储是从 0 开始的

字符串名.charAt(n)

截取字符串

substring(start, end)：start 表示开始位置，end 表示结束位置，end 可省略

字符串名.substring(start, end)

替换字符串

replace()：用一个字符串替换另外一个字符串的某一部分

字符串名.replace(原字符串, 替换字符串) /*替换第一个*/
字符串名.replace(正则表达式, 替换字符串) /*替换所有*/

分割字符串

split(“分割符”)：分割字符串，分割符可以是一个字符、多个字符或一个正则表达式

字符串名.split("分割符")

检索字符串的位置

indexOf 返回指定字符串首次出现的下标
lastIndexOf 返回指定字符串最后出现的下标

字符串名.indexOf(指定字符串) //不存在返回-1
字符串名.lastIndexOf(指定字符串)  //不存在返回-1

数组对象

创建数组

数组下标从 0 开始，而不是从 1 开始的

var 数组名 = new Array(元素1, ..., 元素n); //完整形式
var 数组名 = [元素1, ..., 元素n]; //简写形式
var arr = []; //创建一个空数组

数组赋值

arr[i] = 值;

获取数组长度

数组名.length;

截取数组某部分

slice(start, end)：start 开始位置，end 结束位置，[start, end) 表示截取的区间范围

数组名.slice(start, end);

数组添加元素

数组开头添加元素: unshift()

unshift()：在数组开头添加新元素

数组名.unshift(新元素1, 新元素2, ..., 新元素 n)

在数组结尾添加元素: push()

push()：在数组结尾添加新元素

数组名.push(新元素1, ..., 新元素n)

删除数组元素

删除数组中第一个元素:shift()

shift()：删除数组中第一个元素，并且可以得到一个新数组

数组名.shift()

删除数组最后一个元素:pop()

pop()：删除数组中最后一个元素，并且可以得到一个新数组

数组名.pop()

数组大小比较:sort()

数组名.sort(函数名)

<script>
    function up(a, b) // 定义一个升序函数
    {
        return a - b;
    }
    function down(a, b) // 定义一个降序函数
    {
        return b - a;
    }
</script>

数组颠倒顺序

reverse()：实现数组中所有元素的反向排列

数组名.reverse();

将数组元素连接成字符串: join()

join()：将所有元素连接成一个字符串

数组名.join("连接符"); //默认连接符是 ,

时间对象

var 日期对象名 = new Date();

获取时间👇

方法	说明
$getFullYear()$	获取年份，取值为 4 位数字
$getMonth()$	获取月份，取值为 0( 一月 ) 到 11 ( 十二月 ) 之间的整数
$getDate()$	获取日数，取值为 1~31 之间的整数
$getHours()$	获取小时数，取值为 0~23 之间的整数
$getMinutes()$	获取分钟数，取值为 0~59 之间的整数
$getSeconds()$	获取秒数，取值为 0~59 之间的整数

设置时间👇

方法	说明
$setFullYear()$	可以设置年、月、日
$setMonth()$	可以设置月、日
$setDate()$	可以设置日
$setHours()$	可以设置时、分、秒、毫秒
$setMinutes()$	可以设置 分、秒、毫秒
$setSeconds()$	可以设置 秒、毫秒

设置年月日

时间对象.setFullYear(year, month, day);
/*
year: 必选参数
month: 可选参数; 0 表示 1月, 1 表示 2月,以此类推
day: 可选参数, 用 1~31之间的整数表示
*/

时间对象.setMonth(month, day);
/*
month: 必选参数, 用 0~11 之间的整数表示
day: 可选参数, 用 1~31之间的整数表示
*/

时间对象.setDate(day); //day 必选参数, 用 1~31之间的整数表示

设置时分秒

时间对象.setHours(hour, min, sec, millisec);
/*
hour: 必选参数,表示时,取值为 0~23 之间的整数
min:可选参数,取值 0~59 之间的整数
sec: 可选参数,取值 0~59 之间的整数
millisec: 可选参数, 取值 0~59 之间的整数
*/

时间对象.setMinutes(min, sec, millisec);
/*
min:必选参数,取值 0~59 之间的整数
sec: 可选参数,取值 0~59 之间的整数
millisec: 可选参数, 取值 0~59 之间的整数
*/

时间对象.setSecond(sec, millisec);
/*
sec: 必选参数,取值 0~59 之间的整数
millisec: 可选参数, 取值 0~59 之间的整数
*/

获取星期几 getDay()

getDay()：获取表示今天是星期几的一个数字

时间对象.getDay(); // 0 表示星期日

数学对象

Math 对象的属性

属性	说明
$PI$	圆周率
$LN2$	2的自然对数
$LN10$	10的自然对数
$LOG2E$	以2为底的 e 对数
$LOG10E$	以10 为底的 e 对数
$SORT2$	2 的平方根
$SORT1\_2$	2 的平方根的倒数
角度写法

度数*Math.PI/180;

方法	说明
$abs(x)$	返回 $x$ 的绝对值
$sqrt(x)$	返回 $x$ 的平方根
$log(x)$	返回 $x$ 的自然对数( 底数为 $e$ )
$pow(x,y)$	返回 $x$ 的 y 次幂
$exp(x)$	返回 $e$ 的指数

最大值与最小值

Math.max(a,b, ...,n); //返回一组数中最大值
Math.min(a,b, ...,n); //返回一组数中最小值

取整运算

Math.floor(x); //向下取整
Math.ceil(x);  //向上取整

三角函数

方法	说明
$sin(x)$	正弦
$cos(x)$	余弦
$tan(x)$	正切
$asin(x)$	反正弦
$acos(x)$	反余弦
$atan(x)$	反正切
$atan2(x)$	反正切

随机数

Math.random();

随机生成某个范围内的数

Math.random()*m; //生成 0 ~ m 的随机数
Math.random()*m + n; //生成 n ~ m+n之间的随机数
Math.random()*m - n; //生成 -n ~ m-n 之间的随机数
Math.random()*m - m; //生成 -m ~ 0 之间的随机数

生成随机验证码 && 颜色值

<script>
    var str = "abcdefghijklmnopqrstuvwxyz";
    var arr = str.split("");
    var res = "";
    for(var i = 0; i < 4; i++)
    {
        var n = Math.floor(Math.random()*arr.length);
        res += arr[n];
    }
    document.write(res);
</script>

<script>
    function getRandomColor(){
        var r = Math.floor(Math.random()*(255+1));
        var g = Math.floor(Math.random()*(255+1));
        var b = Math.floor(Math.random()*(255+1));
        var rgb = "rgb("+ r + "," + g + "," + b + ")";
        return rgb;
    }
    document.write(getRandomColor());
</script>