JavaScript的基本语法与基本对象

最新推荐文章于 2022-07-02 00:08:27 发布

㈤㈥㈦

最新推荐文章于 2022-07-02 00:08:27 发布

阅读量419

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45291606/article/details/104162322

版权

前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

文章目录

JavaScript

* 概念：一门客户端脚本语言
	* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎。
	* 脚本语言：不需要编译，直接就可以被浏览器解析执行了。
* 功能：
	* 可以用来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态效果，增强用户的体验。
* JavaScript发展史：
	1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为：C-- ，后来更名为ScriptEase
	2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，完善后更名为JavaScript
	3. 1996年，微软抄袭JavaScript开发出了JScript语言
	4. 1997年，ECMA(欧洲计算机制造商协会)，统一规范发布：ECMAScript，就是所有客户端脚本语言的标准。
	* JavaScript = ECMAScript + JavaScript自己的东西(BOM+DOM)

ECMAScript：客户端脚本语言的标准

1.基本语法

	1.与html结合方式
		1. 内部JS：
			*  定义<script>，标签体内容就是js代码
		2. 外部JS： 
			* 定义<script>，通过src属性引入外部的js文件
		* 注意：
			1. <script>可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。
			2. <script>可以定义多个。
	2. 注释
		* 单行注释：//注释内容
		* 多行注释：/*注释内容*/
	3. 数据类型
		1. 原始数据类型(基本数据类型)：
			1. number：数字。整数/小数/NaN(not a number 一个不是数字的数字类型)
			2. String：字符串。字符串"abc"  "a"  'abc'
			3. boolean：true和false
			4. null：一个对象为空的占位符
			5. undefined：未定义。如果一个变量没有初始化值，则会被默认赋值为undefined
		3. 引用数据类型：对象
	4. 变量
		* 变量： 一小块存储数据的内存空间
		* Java语言是强类型语言，而JavaScript是弱类型语言。
			* 强类型：在开辟变量存储空间时，定义了空间将来存储的数据类型。只能存储固定类型的数据。
			* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
		* 语法：var 变量名 = 初始化值； 
			* var 变量名 = 初始值
		*typeof( ); 运算符：获取变量的类型。
			* 注：null运算后得到的 变量类型为object
	5. 运算符
		1. 一元运算符：只有一个运算数的运算符
			++  -- , + (正号)  -(负号)
			 注意：在JS中，如果运算数不是运算符所有要求的类型，那么js引擎会自动将运算数进行类型转换
			 	其他类型转number：
			 		1. string转number：按照字面值转换。如"故宫"字面值不是数字，则转为NaN(不是数字的数字)。如"123"转为number类型的123 ， "abc"转为NaN类型。
			 		2. boolean转number：true转为1，false转为0
		2. 算数运算符
			+ - * 、 %  
		3. 赋值运算符
			= += -=
		4. 比较运算符
			> < >= <= == ===(全等于)
				* 比较方式：
					1. 类型相同：直接比较
						* 字符串：按照按照字典顺序。按位逐一比较  ，直到得出大小为止。(某位比较出大小之后，就不往后比较了。)
					2. 类型不同：先进行类型转换，再比较
						* ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回 false。 
		5. 逻辑运算符
			&& || ！
				* 其他类型转boolean
					1. number：0或NaN为假，其他为真。
					2. string：除了空字符串("")，其他都是 true。
					3. null&underfined：都是false
					4. 对象：所有对象都为true
		6. 三元运算符（三目运算符 ）
			* 语法：
				* 表达式? 值1:值2
				* 判断表达式的值，如果是true则取值1，如果是false则取值2；
			
	6. 流程控制语句
		 1. if...else...
		 2. switch:
		 	* 在java中，switch语句可以接受的数据类型：byte int shot char,枚举(enum)，String
		 		* switch(变量)：
		 			case(值)：
		 	* 在JS中，switch语句可以接受任意的原始数据。
		 3. while
		 4. do...while
		 5. for  
	7. JS特殊语法：
		1. 语句以;结尾，如果一行只有一条语句，则;可以省略不写（不建议这样做）；
		2. 局部变量的定义使用var关键字 var a = 3; 全局变量的定义不写var关键字，a = 3； （不建议这样做）
	8. 练习：99乘法表

<title>99乘法表</title>
    <style>
        td{
            border:1px solid;
        }
    </style>

    <script>

        document.write("<table  align='center'>");

        //1.完成基本的for循环嵌套，展示乘法表
        for (var i = 1; i <= 9; i++) {
            document.write("<tr>");
            for (var j = 1; j <= i; j++) {
                document.write("<td>");

                //输出 1*1=1
                document.write(i + "*" + j + "=" + (i * j)+"&nbsp;&nbsp;&nbsp;&nbsp");

                document.write("</td>");
            }
            /*//输出行
            document.write("<br>");*/

            document.write("</tr>");
        }

        document.write("</table>");

    </script>

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

2. 基本对象

1. Function：函数(方法)对象

   1.创建方式：
       1. var fun = new Function(形式参数列表，方法体); （不推荐）
       2. function 方法名称(形式参数列表){
               方法体
           }

       3.var 方法名 = function(形式参数列表){
               方法体
           }
       
   2.方法：
   3.属性：
       length：代表形参的个数
   4.特点：
       1. 方法定义时，形参的类型不用写，返回值类型也不用写。
       2. 方法是一个对象，如果定义名称相同的方法，则后面定义的会覆盖前面定义的。
       3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关。
       4. 在方法声明中有一个隐藏的内置对象(数组)，arguments，封装所有的实际参数。
   5.调用：
       方法名称(实际参数列表);

	//1.创建方式1
	var fun1 = new Function("a", "b", "alert(a+b);");
	//调用方法
	fun1(3,4);
	alert(fun1.length);
	
	//2.创建方式2 （常用）
	function fun2(a, b) {
	    alert(a + b);
	}
	
	fun2(3,4);
	
	//3.创建方法3
	var fun3 = function (a, b) {
	    alert(a + b);
	}
	
	fun3(3,4);

/*
	求任意个数的和
*/
function add() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

var sum = add(1,2,3);
alert(sum);

2.Array：数组对象

1.创建
    1. var arr = new Array(元素列表); 
    2. var arr = new Array(默认长度);
    3. var arr = [元素列表];
2.方法
    join()：将数组中的元素按照指定的分隔符拼接为字符串。(默认以","拼接，可以在()中指定分隔符)
    push()：向数组的末尾添加一个或更多元素，并返回新的长度。

3.属性
    length：数组的长度。
4.特点
    1. JS中，数组元素的类型是可变的。
    2. JS中，数组长度是可变的。

		//1.创建方式1
        var arr1 = new Array(1, 2, 3);
        //2.创建方式2
        var arr2 = new Array(5);
        //3.创建方法3
        var arr3 = [1, 2, 3, 4];
        //4.创建空数组
        var arr4 = new Array();

        document.write(arr1 + "<br>")
        document.write(arr2 + "<br>")
        document.write(arr3 + "<br>")
        document.write(arr4 + "<br>")
        

        var arr = [1, "abc", true];
        document.write(arr + "<br>");  //1，abc，true

        document.write(arr[0] + "<br>");   // 1
        document.write(arr[1] + "<br>");   // abc
        document.write(arr[2] + "<br>");   // undefined

        //数组长度可变
        arr[10] = "hehe";
        document.write(arr[10] + "<br>");   // hehe

        //没有给值的位置
        document.write(arr[9] + "<br>");   // undefined

        //join();方法
        document.write(arr.join("-")+"<br>");

        //push();方法
        arr.push(11);
        document.write(arr.join("-")+"<br>");

3.Date：日期对象，默认打印 US时间格式

1. 创建：
    var date = new Date();
2. 方法：
    toLocaleString()：返回当前date对象对应的时间本地字符串格式
    getTime()：获取毫秒值。返回当前日期对象描述的时间到1970年1月1日零点的毫秒值差。

var date = new Date();

document.write(date+"<br>");

document.write(date.toLocaleString()+"<br>");

document.write(date.getTime()+"<br>");

4. Math：数学

1. 创建：
    * 特点：Math对象不用创建，直接使用。Math.方法名();

2. 方法：
    random()：返回 0~1 之间的随机数。
    ceil(x)：对数进行 向上取整。
    floor(x)：对数进行 向下取整。
    round(x)：把数四舍五入为接近的整数。

3. 属性：
    PI：圆周率

document.write(Math.PI + "<br>");

document.write(Math.random() + "<br>");
document.write(Math.round() + "<br>");
document.write(Math.ceil(3.14) + "<br>");
document.write(Math.floor(3.14) + "<br>");
document.write(Math.round(3.14) + "<br>");

/**
 * 练习：产生一个 1~100之间的随机整数
 *  * 步骤：
 *      1. Math.random() 产生随机数，范围 [0,1) 小数
 *      2. 乘以 100 --> [0,99.9999) 小数
 *      3. 舍弃小数部分：floor --> [0,99] 整数
 *      4. +1 --> [0,99] 整数 [1,100]
 */

var number = Math.floor((Math.random() * 100)) + 1;
document.write(number);

5. RegExp：正则表达式对象

1. 正则表达式：定义字符串的组成规则。 
	1. 单个字符：[ ]
		如：[a]  [ab]  [a-zA-Z0-9_]   
		* 特殊符号代表特殊含义的单个字符：
			\d：单个数字字符 [0-9]
			\w：单个单词字符 [a-zA-Z0-9_]
	2. 量词符号：
		？：表示出现0次或1次
		* ：表示数字字符 [0-9]
		+ ：表示出现1次或多次
		{m,n}：表示 m<=数量<=n
			* m如果缺省：{,n}：最多n次
			* n如果缺省：{m,}：最少m次 	
	3. 开始结束符号
		 ^	开始
		 $	结束
2. 正则对象：
	1. 创建：
		1. var reg = new RegExp("正则 表达式")；
		2. var reg = /正则表达式/；
3. 方法：
	test(参数);验证指定的字符串是否符合定义的规范

   //1.
   //var reg = new RegExp("\w{6,12}"); 错误
   var reg = new RegExp("\\w{6,12}");  //正确，单个单词字符；6-12位
   //2.
   var reg2 = /^\w{6,12}$/; //单个单词字符；6-12位

  /* alert(reg);
   alert(reg2);*/

   var username="zhangsan";

   //验证
   var flag = reg.test(username);
   alert(flag);    //true

   var flag2 = reg.test(username);
   alert(flag);    //true

6. Global：全局对象

1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接使用。方法名()
2. 方法：
    encodeURI()：url编码
    decodeURI()：url解码

    encodeURIComponent()：url编码，编码的子字符更多
    decodeURIComponent()：url解码

    parseInt():将字符串转为数字
        * 逐一判断每一个字符串是否是数字，直到不是数字为止，将前边数字部分转为number
        
    isNaN():判断一个值是否是NaN。
        * NaN六亲不认，连自己都不认。NaN参与的==比较，全部为false。
        * 所以需要用isNaN(); 来判断一个值是否是NaN
    eval(): 将JavaScript的字符串转为脚本代码来执行

3. url编码
    传智播客 = %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        * 逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number。

var str = "传智播客";
        //编码
        var encode = encodeURI(str);
        document.write(encode + "<br>");  //%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        //解码
        var s = decodeURI(encode);
        document.write(s + "<br>"); //传智播客


        var str = "传智播客";
        //编码
        var encode = encodeURIComponent(str);
        document.write(encode + "<br>");  //%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        //解码
        var s = decodeURIComponent(encode);
        document.write(s + "<br>"); //传智播客

        //parseInt();方法
        var str = "123";
        var number = parseInt(str);
        alert(number + 1) //弹出124

        //isNaN();
        var a = NaN;
        document.write(a == NaN);   //false,只能通过isNaN();来判断变量是否是 NaN。
        document.write(isNaN(a));   //一个值是NaN，则返回true，否则返回false

        //
        var jscode = "alter(123)";
        alert(jscode);  //弹出"alter(123)"
        eval(jscode);  //弹出 123