JavaScript基础&实战(1)js的基本语法、标识符、数据类型

简介: 这篇文章是JavaScript基础与实战教程的第一部分,涵盖了JavaScript的基本语法、标识符、数据类型以及如何进行强制类型转换,通过代码示例介绍了JS的输出语句、编写位置和数据类型转换方法。

文章目录

  • 1、JavaScript简介
  • 2、输出语句
    • 2.1 代码块
    • 2.2 测试结果
  • 3、JS编写位置
    • 3.1代码
    • 3.2 测试结果
  • 4、基本语法
    • 4.1 代码
  • 5、标识符
    • 5.1 代码
  • 6、数据类型
    • 6.1 代码
  • 7、强制类型转换--String
    • 7.1 代码

1、JavaScript简介

在这里插入图片描述

在这里插入图片描述

2、输出语句

2.1 代码块

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>标题</title>
        <style type="text/css">

        </style>
    </head>

    <body>

              <!-- JS代码要写到script标签中 -->
        <script type="text/javascript">

           /*
             控制浏览器弹出一个警告框
            */
            // alert("hello")

            /*
                 让计算机在页面中输出一个内容
                 document.write()可以向body中输出一个内容
            */
            // document.write("你好,js!!!");

            /*
               向控制台输出一个内容

            */
           console.log("在控制台中输出!!!");



        </script>

    </body>
</html>

2.2 测试结果

在这里插入图片描述

3、JS编写位置

在这里插入图片描述

3.1代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>js位置</title>
    <style type="text/css"> </style>
</head>

<body>

      <!-- 
          可以将js代码编写到外部js文件中,然后通过script标签引入
              写到外部文件中可以在不同的页面中同时引用,也可以利用到浏览器的缓存机制,推荐使用 
                  script标签一旦用于引入外部文件,就不能再写代码了,就算编写了浏览器也会忽略,如果需要
                        则可以在创建一个新的script标签用于编写内容代码


            -->

    <script type="text/javascript" src="js/script.js">

    </script>

             <!-- 可以将js代码编写到标签的onclick属性中
               当我们点击按钮时,js代码才会执行
               写在属性中,耦合性高,不方便维护 -->

               <button onclick="alert('我在学习js');">点我</button>

               <a href="javascript:alert('你好')">点我一下</a>

</body>

</html>

3.2 测试结果

在这里插入图片描述

4、基本语法

4.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css">  </style>
    <script type="text/javascript">

        /*
            多行注释
            JS注释
            注释中的内容不会被执行,可以在源码中看到

        */

        //单行注释

        /*
            1、JS中严格区分大小写
            2、JS中每一条语句以分号(;)结尾     如果不写分号,浏览器会自动添加,
                                               但是会影响性能。有些时候浏览器会加错分号

            3、JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化




        */


    </script>
</head>

<body>



</body>

</html>

5、标识符

5.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

        /*

              标识符:
                   在JS中所有的可以由我们自主命名的都可以称为是标识符
                   例如: 变量名、函数名、属性名都属于标识符
                   命名一个标识符时需要遵循如下的规则:
                        1、标识符中可以含有字母、数字、_、$
                        2、标识符不能以数字开头
                        3、标识符不能是ES中的关键字或保留字
                        4、标识符一般使用驼峰命名法
                             - 首字母小写,每个单词的开头字母大写,其余字母小写

        */


    </script>
</head>

<body>

</body>

</html>

6、数据类型

6.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>字符串</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

           /*
             数据类型指的就是字面量的类型
                在JS中一共有六种数据类型
                String 字符串
                Number 数值
                Boolean 布尔值
                Undefind 未定义
                Object 对象

            其中String、Number、Boolean Undefined属性属于基本数据类型
            而Object属于引用数据类型

           */


           /*
             String 字符串
                   - 在JS中字符串需要使用引号引起来
                   - 使用双引号或单引号
                   - 引号不能嵌套,双引号中不能放双引号,单引号不能 放单引号
            */

            var str = 'hello';
            var str1 = "JS";

            /*
             在字符串中我们可以使用\作为转移字符
               当表示一些特殊符号时可以使用\进行转义

                \" 表示"
                \' 表示'
                \n 表示换行
                \t 制表符
                \\ 表示\

            */
            var str2;
            str2 = "我说:\"今天天气真不错!\"";
            console.log(str2)

           /*

            /*
             在JS中所有的数值都是Number类型,
                包括整数和浮点数(小数)

                JS中可以表示的数字的最大值
                  Number.MAX_VALUE

                  如果使用Number表示的数字超过了最大值,则会返回一个Infinity 表示正无穷

                  NaN 是一个特殊 的数字, 表示Not A Number
                       使用typeof检查一个NaN也会返回number


            */

            //数字123
            var a = 123;

            //字符串123
            var b = "123";

            /*

            可以使用一个运算符typeof来检查一个变量的类型
            语法:typeof 变量
            检查字符串时,会返回string
            检查数值时,会返回number

            */

            console.log(typeof b ) 

            // 在JS中整数的运算基本可以保证精确
            var c = 123 + 345;


            /*
               如果使用JS进行浮点运算,可能得到一个不精确的结果
               千万别使用JS进行对精确度要求比较高的运算

            */
            var c = 0.1 + 0.4;

            /*

               Boolean 布尔值:
                      布尔值只有两个:true 表示真。  false 表示假
                      使用typeof检查一个布尔值时,会返回boolean

            */

            var bool = true;

             /*
            Null类型的值只有一个,就是null。null这个值专门用来表示一个为空的对象
                               使用typeof检查一个null值时,会返回object

            Undefined(未定义)类型的值只有一个,就undefind
                            当声明一个变量,但是并不给变量赋值时,它的值就是undefined
                            使用typeof检查一个undefined时也会返回undefined

            undefined

            */



    </script>
</head>

<body>

</body>

</html>

7、强制类型转换–String

7.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>强制类型转化</title>
    <style type="text/css"> </style>

    <script type="text/javascript">

                /*

              强制类型转换
                     指将一个数据类型强制转换为其他的数据类型
                     类型转换主要是指,将其他的数据类型,转换为String Number Boolean

                */

                /*

                将其他的类型转换为String

                    方式一:
                       - 调用被转换数据类型的toString()方法
                       - 该方法不会影响到原变量,它会将转换的结果返回
                       - 但是注意:null和undefined这两个值没有toString()方法


                    方式二:
                          - 调用String()函数,并将被转换的数据作为参数传递给函数
                          - 使用String()函数做强制类型转换时
                               对于Number和Boolean实际上就是调用的toString()方法
                            但是对于null和undefined,就不会调用toString()方法
                                它会将null 直接准换为 "null"
                                将undefined 直接转换为"undefined"

                */
               var a = 123;

               //调用a的toString()方法
               a = a.toString();

               a = true;

               a = a.toString();

               console.log(typeof a);

               //调用String()函数,并将b转换为字符串
               var b = 12;
                b = String(b);




    </script>
</head>

<body>

</body>

</html>
相关文章
|
7天前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
17天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
2天前
|
存储 网络架构
Next.js 实战 (四):i18n 国际化的最优方案实践
这篇文章介绍了Next.js国际化方案,作者对比了网上常见的方案并提出了自己的需求:不破坏应用程序的目录结构和路由。文章推荐使用next-intl库来实现国际化,并提供了详细的安装步骤和代码示例。作者实现了国际化切换时不改变路由,并把当前语言的key存储到浏览器cookie中,使得刷新浏览器后语言不会失效。最后,文章总结了这种国际化方案的优势,并提供Github仓库链接供读者参考。
|
2天前
Next.js 实战 (三):优雅的实现暗黑主题模式
这篇文章介绍了在Next.js中实现暗黑模式的具体步骤。首先,需要安装next-themes库。然后,在/components/ThemeProvider/index.tsx文件中新增ThemeProvider组件,并在/app/layout.tsx文件中注入该组件。如果想要加入过渡动画,可以修改代码实现主题切换时的动画效果。最后,需要在需要的位置引入ThemeModeButton组件,实现暗黑模式的切换。
|
20天前
|
JavaScript 前端开发
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
|
18天前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
22 2
|
21天前
|
存储 JavaScript 前端开发
js中的数据类型
JavaScript 中的数据类型包括五种基本类型(String、Number、Undefined、Boolean、Null)和三种引用类型(Object、Array、Function,以及ES6新增的Symbol)。基本类型直接存储值,引用类型存储的是指向实际数据的内存地址。了解它们的区别对于掌握 JavaScript 的变量赋值和函数传参至关重要。
20 1
|
2月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
32 1
|
20天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
2月前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块,可在调用时执行特定任务。函数可以无参或带参,参数用于传递值并在函数内部使用。函数调用可在事件触发时进行,如用户点击按钮。JavaScript 对大小写敏感,函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。