JAvaScript基础

最新推荐文章于 2022-11-23 17:32:46 发布

竹鼠商人

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量169

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/qq_40604099/article/details/106348260

版权

html5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript

因为JAvascript大部分语法和Java类似，所以如果有java的学习基础，在学习JS的时候会十分轻松
* 概念：一门客户端脚本语言
	* 运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎
	*  脚本语言：不需要编译，直接就可以被浏览器解析执行了
* 功能：
	*可以来增强用户和html页面的交互过程，可以来控制html元素可以让页面有一些动态的效果，增强用户的体验
*ECMAScript:客户端脚本语言标准
	1. 基本语法
		1. 与html的结合方式
			1.内部js
				定义<script>标签，标签体内容就是js代码
			2.外部js
				定义<script>标签，通过src属性引入外部js文件
			*注意：
				1. <script>标签可以定义在html页面的任何地方，但是定义的位置会影响执行顺序
				2. <script>标签可以定义多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结合方式</title>
    <!--
内部JS
外部JS-->
    <script !src="">
        alert("helloworld");
    </script>
    <script src="js/a.js"></script>
</head>
<body>

<input type="text">

</body>
</html>

		2. 注释
			单行注释//
			多行注释/*  */
		3. 数据类型：
			1. 原始数据类型（基本数据类型）
				1. number：数字。整数/小鼠/NaN（not a number 一个不是数字的数字类型）
				2. string：字符串。字符/字符串
				3. boolean：true false
				4. null：空
				5. underfind：未定义
			2. 引用数据类型：对象
		4. 变量
			*java语言是强类型语言，而Javascript是弱类型
			*强类型定义变量时就需要定义变量类型，而弱类型不需要定义类型
			*语法：
				*var 变量名 = 初始化值；
		5. 运算符
			1. 一元运算符：只有一个运算数的运算符
				++，--，+（正）
			2. 算术运算符
				+ - * / %....
			3. 赋值运算符
				+=，-=
			4. 比较运算符
				==，！=，>=....
			5. 逻辑运算符
				&&，||，！
			6. 三元运算符
				？：
		6. 流程控制语句
			1. if...else
			2. switch
			3. while
			4. do...while
			5. for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        td{
            border: 1px solid;
        }
    </style>
    <script>
        document.write("<table align='center'>");
        for(var i=1;i<=9;i++){
            document.write("<tr>");
            for(var j=1;j<=i;j++){
                document.write("<td>");
                document.write(j+"*"+i+"="+i*j+"   ");
                document.write("</td>");
            }
            // document.write("<br>");
            document.write("</tr>")
        }
        document.write("</table>");
    </script>
</head>
<body>



</body>
</html>

	2. 基本对象
		function：function函数对象
         1.创建
           function 方法名称(参数列表){
               方法体
           }
           注意
            1.方法定义的时候参数类型可以不写
            2.如果定义名称相同的方法，会覆盖不会报错
		Array：数组对象
            1.创建
                1.var arr = new Array(元素列表)
                2.var arr = new Array(默认长度)
            2.方法
                1.join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                2.push():像数组末尾添加一个或多个元素，并返回新的长度
            3.属性
                1.length:数组长度
            4.特点
                1.JS中，数组元素的类型是可变的
                2.JS中，数组长度是可变的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>array对象</title>
    <script !src="">
        /*
            Array：数组对象
                1.创建
                    1.var arr = new Array(元素列表)
                    2.var arr = new Array(默认长度)
                2.方法
                    1.join(参数):将数组中的元素按照指定的分隔符拼接为字符串
                    2.push():像数组末尾添加一个或多个元素，并返回新的长度
                3.属性
                    1.length:数组长度
                4.特点
                    1.JS中，数组元素的类型是可变的
                    2.JS中，数组长度是可变的
        */
        var arr1 = new Array(1,2,3);
        var arr2 = new Array(5);
        document.write(arr1+"<br>");
        document.write(arr2+"<br>");

        //不同类型，同数组
        var arr = [1,"abc",true];
        document.write(arr+"<br>");
        arr[10]="hehe";
        document.write(arr[10]+"<br>")

        document.write(arr.join("+")+"<br>")
        arr.push("eee");
        document.write(arr+"<br>");
    </script>
</head>
<body>


</body>
</html>

在这里插入图片描述

		Boolean：false,true
		Date：
			1.创建
                var date = new Date();
            2.方法
                toLocaleString()：返回当前date对象对应的时间本地字符串格式
                getTime():返回当前日期对象描述的时间和1970年1月1日0点毫秒值差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期对象 </title>
    <script !src="">
        /*
            1.创建
                var date = new Date();
            2.方法
                toLocaleString()：返回当前date对象对应的时间本地字符串格式
                getTime():返回当前日期对象描述的时间和1970年1月1日0点毫秒值差
         */
        var date = new Date();
        document.write(date+"<br>");
        document.write(date.toLocaleString()+"<br>")

        document.write(date.getTime()+"<br>");
    </script>
</head>
<body>

</body>
</html>

		Math :
			1.创建：
                *特点：Math对象不用创建，直接使用。Math.方法名();
            2.方法：
                random():返回一个0~1之间的随机数。含0不含1
                cell(x):对数进行上舍入
                floor(x):对数进行下舍入
                round(x):四舍五入
        3.属性：
            PI：圆周率
		Number：基本数据类型包装类
		string：基本数据类型包装类
		RegExp：正则表达式对象
			1.正则表达式：定义字符串表达规则
				1.单个字符：[]
					如：[a] a [ab] a或者b[a-zA-Z0-9_]大小写字母+数字+下划线
					*特殊符号代表特殊含义的单个字符
						\d：单个数字[0-9]
						\w：单个单词字符[a-zA-Z0-9_]
				2.量词符号：
					？：表示出现0次或1次
					*：表示出现0次或多次
					+：表示出现1次或多次
					{m,n}:表示n=>数量>=m
					如：\w* 单词字符出现0或者多次
				3.开始结束符号
					^：开始
					$：结束
			2.正则对象：
				1.创建
					1.var reg = new RegExp("正则表达式");
					2.var reg = /正则表达式/;
				2.方法
					test(参数):验证指定字符串是否符合正则表达式，符合返回true

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>regexp</title>
    <script !src="">

        var reg = new RegExp("\\w{6,12}");
        var reg2 = /^\w{6,12}$/;
        var name="zhangsan";
        var flag=reg2.test(name);
        alert(flag);
    </script>
</head>
<body>

</body>
</html>

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

                下面两种方法编解码的字符更多
                encodeURIComponent()：url编码
                decodeURIComponent()：url解码

                parseInt();将字符串转为数字
                    *逐一判断每一个字符是否是数字，直到不是数字未知，将前面部分转为number
                isNaN():判断一个值是否是NaN
                    *NaN六亲不认，NaN参与的比较全部为false
                eval():将Javascript的字符串转为脚本执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gloabl对象</title>
    <script !src="">
        /*
        			Global：
				1.特点：全局对象，这个对象中封装的方法不需要对象就可以直接调用。方法名();
				2.方法：
				    encodeURI():url编码
                    decodeURI():url解码

                    下面两种方法编解码的字符更多
                    encodeURIComponent()：url编码
                    decodeURIComponent()：url解码

                    parseInt();将字符串转为数字
                        *逐一判断每一个字符是否是数字，直到不是数字未知，将前面部分转为number
                    isNaN():判断一个值是否是NaN
                        *NaN六亲不认，NaN参与的比较全部为false
                    eval():将Javascript的字符串转为脚本执行
         */

        //编码&&解码
        var str = "竹鼠商人";
        var encode = encodeURI(str);
        document.write(encode+"<br>");
        var s = decodeURI(encode);
        document.write(s+"<br>");

        var str1 = "竹鼠商人";
        var encode1 = encodeURIComponent(str1);
        document.write(encode1+"<br>");
        var s1 = decodeURIComponent(encode1);
        document.write(s1+"<br>");

        //字符串转数字
        var str = "1234abc";
        var number = parseInt(str);
        document.write(number+"<br>");


        //nan判断
        var a = NaN;
        document.write(a==NaN);
        document.write("<br>");
        document.write(isNaN(a));
        document.write("<br>");

        //执行字符串
        var jscode = "alert(123454)";
        eval(jscode);
    </script>
</head>
<body>

</body>
</html>