从0到1：JavaScript快速上手（笔记一）

2021-02-18 本文已影响0人静赏月之美

从0到1：JavaScript快速上手

基础

1、动态页面和静态页面

区别在于是否与服务器进行数据交互

2、JavaScript引入方式

HTML中引入JavaScript，一般有3种方式：

外部JavaScript。

使用script标签引入JavaScript

  <!DOCTPYE html>
  <html>
    <head>
        <meta charset="utf-8" />
          <title></title>
        <!--1.在head中引入-->
          <script src="index.js"></script>
      </head>
      <body>
            <!--2.在body中引入-->
          <script src="index.js"></script>
      </body>
  </html>

内部JavaScript。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <!-- 在 head 中引入 js -->
        <!-- 
            <script type="text/javascript"> 完整形式
         -->
        <script>
            // ...
        </script>
    </head>
    <body>
        <script>
            // ...
        </script>
    </body>
</html>

元素事件JavaScript。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="一个小按钮" onclick="alert('元素事件属性中调用JS')" />
        
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function alertMes()
            {
                alert("一个测试");
            }
        </script>
    </head>
    <body>
        <input type="button" value="按钮" onclick="alertMes()" />
    </body>
</html>

3、JS的小例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            window.onload = function()
            {
                alert("Welcome");
            }
            window.onbeforeunload = function(event)
            {
                // alert("test");
                // 功能不能实现...
                console.log("hahaha");
                var e=event || window.event;
                e.returnValue="see you again";
            }
        </script>
    </head>
</html>

4、语法

4.1关键字

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

		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	implement	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

4.2 基本数据类型

数字
- 不区分“整型”和“浮点型”
字符串
- 用单引号或双引号括起来的。
布尔值
- true
- false
未定义值
- 用var定义但是没有赋值的变量。
- 用 undefined 表示。
空值
- 空值： null
- null: 表示系统没有给这个变量分配内存空间

4.3 引用数据类型

4.4 运算符

算数运算符
- 加法运算符
  - 字符串 + 数字 = 字符串
赋值运算符
比较运算符

逻辑运算符
- 逻辑运算符
  
  && 与
  
  ` ` 或
  
  ! 非

逻辑运算符
`&&`	与
`		`	或
`!`	非

条件运算符
- var a = 条件？表达式1 : 表达式2

4.5 类型转换

隐式类型转换
- JavaScript自动进行的类型转换
显示类型转化
- “字符串” 转换为 “数字”
  - Number() 把“数字型字符串”转换为数字。
  - parseInt() parseFloat() 提取“首字母为数字的任意字符串”中的数字
- “数字” 转换为 “字符串”
  - 与空字符串相加
  - toString()

4.6 转义字符

\' 英文单引号
\" 英文双引号
\n 换行符
- 在document.write()中换行，用<br/>
- 在 alert() 中换行，用 \n

4.7流程控制

选择结构 if
选择结构 switch
循环结构
- while
- do...while
- for

4.8 函数

没有返回值的函数

function func_name(arg1, arg2)
{
}

有返回值的函数

function func_name(arg1, arg2)
{
    return 111
}

4.9 全局变量和局部变量

全局变量一般在主程序中定义，其有效范围是从定义开始，一直到整个程序结束。也就是全局变量在任何地方都可以使用
局部变量一般在函数中定义，其有效范围只限于在函数中。也就是局部变量只能在函数中使用，函数之外是不能使用函数中定义的变量的

4.10 函数调用

调用方式：

直接调用
- 一般用于“没有返回值的函数”
在表达式中调用
- 一般用于“有返回值的函数”，函数的返回值参与表达式的计算。

在超链接中调用

在a元素的href属性中用javascrupt:func_name的形式来调用。
当用户点击超链接时，就会调用该函数
```
<a href="javascript: func_name"></a>
```

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>在超链接中调用函数</title>
        <script>
            function expressMes () {
                alert ("在超链接中调用函数")
            }
        </script>
    </head>
    <body>
        <a href="javascript:expressMes ()">测试</a>
    </body>
</html>

在事件中调用

4.11 嵌套函数

在一个函数的内部定义另外一个函数
在内部定义的函数只能在内部调用，如果在外部调用，就会出错

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function func(a)
            {
                //嵌套函数定义，计算平方值的函数
                function multi(x)
                {
                    return x * x
                }
                var m = 1
                for (var i = 1; i <=multi(a); i++)
                {
                    m = m * i
                }

                return m
            }
            // 调用函数
            var sum = func(2) + func(3)
            document.write(sum)
        </script>
    </head>
    <body>

    </body>
</html>

4.12内置函数

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

5 符串对象

5.1 字符串对象：String

获取字符串长度
- string.length
大小写转换
- string.toLowerCase()
- string.toUpperCase()
获取某一个字符
- string.charAt(n)
截取字符串
- string.substring(start, end)
- 截取的范围是[start, end)
替换字符串
- string.replace(源字符串，替换字符串)
- string.replace(正则表达式，替换字符串)
分割字符串
- string.split('分隔符')
- 分割符可以是一个字符、多个字符或一个正则表达式
- 分割符不作为返回的数组元素的一部分
检索字符串的位置
- 找出“某个指定字符串”在字符串中“首次出现”的下标位置
  - string.indexOf('指定字符串')
  - match()
  - search()
- 方法可以找出“某个指定字符串”在字符串中“最后出现”的下标位置
  - string.lastIndexOf('指定字符串')
- 如果字符串中不包含“指定字符串” 返回-1
- 支持单个字符检索

5.2 组对象

创建
- var arrayName = new Array(arg1, arg2, arg3) // 不推荐
- var arrayName = [arg1, arg2, arg3] //推荐
增加新的元素
- ary[i] = arg_i
- ary.push(arg_i, i)
获取数组的长度
- arrayName.length
截取数组的某部分
- arrayName.slice(start, end)
- 取值范围是[start, end)
添加数组元素
- 在数组开头添加元素
  - arrayName.unshift(arg1, arg2, arg3)
- 在数组结尾添加元素
  - arrayName.push(arg1, arg2, arg3)
删除数组的元素
- 删除数组中第一个元素
  - array.Name.shift()
  - shift()删除数组中的第一个元素，并且可以得到一个新的数组
- 删除数组中最后一个元素
  - arrayName.pop()
  - pop()删除数组的最后一个元素，并且可以得到一个新数组
比较数组元素大小（排序）
- arrayName.sort(排序函数名)
- “函数名”是定义数组元素排序的函数的名称。
颠倒数组顺序
- arrayName.reverse()
将数组元素拼接成字符串
- arrayName.join('连接符')

6. 时间对象

6.1 创建对象

var oDate = new Date()

6.2 获取时间的方法

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

获取年月日

var myDate = new Date()
var year = myDate.getFullYear()
var month = myDate.getMonth() + 1 // 返回值范围在0-11
var day = myDate.getDate()

获取时分秒

var myDate = new Date()
var mHour = myDate.getHours()
var mMinutes = myDate.getMinutes()
var mSeconds = myDate.getSeconds()

获取星期几
- ```
var mDate = new Date()
mDate.getDay()
```

6.3 设置时间的方法

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

设置年月日

var mDate = new Date()
mDate.setYears(1999, 11, 8) //设置年、月、日 1999年12月8日
// year 是必选参数 4位整数
// month 是可选参数 0-11
// day 是可选参数 1-31
mDate.setMonth(11, 8) // 设置月、日
mDate.setDate(8) // 设置日期

设置时分秒

var mDate = new Date()
mDate.setHours(23, 14, 34, 299) //设置 时、分、秒、毫米
// hour 是必选参数，0-23
// min 是可选参数，0-59
// sec 是可选参数，0-59
// millisec 是可选参数，0-999 
mDate.setMinutes(14,34,299) //设置 分，秒，毫秒
mDate.setSeconds(34, 299) // 设置秒，毫秒

7. 数学对象

属性

属性	说明
PI	圆周率
LN2	2的自然对数
LN10	10的自然对数
LOG2E	以2为底，e的对数
LOG10E	以10为底，e的对数
SORT2	2的平方根
SORT1_2	2的平方根的倒数

方法

方法	说明
`max(a,b,...)`	返回一组数中的最大值
`min(a,b,...)`	返回一组数中的最小值
`sin(x)`	正弦
`cos(x)`	余弦
`tan(x)`	正切
`asin(x)`	反正切
`acos(x)`	反余切
`atan(x)`	反正切
`atan2(x)`	反正切
`floor(x)`	向下取整
`ceil(x)`	向上取整
`random()`	生成随机数
`abs(x)`	返回x的绝对值
`sqrt(x)`	返回x的平方根
`log(x)`	返回x的自然对数（底为e)
`pow(x,y)`	返回x的y次幂
`exp(x)`	返回e的指数

7.1 最大值与最小值

Math.max()a,b,c,...,n)

Math.min()a,b,c,...,n)

7.2 取整

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

7.3 三角函数

Math.sin(x)其中x表示角度值，用弧度来表示。常用形式为度数 * Math.PI / 180

atan2(x)和atan(x)是不一样的，atan2(x)能够精确判断角度对应哪一个角，而atan(x)不能。在高级动画开发中，使用atan2(x)更多。

7.4 生成随机数

Math.random()
//生成0-1，但不包含1的随机数
Math.random() * m
//生成0-m, 但不包含m的随机数
Math.random() * m + n
//生成n-'m+n'，但不包含'm + n'的随机数
Math.random() * m - m
// 生成-m - 0 的随机数。
Math.floor(Math.random() * (m + 1))
// 生成0 - m 之间的随机整数