ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

JavaEE Day09 JavaScript基础

2021-02-16 22:03:35  阅读：192  来源： 互联网

标签：Day09 对象 JavaScript JavaEE arr alert write var document


之前学了html、css两种静态资源JavaScript是另一种静态资源，今日内容【重点】：JavaScript（是一门编程语言，2days）基础一、JavaScript简介1.概念JavaScript是一门客户端脚本语言
  • 运行在客户端浏览器中
  • 每一个浏览器都有JavaScript的解析引擎（不需要编译）
  • 脚本语言：不需要编译，直接就可以被浏览器解析执行
功能：
  • 可以增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验
2.发展史之前速度慢
  • 1992年，Nombase公司开发出第一门客户端脚本语言，专门用于表单的校验，命名为：C--，后来更名为ScriptEase
  • 1995年，Netscape（网景）公司【做浏览器】，开发了一门客户端脚本语言：LiveScript。后来请来SUN公司的专家，修改 LiveScript，命名为JavaScript
  • 1996年，微软抄袭了JavaScript开发出了JScript
  • 1997年，ECMA（欧洲计算机制造商协会）制定了标准：ECMAScript就是 所有客户端脚本语言的标准

JavaScript=ECMAScript+JavaScript特有的东西（BOM和DOM两类对象）每种客户端对BOM和DOM对象的实现有所差异
二、JavaScript语法（ECMAScript）1.基本语法【与Java很接近】1.1与html的结合方式（两种）
  • 内部js：定义<script>，标签体内容就是js代码
  • 外部js：定义<script>，通过src属性引入外部的js文件
  • 注意：
    • <script>可以定义在html页面的任何地方，但是定义的位置会影响执行顺序
    • <script>可以定义多个
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结合方式</title>
    <!--
    内部JS
        可以定义在任意位置
    外部JS
    -->
</head>
<body>
<input type="text">
<script>
    alert("helloWorld");
    /*弹窗显示字符串，阻塞式代码*/
</script>
<script src="js/a.js"></script>
</body>

</html>
1.2注释
  • 单行注释：//注释内容
  • 多行注释：/*注释内容 */
1.3数据类型Java两种：基本数据类型和引用数据类型JavaScript：原始数据类型和引用数据类型
  • 原始数据类型
    • number：整数、小数/NaN(Not a number一个不是数字的数字类型)
    • string：字符串，如'abc',"a"
    • boolean：true和false
    • null：一个对象为空的占位符
    • undefined：未定义。如果一个变量没有初始化值，则会被默认赋值为undefined
  • 引用数据类型（对象）
1.4变量：一小块存储数据的内存空间
  • Java是强类型语言，JavaScript是弱类型语言
    • 强类型：在开辟变量存储空间时，定义了空间将来存储的数据类型，只能存储固定类型的数据
    • 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
  • 语法：
    • var 变量名 = 初始化值；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
    <script>
        //定义变量
        /*var a=3;
        alert(a);
        a="abc";
        alert(a);*/
        //定义number类型
        var num=1;
        var num2 = 1.2;
        var num3 = NaN;
        //把内容输出到页面上
        document.write(num+"---"+typeof (num)+"<br>");
        document.write(num2+"---"+typeof (num2)+"<br>");
        document.write(num3+"---"+typeof (num3)+"<br>");
        //定义String类型
        var str = "abc";
        var str2 = 'edf';
        document.write(str+"---"+typeof (str)+"<br>");
        document.write(str2+"---"+typeof (str2)+"<br>");
        //定义boolean类型
        var flag = true;
        document.write(flag+"---"+typeof (flag)+"<br>");
        //定义 null
        var obj = null;
        var obj2= undefined;
        var obj3;
        //默认就是undefined
        document.write(obj+"---"+typeof (obj)+"<br>");
        document.write(obj2+"---"+typeof (obj2)+"<br>");
        document.write(obj3+"---"+typeof (obj3)+"<br>");
    </script>
</head>
<body>

</body>
</html>
1.5 运算符
  • 一元运算符 ：只有一个运算数的运算符，
    1. 如++ --（自增自减）,+（正号）
    2. ++(--)在前：先自增/自减，再运算
    3. ++（--）在后：先运算，再自增/自减
    4. 注意：如果运算数不是运算符所要求的类型，js引擎会自动将与运算数进行类型转换
      1. 其它类型转number：
        1. string转number：按照字面值转换，如果字面值不是数字，则转为NaN（不是数字的数字 ）
        2. boolean转number：true转为，false转为0
  • 算数运算符 ：+ - * 、 %
  • 赋值运算符：=   +=   -=  *=
  • 比较运算符【重点】：> >=     ==    ===【全等于】          
    •   1.类型相同：直接比较                      
      • 字符串：按照字典顺序比较，按位比较，逐一比较，直到得出大小为止                 
    • 2.类型不同：先进行类型转换，再比较                        
      • ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
      • ===的短路效果，第一步先确定，确定了就不用再继续参与运算了
  • 逻辑运算符：&& ||  ！
    • &&：与（短路效果）
    • ||：或（短路效果）
    • !：非
    • 其他类型转boolean
      • number：0或NaN为假，其他为真
      • string：除了空字符串（""），其他都为true
      • null&undefined：都是false
      • 对象：所有对象都为true
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>逻辑运算符</title>
    <script>
        /*
            逻辑运算符
                &&：与（短路效果）
                ||：或（短路效果）
                !!
        * */
        var flag = true;
        document.write(flag+"<br>");
        document.write(!flag+"<br>");
        document.write("<hr>");
        //number
        var flag = 3;
        document.write(!!flag+"<br>");
        document.write("<hr>");
        var num = 3;
        var  num2 = 0;
        var num3 = NaN;
        document.write(!!num+"<br>");
        document.write(!!num2+"<br>");
        document.write(!!num3+"<br>");
        while(1){
            document.write("死循环");
            num+=1;
            if(num%100==0){
                break;
            }
        }
        document.write("<hr>");
        //string
        var str = "abc";
        var  str2 = "";
        document.write(!!str+"<br>");
        document.write(!!str2+"<br>");
        //null&undefined
        var obj = null;
        var  obj2 = "";
        document.write(!!obj+"<br>");
        document.write(!!obj2+"<br>");
        //object
        var date = new Date();
        document.write(!!date+"<br>");
        var obj = new Date();
        if(obj!=null){//防止空指针异常
            alert(123);
        }
        //或
        if(obj){//防止空指针异常
            alert(111);
        }
        //如果是字符串
        var obj="111";
        if(obj!=null && obj.length > 0){
            alert(222);
        }
        //空字符串也会转成false，不是空字符串就转为true
        //js可以这么定义，简化书写
        if(obj){//防止空指针异常
            alert(113331);
        }
        //空字符串则不满足
    </script>
</head>
<body>
</body>
</html>
  • 三元运算符：  
    • ？：表达式
    • 语法：表达式？值1？值2；
    • 判断表达式的值，如果是true则取值1，否则取2
<script>
        var a = 3;
        var b = 4;
        var c = a > b ? 1 : 0;
        alert(c)
</script>
1.6流程控制语句
  • if...else...
  • switch...
    • 在java中，switch语句可以接受的数据类型：byte/int short/char/枚举（1.5）/String（1.7）
      • switch（变量）：
            case  值：｛｝
    • 在JavaScript中，什么类型都可以接收，且case后面不用加大括号
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch语句</title>
    <script>
        var a = 1;
        switch (a){
            case 1:
                alert("number");
                break;
            case "abc":
                alert("string");
                break;
            case null:
                alert("number");
                break;
            case undefined:
                alert("number");
                break;
            case true:
                alert("true")
                break;
        }
    </script>
</head>
<body>

</body>
</html>
  • while
  • do..while
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while语句</title>
    <script>
        //1~100求和， 5050
        var sum=0;
        var num=1;
        while ( num <= 100){
            sum+=num;
            num++
        }
        alert(num);
        var sum = 0;
        for( var i= 1; i<100; i++){
            sum+=i
        }
        alert(sum)
    </script>
</head>
<body>
</body>
</html>
  • for
1.7 特殊语法
  • 1.语句以分号结尾，如果一行只有一条语句，则可以省略（不建议）
  • 2.变量的定义使用var关键字，也可以不使用【作用范围不同】
    •  用：定义的变量是局部变量
    • 不用：定义的变量是全局变量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊语法</title>
    <script>
        //1.语句以分号结尾，如果一行只有一条语句，则可以省略（不建议）
        var a=3
        alert(a+"<br>")
        /*
            2.变量的定义使用var关键字，也可以不使用【作用范围不同】
                用：定义的变量是局部变量
                不用：定义的变量是全局变量
        * */
        var b=4;
        alert(b);
        function fun(){
            var b=4;
            alert(b);
        }
        alert(b);//访问不了
        function fun1(){
            c=4;
        }
        alert(c+"<b>")//可以访问
        //推荐
        var d
        function fun2(){
            d=10
        }
        alert(d)
    </script>
</head>
<body>

</body>
</html>
2..练习：九九乘法表
<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        td{
            border:1px solid;
        }
    </style>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <script>
        document.write("<table border='0' 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;")
                document.write("</td>");
            }
            /*//输出换行
            document.write("<br>");*/
            document.write("</tr>");
        }
        //2.表格结束
        document.write("</table>");

    </script>
</head>
<body>
</body>
</html>
三、JavaScript对象1、基本对象Function对象：函数对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Function对象</title>
    <script>
        /*
            Function：函数（方法）对象【在java中，对象属于函数或方法的一部分，在js中，方法就是对象】
                1、创建
                    1. var fun = new Function(形参列表,方法体)；//知道就行
                    2.function 方法名称（形式参数列表）｛
                        方法体；
                    ｝
                    3. var 方法名 = function(形参列表)｛
                        方法体；
                    ｝
                2、方法
                3、属性
                    length：代表形参的个数
                4、特点
                    1.方法定义时写，形参的类型var不用写，返回值类型也不用写
                    2.方法是一个对象，如果定义名称相同的方法，会覆盖
                    3.在js中，方法的调用只与方法名称有关，和参数列表无关
                    4.在方法声明中，有一个隐藏的内置对象（数组），该对象叫arguments，封装了所有对象的参数
                5、调用
                    方法名称（实参列表）
        * */
        //1.创建方式1
        var fun1 = new Function("a","b","c","alert(a)");
        //调用方法
        //fun1(3,4);
        //alert(fun1.length);
        //2.创建方式2
       function fun2(a ,b){
            alert(a + b);
        }
        //alert(fun2.length);
        //调用方法
        //fun2(3,4);
        //3.创建方式3
        var fun3 = function (a ,b) {
            alert(a + b);
        }
        //覆盖fun2的声明
        /*fun2 = function (a , b) {
            alert(a - b);
        }*/
        function fun2(a ,b){
            alert(a);
            alert(b);
        }
        //方法调用
        //fun2(1 ,2);
        //只写第一个参数
        //fun2(1);
        //一个参数也不写
        //fun2();//undefined
        //传3个参数
        //fun2(1 ,2 ,3);
        //alert(fun3.length);
        //fun3(3,4);
        /*
            求两个数的和
        * */
        function add(a , b) {
            return a + b;
        }
        //var sum = add(1 , 2);
        //alert(sum);
        /*
            求任意个数的和
        * */
        function add() {
            var sum = 0;
            for (var i = 0; i< arguments.length ; i++){
                sum+=arguments[i];
            }
            alert(sum);
        }
        add(1,3 ,2,4);
    </script>
</head>
<body>
</body>
</html>
Array：数组对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array对象</title>
    <script>
        /*
            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);
        var arr2 = new Array(5);//只有一个数字，代表长度
        var arr3 = [1,2,3,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>");
        document.write(arr[0]+"<br>");
        document.write(arr[1]+"<br>");
        document.write(arr[2]+"<br>");
        //document.write(arr[3]+"<br>");//undefined
        //document.write(arr[10]+"<br>");
        arr[10] = "呵呵";
        arr.push(11);
        document.write(arr[10]+"<br>");
        document.write(arr+"<br>");//9876543是undefined，直接遍历啥也没有
        document.write(arr.length+"<br>");
        document.write(arr.join("-")+"<br>");
    </script>
</head>
<body>
</body>
</html>
Boolean
Date
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Date日期对象</title>
    <script>
       /*
       Date日期对象
            1、创建
                var date = new Date();
            2、方法
                toLocaleString()：根据本地时间格式，把 Date 对象转换为字符串。
                                  返回当前date对象对应的时间本地字符串格式
                getTime()	返回 1970 年 1 月 1 日至今的毫秒数，返回当前日期对象描述的时间和1970年1月1日零点的毫秒值差
       * */
       var date = new Date();
       document.write(date+"<br>");
       document.write(date.toLocaleString()+"<br>");
       document.write(date.getTime()+"<br>");
    </script>
</head>
<body>
</body>
</html>
Math
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math数学对象</title>
    <script>
        /*
            Math数学对象

                1、创建
                    特点：该对象不用创建，直接使用，如Math.方法名()
                2、方法
                    random()	返回 0 ~ 1 之间的随机数。【含0不含1】
                    ceil(x)	对数进行上舍入。
                    floor(x)	对数进行下舍入。
                    round(x)	把数四舍五入为最接近的整数。
                3、属性：
                    PI	返回圆周率（约等于3.14159）
        * */
        document.write(Math.PI+"<br>");
        document.write(Math.random()+"<br>");
        document.write(Math.round(3.15)+"<br>");
        document.write(Math.ceil(3.15)+"<br>");
        document.write(Math.floor(3.15)+"<br>");
        /*
            练习：取1-100之间的随机整数
                1、Math.random()产生随机数，范围[0,1)
                2、将此随机数乘以100.范围为[0,100)
                3、舍弃小数部分（向下取整）floor，变为了[0,99]的整数
                4、整体+1，变成了[1,100]
        * */
        var random =  Math.floor(Math.random()*100)+ 1;
        document.write(random+"<br>");

    </script>
</head>
<body>
</body>
</html>
Number：包装对象String：包装对象RegExp：正则表达式对象
  • 正则表达式：定义字符串的组成规则
  • 单个字符：[]
    • 如：[a]表示任意单个字符    [ab] a或者b  [a-z]  [A-Z]    [a-zA-Z0-9]
    • 通过特殊符号代表特殊含义的单个字符：
      • \d表示单个数字字符，即[0-9]
      • \w表示单个单词字符，即 [a-zA-Z0-9]
  • 量词符号
    • ?：表示出现0次或1次
    • *：表示出现0次或多次
    • +：出现1次或多次
    • {m,n}表示数量介于m和n之间
  • 如\w*表示任意个字符，\w{6,12}表示字符介于6-12位之间
    • m如果缺省：{,n}表示最多n次
    • n如果缺省：{m,}表示最少m次
  • 开始结束符号：
    • 开始：^
    • 结束：$
  • 正则对象
    • 创建
      • var  reg = new RegExp("正则表达式");
      • var reg = /正则表达式/;
    • 方法
      • test(参数)：验证指定的字符串是否符合正则定义的规范
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>RegExp正则对象</title>
    <script>
        /*
            RegExp正则对象
                1、创建
                    1.var  reg = new RegExp("正则表达式");
                    2.var reg = /正则表达式/;
                2、方法
                    1.test(参数)：验证指定的字符串是否符合正则定义的规范
        * */
        //1.
        var  reg = new RegExp("\\w{6,12}");//转义字符
        //2.
        var  reg1 = /^\w{6,12}$/;//表示以单词字符开头，以单词字符结尾
        //alert(reg);
        //alert(reg1);
        //验证
        var username = "zhangsanzhangsan";
        var flag = reg1.test(username);
        alert(flag)
    </script>
</head>
<body>
</body>
</html>

Global（位于Function下）
  • 特点：是一个全局对象，这个Global中封装的方法，不需要对象就可以直接调用。 方法名();
  • 方法
  • URL编码：浏览器数据传输协议http中，中文数据想要传送，则需要进行编码
    • 传智播客：word=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
    • 12个字节：UTF8编码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Global对象</title>
    <script>
        /*
        Global对象
            1.特点：是一个全局对象，这个Global中封装的方法，不需要对象就可以直接调用。 方法名();
            2.方法
                encodeURI()	把字符串编码为 URI。URI编码
                decodeURI()	解码某个编码的 URI。URI解码

                encodeURIComponent()	把字符串编码为 URI 组件。URI编码
                decodeURIComponent()	解码一个编码的 URI 组件。URI解码【编码解码的字符更多】

                parseInt()	解析一个字符串并返回一个整数。【将字符串转为数字，功能更强大】
                    逐一判断每一个字符是否是数字，直到不是数字位置，将前边数字部分转为number
                isNaN()	检查某个值是否是数字
                    NaN六亲不认：连自己都不认。NaN参与的==比较，全部为false
                eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行【将字符串转换为脚本执行】
            3.URL编码
                传智播客：word=%E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2
        * */
        var str = "http://www.baidu.com?word=传智播客";
        var encode = encodeURI(str);
        document.write(encode+"<br>");
        var s = decodeURI(encode);
        document.write(s+"<br>");
        var str1 = "http://www.baidu.com?word=传智播客";
        var encode1 = encodeURIComponent(str1);
        document.write(encode1+"<br>");
        var s1 = decodeURIComponent(encode1);
        document.write(s1+"<br>");
        var str = "a123abc";//转为NaN
        var number = parseInt(str);
        //document.write(number+1+"<br>");
        var a = "abc";
        document.write(a == NaN+"<br>");
        document.write(NaN == NaN+"<br>");
        document.write(isNaN(a)+"<br>");
        var jscode = "alert(123)";
        alert(jscode);
        eval(jscode);
    </script>
</head>
<body>
</body>
</html>





来自为知笔记(Wiz)

标签：Day09,对象,JavaScript,JavaEE,arr,alert,write,var,document
来源： https://www.cnblogs.com/liujinhui/p/684df42bdeca49ccbd3b6219ba1c2fac.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有