JAVA-25.1-js基础篇、基本语法、常用内置对象讲解

最新推荐文章于 2022-06-17 05:01:44 发布

原创最新推荐文章于 2022-06-17 05:01:44 发布 · 586 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #对象

JAVA学习笔记专栏收录该内容

41 篇文章

订阅专栏

本文详细介绍了JavaScript的基础知识，包括引入JavaScript的原因、基础语法、内部和外部使用方法，以及变量、数据类型、类型转换、运算符、流程控制语句、函数等核心概念。还特别讲解了JavaScript中的String、Number、Boolean、Math和Date等内置对象的使用方法，为初学者提供全面的JS入门指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Javascript入门

1.1 引入
　　html：负责网页结构
　　css：负责网页美观
　　javascript：负责用户与浏览器交互。
１.2 javacript的来由
　　1994时，网景公司研发了livescript语言，领航者浏览器（把livescript语言植入到浏览器）
　　微软公司的IE浏览器，后来自己花钱20亿美金研发jscript
　　1995年，Sun公司，推出jdk1.1 .谈合作。livescript-》javascript
　　1998，美国在线收购网景。
　　2003，直接关闭网景。网景6-7亿美金。2千万美金，组建谋智基金（火狐）
　　javascript 与jscript 语法不同。 ECMA（欧洲制造商联盟）
　　　　scirpt的语法：
　　　　　　1）基础语法（ECMA规范）
　　　　　　2）BOM编程（没有统一）
　　　　　　3）DOM编程（没有统一）
注意：javascript与java并没有直接联系。

二、 javascript（简称js）基础篇

　　首先，应该注意一点：html代码是从上往下依次加载的，所以为了保证代码的安全性以及达到预期的正常使用功能，我们最好将<script>标签放在<body>标签下边，尤其是牵涉到函数调用的时候。当然有时放在前面也无所谓。
2.1 javascript使用
　　①javascript的注释：单行 // 多行 /* */
　　　css的注释：css 多行注释 /* */
　　　html的注释：

　　②常用的函数：
　　　　alert(“提示框”);
　　　　document.write(“向浏览器输出内容”);

　　③javascript的使用方法：
　　　　1）内部javacript:
　　　　　　a)在html页面中使用<script>标签，在<script>标签体中写js内容
　　　　　　b)弊端：和html代码混杂在一起，不好维护，不好重用

　　　　2）外部javascript（推荐使用）
　　　　　　注意：不能使用<script src="01.js"/> 导入，<script>标签是非自闭和标签。
２.2 变量和数据类型
　　1）定义和赋值变量： var 变量名=值;

            var a = 10;
            //var a = 20;
            var b = 3.14;
            var c = 'c';
            var d = "hello";
            var e = true;
            var f = new Object();

　　注意：
　　　　1）使用var关键词定义变量，var可以省略的，但是不建议省略var
　　　　2) 在js中可以重复定义变量，后面定义的变量会覆盖前面的变量。
　　　　3) js是弱类型语言，使用var来定义任何数据类型
　　　　4）js中变量的类型是由变量的值决定的，所以只定义不赋值的变量，就是一个未赋值变量（undefined），未赋值的变量不能使用

　　　　typeof(变量)：查看变量的数据类型

　　2)js的数据类型分类：
　　　　a）number：无论整数还是小数，都是number类型
　　　　b) string: 无论字符还是字符串，都是string类型
　　　　c) boolean
　　　　d) object 对象类型
２.3 类型转换函数
　　string->number(整数) : parserInt(变量)
　　string->number(小数): parserFloat(变量)
２.4 运算符
　　1)算术运算符： + - * / %
　　2)比较运算符： > < >= <= ==
　　3)逻辑运算符： && || !
　　4)三目运算符: 表达式 ? true的结果 : false的结果
２.5 流程控制语句

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    /*
    ①if语句
        if(表达式){
            语句  
        }else{
            语句
        }

        条件可以是：
            布尔值：true：成立 ； false:不成立
            number：非0：成立； 0： 不成立
            string: 非空字符串： 成立 ； 空字符串： 不成立
            object: 非null: 成立；  null：不成立
    */
    /*
    if(null){
        alert("条件成立");  
    }else{
        alert("条件不成立");
    }
    */


    /*
    ②swtich语句
        swtich(变量){
        case 选项1:
            语句;
            break;  如果不break，就会继续下面选项的语句    
        case 选项2:：
            语句;
            break;
        default:
            默认;
        }

        注意：
            case的条件：
                1）可以是常量. string,number
                2）可以是变量。（java是不能是变量）
                3)可以是表达式 （java不能这样）
    */
    /*
    var i = "b";
    var b = "b";
    switch(i){
    case "a":
        document.write("你选择了a");
        break;  
    case b:
        document.write("你选择了b");
        break;
    case "c":
        document.write("你选择了c");
        break;
    case "d":
        document.write("你选择了d");
        break;
    default:
        document.write("你选择了其他");
        break;
    }
    */
    /*
    var age = 20;
    switch(true){
    case age>=18:
        document.write("他是成年人");
        break;
    case age<18:
        document.write("他是未成年人");
        break;
    }
    */

    /*
    ③for语句：
        for(初始化语句;条件判断语句;流程控制语句){
            循环体语句
        }

    需求：对1-100进行求和
    */
    /*
    var result = 0;
    for(var i=1;i<=100;i++){
        result+=i;
    }
    document.write("结果为:"+result);
    */

    /*
    ④while语句
        初始化语句
        while(条件判断语句){ 
        循环体语句;
        条件控制语句;
        }

        执行流程：

        需求：在页面上打印十次helloworld;
    */
    /*
    var i = 1;
    while(i<=5){
        document.write("helloworld<br/>");
        i++;
    }
    */

    /*
    ⑤do-while语句
        初始化语句;
        do{
            循环体语句;
            条件控制语句;
        }while(判断条件语句)
    */
</script>

</head>

<body>
</body>
</html>

补充：

　　with语句：方便函数的调用（以上练习题网页拿过来直接讲解）
　　　　with(对象){
　　　　　　直接写对象的方法，无需写对象的名称
　　　　}

<script type="text/javascript">
/*
    with语句：方便函数的调用
        with(对象){
            直接写对象的方法，无需写对象的名称   
        }
*/
   with(document){
    var i = 0;
    do{
        write("helloword");
        write("<br>");
        i++;
        }while(i<10);

       }
</script>

２.6 函数
　　①函数定义：
　　　　function 函数名称(形式参数列表){
　　　　　　语句
　　　　}
　　②调用函数:
　　　　函数名称(实际参数列表);

　　③注意：
　　　　1）js的函数使用function定义，但是形式参数列表不能使用var关键词
　　　　2）js的函数可以有返回值，直接使用return关键词返回即可，不需要声明返回值类型
　　　　3) js没有方法重载的概念，后面定义的函数会覆盖前面的函数。
　　　　4）js中的形式参数和实际参数的数量可以不一致，依然可以调用。
　　　　5）js的每个函数中都隐藏了一个叫arguments的数组，这个数组用于接收函数调用时传递过来的实际参数值。
　　　　6)arguments数组接收完实际参数后，会逐一的依次从左到右赋值给形式参数,如果实际参数数量大于形式参数，则丢失剩下的实际参数
　　　　注意：
　　　　　　实际参数<形式参数： NaN
　　　　　　实际参数>形式参数：取前面的实际参数，后面的参数丢失
案例：定义一个函数，输入月份，可以查询到该月份的天数
　　　　1,3,5,7,8,10,12 大月 31天
　　　　4,6,9,11 小月 30天
　　　　2 小小月 28天

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    //当我的按钮的单击事件被触发以后需要执行的操作
    function checkMonth(){
        //获取单行输入域内的用户输入的月份值
        var month = document.getElementById("month").value;
        //使用if语句做判断,给出相应的提示
        /*
        1,3,5,7,8,10,12  大月 31天
        4,，6,9,11  小月  30天
        2  小小月  28天
        */
        if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){     
            alert("该月有31天");
            }else if(month==4||month==6||month==9||month==11){
                alert("该月有30天");
                }else if(month==2){
                    alert("该月有28天");
                    }else{
                        alert("星球上没有这个月份");
                        }
        }

</script>
</head>

<body>
请输入你需要查询的月份:<input type="text" id="month"/>
<!--在这里需要给我的button标签添加一个单击事件-->
<input type="button" value="查询天数" onclick="checkMonth()" />

</body>
</html>

２.7 基于对象编程
内置对象
　　1.　String对象
　　　　方式一：定义String对象
　　　　　　var str1 = new String(“hello”);
　　　　　　var str2 = new String(“hello”);
　　　　　　document.write(“结果：”+(str1==str2)+"<br/>");
　　　　　　　　valueOf（）:该方法返回对象的内容
　　　　　　document.write(“结果：”+(str1.valueOf()==str2.valueOf()));
　　　　方式二：
　　　　　　var str1 = “hello”;
　　　　　　var str2 = “hello”;
　　　　　　document.write(“结果：”+(str1==str2)+”
”);

　　　　常用方法：
　　　　　　charAt(索引): 返回指定索引的内容
　　　　　　indexOf(字符串): 返回首次出现指定字符的索引位置
　　　　　　lastIndexOf(字符串): 返回最后出现指定字符的索引位置
　　　　　　fontcolor(“red”): 直接给字符串添加颜色
　　　　　　split(“字符串”): 使用指定字符串切割字符串，返回字符串数组
　　　　　　substring(start,end); 截取字符串，start：开始索引， end:结束索引
　　　　　　substr(strat,[length]) 截取字符串， start：开始索引 length: 截取的字符串长度
　　２．Number对象
　　　　方式一：定义Number对象
　　　　　　var num1 = new Number(20);
　　　　　　var num2 = new Number(20);
　　　　方式二：
　　　　　　var num1 = 20;
　　　　　　var num2 = 20;
　　　　对比
　　　　　　document.write((num1==num2)+"<br/>");
　　　　　　document.write(num1.valueOf()==num2.valueOf());
　　３．Boolean对象
　　　　　　var b1 = new Boolean(true);
　　　　　　var b2 = new Boolean(true);
　　　　　　document.write((b1==b2)+”
”);
　　　　　　document.write(b1.valueOf()==b2.valueOf());
　　４．Math对象
　　　　常用的方法：
　　　　　　1）ceil()：向上取整。如果有小数部分的话，直接+1
　　　　　　2）floor(): 向下取整。如果有小数部分的话，直接丢失小数部分，保利整数位
　　　　　　3) round(): 四舍五入取整。满5进一
　　　　　　4）random(): 生成一个随机的0-1的小数 .包含0，不包含1
　　　　　　5）max(): 返回最大值
　　　　　　6）min(): 返回最小值
　　５．Date对象

//创建日期
            var date = new Date(); //取当前系统日期时间    java: SimpleDateFormat对象 yyyy-MM-dd 格式化
            //document.write(date);  //默认格式
            //格式： 2015年06月01日 15时12分30秒
            //年份
            document.write(date.getFullYear()+"年");
            //月
            document.write((date.getMonth()+1)+"月");
            //日
            document.write(date.getDate()+"日");
            //星期
            document.write("星期"+date.getDay()+"&nbsp;");
            //时
            document.write(date.getHours()+"时");
            //分
            document.write(date.getMinutes()+"分");
            //秒
            document.write(date.getSeconds()+"秒");

案例练习：网页时钟

<body>
当前的日期为：<span id="dateTip"></span>
</body>

<script type="text/javascript">
    function genNewDate(){
        //生成一个系统的当前时间，格式：2015-06-01 15:22:30
        var date = new Date();
        //当前日期时间的字符串
        var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+"&nbsp;"+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
        //把日期字符串放到span中
        //得到span对象
        var dateTip = document.getElementById("dateTip"); //读到了没有加载的标签，无法读取的
        //设置span的innerHTMl属性给span赋值
        dateTip.innerHTML=dateStr;
    }

    //设置定时器，每个多少毫秒调用1次任务（函数）
    window.setInterval("genNewDate()",1000);
</script>

　　６．Array数组对象
　　　　方式一：创建数组
　　　　　　1.1 指定数组长度
　　　　　　　　var arr = new Array(3);
　　　　　　1.2 不指定数组长度、默认0个元素
　　　　　　　　var arr = new Array();
　　　　　　1.3 指定具体内容
　　　　　　　　var arr = new Array(10,”hello”,true);
　　　　方式二：不需要new，直接指定内容
　　　　　　　　var arr = [10,”java”,false];
　　　　　　　　
　　　　注意：
　　　　　　1）数组的长度会随着元素的添加而变化，不用担心出现索引位置越界的异常。
　　　　　　2) js的数组可以存放任意类型的元素。
　　　　　　
　　　　常用的方法：
　　　　　　join(字符串): 使用指定的字符串，把数组的所有元素连接在一起，最终组成一个新的字符串
　　　　　　reverse(): 反转数组中的元素
　　　　　　sort():排序（数字按从小到大，字母按a-z）
　　　　　　
　　　　常用的属性：length 数组的长度
练习１：显示乘法口诀。
1*1=1
1*2=2 2*2=4
….
1*9=9 2*9=18 …

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
for(var i=1;i<=9;i++){
    for(var j=1;j<=i;j++){
        document.write(j+"*"+i+"="+i*j+"   ");
        }
    document.write("<br>");
    }
</script>
</head>

<body>
</body>
</html>

练习２：设计一个猜数字小游戏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
    //生成随机数
    var num = Math.floor(Math.random()*100+1);
    //alert(num);
    function checkNumber(){
        //1.获取输入狂内部输入的数字
        var inputNumber = document.getElementById("inputNumber").value;

        //将数字的类型进行转换
        inputNumber = parseInt(inputNumber);

        //做if判断并给出提示
        if(inputNumber>num){
            alert("大了");
            }else if(inputNumber<num){
                alert("小了");
                }else if(inputNumber==num){
                    alert("对了");
                    }

        }

</script>
</head>

<body>
请输入你猜测得数字:<input type="text" id="inputNumber" />
<input type="button" onclick="checkNumber()" value="猜数字" />

</body>
</html>