JavaScript基础学习

最新推荐文章于 2024-08-30 20:29:15 发布
最新推荐文章于 2024-08-30 20:29:15 发布
阅读量138 收藏
点赞数
分类专栏： Web前端 文章标签： js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mu_yongheng/article/details/114777431
版权

今天开始学习javascript，前面已经对HTML和CSS做了一个大致的了解，不过也只是大致了解了他们的语法规则，现在如果让我做出来一个比较完美的网页我可能还做不到，不过给我一个网页的源码我至少能大致看懂每一块的大致意思。

HTML和CSS是起到了设计网页的作用，而javascript就是让网页动起来，下面是我学习的一些基本语法，如果以前对高级语言java或者C++有所了解的话，这些还是比较容易上手的，主要是要注意一下不一样的地方。

目录

1、在HTML中使用js的第1种方式

直接在head标签中使用script标签，其中加入js的语句即可，这里我是输出了一个hello javascript字符串。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    
    <!-- 
        在HTML中使用javascript的两种方式：
            （1）直接在script标签中加入
            （2）使用srcipt引入.js文件
     -->
    <script type="text/javascript">
        alert("hello javascript!")
    </script>

</head>
<body>
    
</body>
</html>

2、在HTML中使用js的第2种方式

除了嵌入进去使用，还可以单独写一个js文件，将所有的语句存储进去，然后在HTML文件中直接引入这个js文件即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 引入当前路径下hello.js文件 -->
    <script type="text/javascript" src="./hello.js">

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

3、js中的数据类型

js中的数据类型和java有些差别，一共包括5种数据类型：

  • 数值类型（num）
  • 字符串类型（string）
  • 对象类型（object）
  • 布尔类型（boolean）
  • 函数类型（function）

在定义变量的时候，我们也不需要指定这个变量的类型，只需要使用关键字var定义一个变量，后面给这个变量赋哪个类型的值他就是什么类型，这和python相似。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script type="text/javascript">
        /*
           js中的数据类型
           数值类型：number
           字符串类型：string
           对象类型：object
           布尔类型：boolean
           函数类型：function

           js中特殊的值：undefined, null, NAN
           使用的时候使用var定义一个变量，然后后面进行赋值即可
         */
        var i = 12;
        alert(typeof(i));
    </script>
    
</head>
<body>
    
</body>
</html>

4、算数表达式

大部分的和java都是一样的，只有一个比较特殊就是等于（==）和全等于。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script type="text/javascript">
        var a = 12;
        var b = "12";
        // 只需要数值等于，不要求类型等于，所以这个是true
        alert(a == b);

        // 全等于：指的是数值和类型必须都等于，所以这个是false
        alert(a === b);
    </script>
    
</head>
<body>
    
</body>
</html>

5、逻辑运算

和java中有区别，运算规则见注释。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script type="text/javascript">
        /*
            js中所有的变量都可以做逻辑运算
            0, null, undefined, 空串"" 都是false

            && 运算：
                两种情况：
                    （1）当表达式全为真的时候，返回最后一个表达式的值
                    （2）当表达式中有一个为假的时候，返回第一个为假的表达式的值

            || 运算：
                两种情况：
                    （1）当表达式全为假时，返回最后一个表达式的值
                    （2）只要有一个表达式为真，就会返回第一个为真的表达式的值

            || 和 && 运算有短路：
                就是说当这个&& 或者 || 有计算结果之后，后面的表达式就不再执行
        */
        
    </script>
    
</head>
<body>
    
</body>
</html>

6、数组

js中数组可以根据最大下标进行扩容，没被赋值的被给undefined值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script type="text/javascript">
        // 定义一个空的数组
        var arr = [];
        arr[0] = 1;

        arr[2] = 3;

        // 可以根据最大下标进行扩容，没被赋值的被给undefined值
        arr[5] = "abc";
        // 数组的遍历
        for(var i = 0; i < arr.length; i++){
            alert(arr[i]);
        }
    </script>
    
</head>
<body>
    
</body>
</html>

7、函数（第一种定义方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        // 定义一个无参函数
        function fun(){
            alert("无参函数fun()被调用了");
        }
        // 调用无参函数
        fun();

        // 定义有参函数
        function fun2(a, b){
            alert("有参函数被调用了 a=>" + a + "b=>" + b);
        }
        // 调用有参函数
        fun2(3, 4);

        // 定义具有返回值类型的函数（直接 return 即可）
        function fun3(num1, num2){
            var num = num1 * num2;
            return num;
        }

        alert("计算两个值的乘积：" + fun3(3, 4));

        // js中函数不允许重载，直接覆盖掉

    </script>

</head>
<body>
    
</body>
</html>

8、函数（第二种定义方式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
        var fun1 = function(){
            alert("无参函数");
        }

        var fun2 = function(a, b){
            alert("有参函数被调用了 a=>" + a + "b=>" + b);
        }

        var fun3 = function(a, b){
            return a+b;
        }
    </script>
    
</head>
<body>
    
</body>
</html>

9、函数不允许重载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script type="text/javascript">
        function f1(){
            alert("无参函数");
        }

        function f1(a, b){
            alert(a+b);
        }

        f1(1, 1);
    </script>
    
</head>
<body>
    
</body>
</html>

10、隐形参数

隐形参数(arguments)：就是function中不需要定义，但是却可以直接来获取所有参数的变量（像java中的可变长参数），操作类似于数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <script type="text/javascript">
        /* 
            隐形参数(arguments)：就是function中不需要定义，但是却可以直接来获取所有参数的变量（像java中的可变长参数）
                操作类似数组
        */
       function fun(){
           alert(arguments.length);
           alert(arguments[0]);

           alert("无参函数fun()");
           for(var i = 0; i<arguments.length; i++){
               alert(arguments[i]);
           }
       }

       fun(1, "cd", true);



       // 定义一个函数实现计算所有参数的和
       function sum(num1, num2){
           alert("开始计算所有参数的和······")
           var result = 0;
           for(var i=0; i<arguments.length; i++){
               result += arguments[i];
           }
           alert("所有参数的和为：" + result);
       }

       // 调用函数sun()
       sum(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
    </script>
    
</head>
<body>
    
</body>
</html>
MYH永恒
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript学习-JavaScript基础
OuYyds的博客
03-24 504
JavaScript是一种专为与网页交互而设计的脚本语言, 具有较强的逻辑性. JavaScript由三部分组成: 核心基本语法(ECMAScript) ECMA：欧洲计算机制造商协会 浏览器对象模型(BOM） 文档对象模型(DOM) javaScript书写位置： 1.书写在标签中： <a href="javascript:alert('hello')"></a> 2.书写在script标签中 <script>
Javascript 基础知识学习
岳来的博客
11-23 7233
javascript 基础学习
JavaScript基础学习点滴第一章
weixin_54957314的博客
05-10 1197
JavaScript基础学习点滴第一章
JavaScript基础 学习笔记
kittates的博客
03-23 1168
初始JavaScript: 浏览器分为两部分:渲染引擎和JS引擎 渲染引擎:用来解析HTML、初始时,俗称内核,如Chrome的blink,老版本的webkit JS引擎:也成为JS解释器,用来读取网页中的JavaScript代码,对齐处理后运行,如Chrome的V8 浏览器本身不会执行JS代码,而是通过内置的JavaScript引擎(解释器)来执行JS代码,JS引擎执行代码是逐行解释每一句源码 并转化为机器语言然后去执行。 J
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
HTML CSS and Javascript 基础学习代码.zip
12-30
HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 ...
前端JavaScript基础学习笔记案例
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
JavaScript基础学习-1
12-20
1. JavaScript基础：学习ECMAScript的基本规则，这是JavaScript的核心语言部分。 2. ES6实战：了解并应用ES6引入的新特性，如箭头函数、类、模板字符串等。 3. 面向对象编程：理解面向对象的概念并学会在JavaScript...
基于vue框架的病床管理信息系统odt4v（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-27 1393
因此，开发一套集医疗人员、物流人员、病床信息及使用记录等功能于一体的病床管理信息系统，成为提升医院管理水平、优化资源配置、增强患者满意度的迫切需求。第三阶段：2024年4月1日－2024年4月30日，完成系统分析，设计，编码，测试等工作，同时完善文献综述及外文翻译，完成论文初稿；第二阶段：2024年3月10日－2024年3月31日，查阅资料，调研系统需求，熟悉课题所需要的编译软件、数据库和设计语言等；第一阶段：2023年1月11日－2024年3月9日， 确定毕设题目，查阅资料，完成开题报告，进行开题答辩。
vue ref和reactive区别
灰海
08-25 5452
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
python12 中，No module named‘distutils‘错误
热门推荐
qq_43557600的博客
08-27 1万+
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
【项目】云备份系统笔记
m0_73713491的博客
08-27 977
就包含一个类，config，是读取配置文件的类，因为配置文件只有一份，所以可以采用单例模式，把config类的构造函数私有化，只能通过一个公共成员函数getinstance（）来创建对象（new config（）），在类的内部可以调用私有化构造函数，构造函数里面再调用读取配置文件的函数，用自己实现的工具类读取配置文件，将读到的内容放到一个字符串中，然后再将字符串用Json进行序列化，然后给类中的成员变量进行赋值，类中的成员变量就包含了cloud.conf里面包含的信息，一一对应。
jQuery基础——DOM
m0_54066656的博客
08-27 1869
JQ基础——DOM操作
Vue的状态管理——Vuex3&4&Pinia
最新发布
警警的博客
08-30 1530
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 668
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
JavaWeb——前端工程化
m0_50460160的博客
08-30 558
通过解构赋值，可以访问到对象中的属性，并将其赋值给对应的变量，从而提高代码的可读性和可维护性;ES6 的解构赋值是一种方便的语法，可以快速将数组或对象中的值拆分并赋值给变量。该语句将数组 [1,2,3]中的第一个值赋值给a变量，第二个值赋值给b变量，第三个值赋值给c变量。ES6引入的模块化功能为JavaScript代码的组织和管理提供了更好的方式，不仅提高了程序的可维护性，还让JavaScript更方便地应用于大型的应用程序;并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动;
Vue动态表头数据
lplovewjm的博客
08-27 595
本文主要解决场景：表头不固定、从后端数据中拿取表头并渲染到页面中。
"轻松入门JavaScript基础学习及用法
学习 JavaScript 的教材是非常重要的，因为它可以帮助你快速掌握基础知识并建立强大的基础。在学习 JavaScript 的过程中，你将会了解到什么是 JavaScript，如何在 HTML 页面中添加 JavaScript 代码，以及如何使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

MYH永恒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值