《HTML CSS JavaScript 网页制作》JavaScript基本知识（简介、语法、事件、对象）

原创

z11xmei 2023-08-21 18:18:34 ©著作权

文章标签 html javascript 字符串 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者z11xmei的原创作品，请联系作者获取转载授权，否则将追究法律责任

一、JavaScript简介

1、JavaScript特点

脚本语言：是一种解释型的脚本语言，在程序运行过程中逐行进行解释；
基于对象：可以创建对象，也能使用现有的对象；
简单：采用的是弱类型的变量类型，对使用的数据类型未作出严格的要求；
动态性：采用事件驱动，不需要经过web服务器就可以对用户的输入作出响应；
跨平台性：不依赖于操作系统，仅需要浏览器的支持；

2、JavaScript的添加方法

JavaScript程序本身不能独立存在，依赖于某个HTML页面在浏览器端运行。

（1）内部引用

需要使用script标签，放在body标签里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部引用JS</title>
</head>
<body>
<script type="text/javascript" >
    alert("hello world")
</script>
</body>
</html>

（2）外部调用JS文件

将JavaScript程序放到.js文件中，这种方式更安全、方便。 hello.js文件

alert('hello world')

HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部引用JS</title>
    <script type="text/javascript" src="hello.js"></script>
</head>
<body>

</body>
</html>

（3）添加到事件中

放到事件处理部分的代码中如加入到onclick事件中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部引用JS</title>

</head>
<body>
<input type="button" name="FullScreen" value="全屏显示" onclick="window.open(document.location,'big','fullscreen=yes')">
</body>
</html>

3、JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台

4、操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作HTML</title>
</head>
<body>
<h1>javascript</h1>
<p id="demo">javascript yyds</p>
<script>
    document.getElementById("demo").innerHTML="java yyds";
</script>
</body>
</html>

二、JavaScript基础语法

1、注释

//1、单行注释
/*
2、多行注释
*/

过多的注释会降低JavaScript的执行速度和加载速度，因此发布网站时尽量不要使用过多的注释。

2、数据类型

（1）使用字符串型数据

可以使用单引号或双引号

var str='字符串';
var str="字符串";

获取字符串的长度：length

var len=str.length;

使用document.write输出相应的字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串</title>
</head>
<body>
<script type="text/javascript">
    var str="hello world";
    var len=str.length;
    document.write(str+"<br>");//内嵌HTML标签，表示换行
    document.write(len);
</script>
</body>
</html>

（2）使用数值型数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数值型</title>
</head>
<body>
<script>
    var x1=10;
    var x2=10.00;
    var x3=10e5;
    var x4=10e-5;
    document.write(x1+"<br>");
    document.write(x2+"<br>");
    document.write(x3+"<br>");
    document.write(x4);

</script>
</body>
</html>

（3）使用布尔型数据

只有真（true）、假（false）两个值

（4）使用Undefined和Null类型

Null：是一个类型为Null的对象，可以通过将变量的值设为Null来清空变量；
Undefined：表示变量不含有值；

3、复合数据类型

（1）常用的内置对象

Number对象：是一个数值包装器，可与new结合使用，并将其设置为一个稍后要在JavaScript代码中使用的变量。
Boolean对象：是一个代表true或false值的对象。当值为：0，-0，null，一个空字符串，NaN，false时，相当于false值，否则为true。
String对象：是文本值的包装器，不需要进行实例化就可以使用。
Date对象：用来处理日期和时间。
Array对象：是一个存储变量的变量。
Math对象：不能实例化，只能从该对象调用属性和方法。

（2）日期对象

利用new来声明一个新的对象实体 Date对象会自动把当前日期和时间保存为其初始值

var curr=new Date();

参数的形式有：

new Date("month dd,yyyy hh:mm:ss");
    new Date("month dd,yyyy");
    new Date("yyyy,mth,dd,hh,mm,ss");
    new Date("yyyy,mth,dd");
    new Date(ms);//返回与1970-1-1之间相差的毫秒数

month：用英文表示的月份，January~December mth：用整数表示的月份，0（1月）~11（12月） dd：表示是一个月中的第几天 yyyy：四位数表示的年份 hh：小时数，0~23（晚11点） mm：分钟数 ss：秒数 ms：毫秒数

从计算机系统上获取当前时间：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>日期对象</title>
</head>
<body>
<script type="text/javascript">
    function showTime(objD)
    {
        var str;
        var yy=objD.getFullYear();
        if(yy<1900)yy+=1900;
        var MM=objD.getMonth()+1;
        if(MM<10)MM='0'+MM;
        var dd=objD.getDate();
        if(dd<10)dd='0'+dd;
        var hh=objD.getHours();
        if(hh<10)hh='0'+hh;
        var mm=objD.getMinutes();
        if(mm<10)mm='0'+mm;
        var ss=objD.getSeconds();
        if(ss<10)ss='0'+ss;
        var ww=objD.getDay();
        switch(ww)
        {
            case 0:
                ww="星期日"
                break
            case 1:
                ww="星期一"
                break
            case 2:
                ww="星期二"
                break
            case 3:
                ww="星期三"
                break
            case 4:
                ww="星期四"
                break
            case 5:
                ww="星期五"
                break
            case 6:
                ww="星期六"
                break
        }
        str=yy+"-"+MM+"-"+dd+" "+hh+":"+mm+":"+ss+" "+ww;
        //alert(str);
        return(str);
    }
    function run()
    {
        var toDay;
        toDay=new Date();
        document.getElementById("localtime").innerHTML=showTime(toDay);
        window.setTimeout("run()",1000);
    }
    run();

</script>
</body>
</html>

（3）Math对象

与Java类似

Math.属性
Math.方法
如：
Math.abs()返回绝对值

（4）字符串对象

String对象是动态对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>String</title>
</head>
<body>
<script type="text/javascript">
    var str="hello world";
    document.write(str.toUpperCase()+"<br>");//转换成大写
    document.write(str.charAt(3)+"<br>");//返回指定位置处的字符
    var index=str.indexOf("llo");//返回指定字符串的位置，从左到右找
    document.write(index+"<br>");
    var index2=str.lastIndexOf("llo");//返回指定字符串的位置，从右到左找
    document.write(index2+"<br>");
    document.write(str.link("https://www.baidu.com"));//将字符串显示为链接
</script>
</body>
</html>

函数不止以上这些。

（5）数组对象Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Array</title>
</head>
<body>
<script type="text/javascript">
    //创建方式
    var a=new Array();//空数组对象
    var b=new Array(6);//包括6个元素的数组对象
    var c=new Array("x","y","z");//以x，y，z为元素的数组对象
    //还可以使用[]创建数组常量
    var d=["x","y",'z'];
    
</script>
</body>
</html>

4、运算符

其他运算符与其他语言如Java类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
<script type="text/javascript">
    var a=10;
    var b="10";
    if(a==b)// == 是相等运算符，左右两个操作符会先进行类型转换，在比较是否相等
    {
        document.write("yes");
    }
    if(a===b)// === 是等同运算符 不进行类型转换而直接比较
    {
        document.write("yes");
    }else
    {
        document.write("no");
    }
</script>
</body>
</html>

三、JavaScript进阶语法

1、函数

定义语法

function func1(---){---}
 var func2=function(---){---};
 var func3=function func4(---){---};
 var func5=new function ();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>
<script type="text/javascript">
   function func(a,b)
   {
       return a*b;
   }
    document.write(func(2,3));

</script>
</body>
</html>

2、选择语句

if()
   {
       
   }else if(){
       
   }else{
       
   }

switch(n)
   {
       case 1:
           
           break
       case 2:
           
           break
       default:
           
   }

3、循环语句

for,while,do while循环，与Java一样

四、JavaScript中的事件

1、事件驱动与事件处理

JavaScript中的事件驱动中的事件是通过鼠标或热键的动作引发的。

（1）单击事件onClick

当单击按钮时产生，onClick指定的事件处理程序或代码将被调用执行。一般在下列对象中产生：

Button（按钮对象）
checkbox（复选框）或（检查列表框）
radio（单选按钮）
reset buttons（重要按钮）
submit buttons（提交按钮）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
</head>
<body>
<script type="text/javascript">
    function func()
    {
        alert("hello world");
    }
</script>
<form>
    <input type="button" value=" " onclick="func()">//onclick可以使用自己编写的函数、JavaScript内置函数、直接的代码
</form>

</body>
</html>

（2）onChange（）改变事件

当利用text或texturea元素输入字符值改变时发生该事件，同时在select表格项中的一个选项状态改变后也会引发该事件。

上一篇：java基础类讲解

下一篇：priority queue 优先队列

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯