web前端快速入门(二)JavaScript基础 ECMAScript部分

88 阅读1分钟

本人已参与[新人创作礼]活动,一起开启掘金创作之路。


highlight: a11y-dark

JavaScript基础

1.概念:一门客户端脚本语言

*运行在客户端浏览器中的,每一个浏览器都有JavaScript的解析引擎
*脚本语言:不需要编译,直接就可以被浏览器解析执行了

2.功能:

*可以来增强用户和html页面的交互过程,让页面有一些动态的效果,增强用户的体验

JavaScript=ECMAScript + BOM=DOM

ECMAScript:客户端脚步语言的标准:
		1.基本语法:
				*1.与html结合方式:
						*1.内部JS   
								*定义<script>,标签体内容就是js代码
						*2.外部JS
								*定义<script>,通过src属性引入外部的js文件
						*注意:
								1.<script> 可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。 
								2.<script>可以定义多个		
				*2.注释:
							1.单行注释://注释内容
							2.多行注释: /* 注释内容 */
				*3.数据类型:
						1.原始数据类型(基本数据类型):
								*1.number:整数/小数/NaN(not a number一个不是数字的数字类型)
								*2.string:字符串 
								*3.boolean: truefalse
								*4.null:一个对象为空的占位符
								*5.underfind:未定义。如果一个变量没有给初始化值,则会被默认赋值为underfind
						2.引用数据类型(对象):
				*4.变量
						*变量:一小块存储数据的内存空间
						*Java语言是强类型语言,而JavaScript是弱类型语言。
								*强类型:在开辟变量存储空间时,定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
								*弱类型:在开辟变量 存储空间时,不定义空间将来的存储数据类型,可以存放任意类型的数据。
						*语法: var 变量名= 初始化值;
				*5.运算符
						*1.一元运算符:只有一个运算数的运算符
						*2.算数运算符:   	+  - * / % ...
						*3.赋值运算符
						*4.比较运算符: < > <= >= ==  ===(全等于)
						*5.逻辑运算符: && || !
						*6.三元运算符: ? :
								*例: var a=3;
									  var b=4;
									  var c=a >b ? 1:0;  (如果a>b ,c=1,否则c=0)
									  alert(c);
						注意: 语句以;结尾,如果一行只有一条语句,可以省略。
							  变量的定义使用var关键字,也可以不使用。使用var定义的变量是局部变量,不使用是全局变量。
				*6.流程控制语句
						* if... else...
						* switch
						* while
						* do...while...
						* for
						
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</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(i + "*" + j + "=" + (i * j)+"&nbsp"+"&nbsp");
                document.write("</td>")
            }

            document.write("</tr>")
        }
        //完成表格嵌套
        document.write("</table>");
    </script>
</head>
<body>
</body>
</html>
		2.基本对象:
				Function:函数对象
				
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Function对象</title>
  <script>
    /*  1.创建对象
        *1.创建 var fun=new Function(形式参数列表,方法体)  //不推荐
        *2.function 方法名称(形式参数列表){
           方法体
           }
         *3. var 方法名=function(形式参数列表){
              方法体
             }
         2.方法
         3.属性
         4.特点
         * 1.方法定义时,形参的类型不用写
         * 2.方法是一个对象,如果定义名称相同的方法,会覆盖。
         * 3.在js中,方法的调用只与方法的名称有关,和参数列表无关。
         * 4.在方法声明中有一个隐藏的内置对象(数组),arguments封装所有的实际参数。
         5.调用
    */
    //1.创建方式1
    var fun1=new Function("a","b","alert(a);")
    //调用
    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,6);
  </script>
</head>
<body>

</body>
</html>
				Array 数组对象
				
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Array对象</title>
  <script>
    /*
    Array:数组对象
          1.创建
              *1. var arr=new Array(元素列表);
              *1. var arr=new Array(数组的默认长度);
              *1. var arr= [元素列表];
          2.方法
              join() 将数组中的元素按照指定的分隔符拼接为字符串
              push() 向数组的末尾添加一个或更多元素,并返回新的长度。
          3.属性
              *length:数组长度
          4.特点
              *1.JS中,数组元素的类型可变的。
              *2.JS中,数组长度可变的。

    */
    var arr1=new Array(1,2,3);
    var arr2=new Array(5);
    var arr3=[1,2,3];
    document.write(arr1+"<br>");
    document.write(arr2+"<br>");
    document.write(arr3+"<br>");
    document.write(arr3.join("---")+"<br>");
    arr1.push(11);
    document.write(arr1+"<br>");
  </script>
</head>
<body>

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

</body>
</html>
Math对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Math数学对象</title>
</head>
<script>
    /*
  Math:数学:
            *1.创建
                    特点:Math对象不用创建,直接使用。 Math.方法名();
            *2.方法
                    random() 返回0-1之间的随机数
                    ceil(x) 对数进行上舍入
                    floor(x) 对数进行下舍入
                    round(x) 对数进行四舍五入
            *2.属性
                    PI
  */
    document.write(Math.PI+"<br>")
    document.write(Math.random()+"<br>")
    document.write(Math.round(3.3)+"<br>")
    document.write(Math.ceil(3.2)+"<br>")
    //取1-100之间的随机整数
    document.write(Math.floor(Math.random()*100)+1);
</script>
<body>

</body>
</html>
RegExp:正则表达式对象
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>RegExp正则表达式</title>
</head>
<script>
    /*
    RegExp: 正则表达式对象
        1.正则表达式:定义字符串的组成规则
            *1.单个字符[]  [a]表示a [ab]表示a或者b [a-z]表示a到z中的某个字母
             [a-zA-Z]表示小写a到z中,或者大写A-Z中的某个字母
            *2.特殊符号代表特殊含义的单个字符: \d 表示单个数字字符  \w 单个单词字符[a-zA-Z0-9_]
            *3.量词符合:   ? 出现0次或者1次
                          * 出现0次或者多次
                          + 出现1次或者多次、
                          {m,n} 表示 m<= 数量 <=n
            *4.开始结束符号:  ^ 开始符号  $ 结束符号
        2.正则对象:
                 *1.创建
                        1.var reg=new RegExp("正则表达式");
                        1.var reg=/正则表达式/;
                 *2.方法
                        1.test(参数) 验证指定的字符串是否符合正则定义的规范
     */
    var reg1 = new RegExp("^\\w{6,12}$");
    var reg2 = /^\w{6,12}$/;
    alert(reg1);
    alert(reg2);
    var username="zhangsan";
    var flag=reg2.test(username);
    alert(flag);
</script>
<body>

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

                   *3.encodeURIComponent()  url编码的字符更多
                   *4.decodeURIComponent()  url解码的字符更多
                   *5.parseInt() 将字符串转为数字
                        *逐一判断每一个是不是数字,直到不是数字为止,将前边数字部分转换成number
     */
    var str1="石头人";
    var encode1=encodeURI(str1);
    document.write(encode1+"<br>");
    var s=decodeURI(encode1);
    document.write(s+"<br>");

    var str3="123";
    var str4="123abc";
    var number1=parseInt(str3);
    var number2=parseInt(str4);
    document.write(number1+1);
    document.write(number2+1);
</script>
<body>

</body>
</html>