JavaScript介绍

最新推荐文章于 2025-04-28 15:15:19 发布

学无止路

最新推荐文章于 2025-04-28 15:15:19 发布

阅读量5.3k

点赞数 9

分类专栏： Web 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_40055163/article/details/120670761

版权

本文详细介绍了JavaScript的基础知识，包括它的作用、类型、语法和编程特性。通过实例展示了如何创建第一个JS程序，涉及变量、数据类型、运算符、流程控制、函数以及对象的使用。此外，还讲解了事件编程，如单击事件和各种事件属性，为初学者提供了全面的学习指南。

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

1 引言

Javascript 简称：js 独立的编程语言。
作用：实现网页动态效果(改变的是页面的结构)的技术。
注意事项：

1.javascript 和 java  没关系    原名：ECMAScript  独立的编程语言。
2.js实现网页动态效果的  应用于网页(HTML)中  前端编程语言。
3.Js是一门解释性的编程语言。
编程语言的分类
编译性编程语言：需要先经过编译器编译 运行效率高 不能跨平台 C  C++。
解释性编程语言：直接经过解释器解释运行 逐行运行 效率低 跨平台 js。
先编译后解释：java。
4.Js的解释器是浏览器
不同的浏览器在解析js语法时 存在一些差异   ----   浏览器差异。
WebKit内核  支持标准ECMAScript    360  chrome 。
IE内核       微软      ie浏览器   6.0之前。

2 第一个js程序

1.打开IDEA如图所示的界面，点击Create New Project。
在这里插入图片描述
2.选择Empty Project，点击Next。如图所示：
3.填写项目名称，点击Finish。如图所示：
5.点击File–>New–>Module，如图所示：

6.选择Java，点击Next。如图所示：

7.填写子项目名称，点击Finish。如图所示：

8.选择项目，选择如图所示即可。在这里插入图片描述
9.勾选web相关即可。

10.准备HTML页面 js不能独立运行，必须依托于网页运行。
12.书写javascript代码(基本页面结构)。
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js程序</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        // 书写javascript代码
    </script>
</head>
<body>
</body>
</html>

如图所示：
在这里插入图片描述
3.输出语法
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js程序</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        // 书写javascript代码
        // 向页面打印内容，参数：要打印的内容
        document.write("下课！！！！");
        // 浏览器弹框提示 参数：是要提示的内容，阻止后续程序运行
        alert("下课！！！！");
        // 控制台输出，参数：要打印的内容
        console.log("hello");
        console.info("world");
    </script>
</head>
<body>
   Hello World
</body>
</html>

如图所示：在这里插入图片描述

3 Js的基础语法

1、变量 js是弱类型的编程语言，没有变量类型统一用var表示。
var a ; a = 10; a=”liuh” a=’a’
注意：定义变量可以不用var c=”nicai” 代表全局变量。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js程序</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        // 书写javascript代码
        var a = 10;
        var b = "ncai";
        alert(a);
        alert(b);
        // 全局变量，静态资源
        c = "xiaoke";
        alert(c);
    </script>
</head>
<body>
   Hello World
</body>
</html>

如图所示：在这里插入图片描述
2、数据类型
1.数字类型 number 不区分整数和浮点数。
var a = 10 var b = 100.01
2.字符串类型 String 不区分字符和字符串不区分单双引号。
var s1=”liuh” var s2=’liuh’ var s3=’a’ var s4 = “a”
3.布尔类型
真假
true false
非0 0
非null null
4.特殊类型
NAN : Not A Number 不是一个数进行一些非数字运算。
“wangyx” / 2 = NAN
undefined 声明变量没有赋值直接使用。
null 1.变量手工赋值为null。 2.函数返回值为null。
5.查看当前变量类型
typeof 变量名
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js程序</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        // 书写javascript代码
        /*   var a ;
        alert(c);*/
        var a = n;
        alert(typeof a);
    </script>
</head>
<body>
   Hello World
</body>
</html>

如图所示：在这里插入图片描述
3、运算符
1.赋值运算符 = += -= *= /= %=
2.算术运算符 + - * / % ++ –
3.比较运算符 > >= < <= != == ===
== 和 === 区别，如图所示：
4.逻辑运算符 && || ！
5.三目运算符(三元运算符)
布尔类型表达式？为真：为假。
演示的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个js程序</title>
    <!--通知浏览器以下内容是javascript代码-->
    <script type="text/javascript" >
        // 书写javascript代码
        // var a = 10;
        // alert(a % 3);
        var a = 10;
        var b = "10";
        /*alert(a == b);   // 判断变量的字面值 true
        alert(a === b);  // 判断变量的字面值 以及类型 false*/
        var