1、JavaScript简介

2、输出语句

2.1 代码块

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>标题</title>
  6.         <style type="text/css">
  8.         </style>
  9.     </head>
  11.     <body>
  13.               <!-- JS代码要写到script标签中 -->
  14.         <script type="text/javascript">
  16.            /*
  17.              控制浏览器弹出一个警告框
  18.             */
  19.             // alert("hello")
  21.             /*
  22.                  让计算机在页面中输出一个内容
  23.                  document.write()可以向body中输出一个内容
  24.             */
  25.             // document.write("你好，js！！！");
  27.             /*
  28.                向控制台输出一个内容
  30.             */
  31.            console.log("在控制台中输出！！！");
  33.         </script>
  35.     </body>
  36. </html>

2.2 测试结果

3、JS编写位置

3.1代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>js位置</title>
  7.     <style type="text/css"> </style>
  8. </head>
  10. <body>
  12.       <!--
  13.           可以将js代码编写到外部js文件中，然后通过script标签引入
  14.               写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制，推荐使用
  15.                   script标签一旦用于引入外部文件，就不能再写代码了，就算编写了浏览器也会忽略，如果需要
  16.                         则可以在创建一个新的script标签用于编写内容代码
  18.             -->
  20.     <script type="text/javascript" src="js/script.js">
  22.     </script>
  24.              <!-- 可以将js代码编写到标签的onclick属性中
  25.                当我们点击按钮时，js代码才会执行
  26.                写在属性中，耦合性高，不方便维护 -->
  28.                <button onclick="alert('我在学习js');">点我</button>
  30.                <a href="javascript:alert('你好')">点我一下</a>
  32. </body>
  34. </html>

3.2 测试结果

4、基本语法

4.1 代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>标题</title>
  7.     <style type="text/css">  </style>
  8.     <script type="text/javascript">
  10.         /*
  11.             多行注释
  12.             JS注释
  13.             注释中的内容不会被执行，可以在源码中看到
  15.         */
  17.         //单行注释
  19.         /*
  20.             1、JS中严格区分大小写
  21.             2、JS中每一条语句以分号(;)结尾     如果不写分号，浏览器会自动添加，
  22.                                                但是会影响性能。有些时候浏览器会加错分号
  24.             3、JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化
  26.         */
  28.     </script>
  29. </head>
  31. <body>
  33. </body>
  35. </html>

5、标识符

5.1 代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>标题</title>
  7.     <style type="text/css"> </style>
  9.     <script type="text/javascript">
  11.         /*
  13.               标识符：
  14.                    在JS中所有的可以由我们自主命名的都可以称为是标识符
  15.                    例如： 变量名、函数名、属性名都属于标识符
  16.                    命名一个标识符时需要遵循如下的规则：
  17.                         1、标识符中可以含有字母、数字、_、$
  18.                         2、标识符不能以数字开头
  19.                         3、标识符不能是ES中的关键字或保留字
  20.                         4、标识符一般使用驼峰命名法
  21.                              - 首字母小写，每个单词的开头字母大写，其余字母小写
  23.         */
  25.     </script>
  26. </head>
  28. <body>
  30. </body>
  32. </html>

6、数据类型

6.1 代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>字符串</title>
  7.     <style type="text/css"> </style>
  9.     <script type="text/javascript">
  11.            /*
  12.              数据类型指的就是字面量的类型
  13.                 在JS中一共有六种数据类型
  14.                 String 字符串
  15.                 Number 数值
  16.                 Boolean 布尔值
  17.                 Undefind 未定义
  18.                 Object 对象
  20.             其中String、Number、Boolean Undefined属性属于基本数据类型
  21.             而Object属于引用数据类型
  23.            */
  25.            /*
  26.              String 字符串
  27.                    - 在JS中字符串需要使用引号引起来
  28.                    - 使用双引号或单引号
  29.                    - 引号不能嵌套，双引号中不能放双引号，单引号不能 放单引号
  30.             */
  32.             var str = 'hello';
  33.             var str1 = "JS";
  35.             /*
  36.              在字符串中我们可以使用\作为转移字符
  37.                当表示一些特殊符号时可以使用\进行转义
  39.                 \" 表示"
  40.                 \' 表示'
  41.                 \n 表示换行
  42.                 \t 制表符
  43.                 \\ 表示\
  45.             */
  46.             var str2;
  47.             str2 = "我说：\"今天天气真不错！\"";
  48.             console.log(str2)
  50.            /*
  52.             /*
  53.              在JS中所有的数值都是Number类型，
  54.                 包括整数和浮点数（小数）
  56.                 JS中可以表示的数字的最大值
  57.                   Number.MAX_VALUE
  59.                   如果使用Number表示的数字超过了最大值，则会返回一个Infinity 表示正无穷
  61.                   NaN 是一个特殊 的数字， 表示Not A Number
  62.                        使用typeof检查一个NaN也会返回number
  64.             */
  66.             //数字123
  67.             var a = 123;
  69.             //字符串123
  70.             var b = "123";
  72.             /*
  74.             可以使用一个运算符typeof来检查一个变量的类型
  75.             语法：typeof 变量
  76.             检查字符串时,会返回string
  77.             检查数值时，会返回number
  79.             */
  81.             console.log(typeof b ) 
  83.             // 在JS中整数的运算基本可以保证精确
  84.             var c = 123 + 345;
  86.             /*
  87.                如果使用JS进行浮点运算，可能得到一个不精确的结果
  88.                千万别使用JS进行对精确度要求比较高的运算
  90.             */
  91.             var c = 0.1 + 0.4;
  93.             /*
  95.                Boolean 布尔值:
  96.                       布尔值只有两个：true 表示真。  false 表示假
  97.                       使用typeof检查一个布尔值时，会返回boolean
  99.             */
  101.             var bool = true;
  103.              /*
  104.             Null类型的值只有一个,就是null。null这个值专门用来表示一个为空的对象
  105.                                使用typeof检查一个null值时，会返回object
  107.             Undefined(未定义)类型的值只有一个,就undefind
  108.                             当声明一个变量，但是并不给变量赋值时，它的值就是undefined
  109.                             使用typeof检查一个undefined时也会返回undefined
  111.             undefined
  113.             */
  115.     </script>
  116. </head>
  118. <body>
  120. </body>
  122. </html>

7、强制类型转换–String

7.1 代码

  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>强制类型转化</title>
  7.     <style type="text/css"> </style>
  9.     <script type="text/javascript">
  11.                 /*
  13.               强制类型转换
  14.                      指将一个数据类型强制转换为其他的数据类型
  15.                      类型转换主要是指，将其他的数据类型，转换为String Number Boolean
  17.                 */
  19.                 /*
  21.                 将其他的类型转换为String
  23.                     方式一：
  24.                        - 调用被转换数据类型的toString()方法
  25.                        - 该方法不会影响到原变量，它会将转换的结果返回
  26.                        - 但是注意：null和undefined这两个值没有toString()方法
  28.                     方式二：
  29.                           - 调用String()函数，并将被转换的数据作为参数传递给函数
  30.                           - 使用String()函数做强制类型转换时
  31.                                对于Number和Boolean实际上就是调用的toString()方法
  32.                             但是对于null和undefined，就不会调用toString()方法
  33.                                 它会将null 直接准换为 "null"
  34.                                 将undefined 直接转换为"undefined"
  36.                 */
  37.                var a = 123;
  39.                //调用a的toString()方法
  40.                a = a.toString();
  42.                a = true;
  44.                a = a.toString();
  46.                console.log(typeof a);
  48.                //调用String()函数，并将b转换为字符串
  49.                var b = 12;
  50.                 b = String(b);
  52.     </script>
  53. </head>
  55. <body>
  57. </body>
  59. </html>

JavaScript基础&实战（1）js的基本语法、标识符、数据类型的更多相关文章

  1. javascript基础入门之js中的数据类型与数据转换01

    javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM)        js中的打印语句:        数据类型        变量      ...

  2. javascript基础入门之js中的结构分支与循环语句

    javascript基础入门之js中的结构分支与循环语句 程序的结构①顺序结构:自上而下:②选择(分支)结构:多条路径,根据不同的条件,只执行其中一个:③循环结构:重复某些代码④配合特定的语句实现选择 ...

  3. JavaScript基础&实战（4）js中的对象、函数、全局作用域和局部作用域

    文章目录 1.对象的简介 2.对象的基本操作 2.1 代码 2.2 测试结果 3.属性和属性值 3.1 代码 3.2 测试结果 4.对象的方法 4.1 代码 4.2 测试结果 5.对象字面量 5.1 ...

  4. JavaScript基础&实战（3）js中的流程控制语句、条件分支语句、for循环、while循环

    文章目录 1.流程控制语句 1.1 代码 1.2 测试结果 2.弹窗提示输入内容 2.1 代码 2.2 测试结果 3.条件分支语句 3.1 代码 3.2 测试结果 4.while和 do...whil ...

  5. JavaScript基础&实战（2）js中的强制类型转换、运算符、关系运算符、逻辑运算符、条件运算符

    文章目录 1.强制类型转换Number 1.1 代码 1.2 测试结果 2.进制表示 2.1 代码 2.2 测试结果 3.强制类型转换为Boolea 3.1 代码 3.2 测试结果 4.运算符 4.1 ...

  6. JavaScript基础&实战 JS中正则表达式的使用

    文章目录 1.正则表达式 1.1 代码 1.2 测试结果 2.splict | search 2.1 代码 2.2 测试结果 1.正则表达式 1.1 代码 <!DOCTYPE html> ...

  7. JavaScript基础&实战（5）js中的数组、forEach遍历、Date对象、Math、String对象

    文章目录 1.工厂方法创建对象 1.1 代码块 1.2.测试结果 2.原型对象 2.1 代码 2.2 测试结果 3.toString 3.1 代码 3.2 测试结果 4.数组 4.1 代码 5.字面量 ...

  8. JavaScript基础一（js基础函数与运算符）

    [使用js的三种方式] 1.在HTML标签中,直接内嵌js(并不提倡使用) <button onclick=" alert('点就点')"> 点我啊</butto ...

  9. Node.js实战(五)之必备JavaScript基础

    阅读本章的话,个人觉得之前使用过JavaScript,完全轻松. Node.js的核心类型有:number.boolean.string以及object.另外两种类型分别是函数合数组,其实它们你可以理 ...

随机推荐

  1. Dolphin Scheduler 1.1.0升级1.2.0避坑指南

    本文章经授权转载 组件介绍 Apache Dolphin Scheduler是一个分布式易扩展的可视化DAG工作流任务调度系统.致力于解决数据处理流程中错综复杂的依赖关系,使调度系统在数据处理流程中开 ...

  2. Linux 04 用户文件

    参考源 https://www.bilibili.com/video/BV187411y7hF?spm_id_from=333.999.0.0 版本 本文章基于 CentOS 7.6 概述 完成用户管 ...

  3. React报错之Expected `onClick` listener to be a function

    正文从这开始~ 总览 当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生"Expected onClick listener to be a function" ...

  4. 使用 Vue.js 框架后的感想

    前言 用 Vue 已经有段时间了,把自己的所想所悟写下来,每一个想法都是非常宝贵的,记录成为生活,记录成为习惯. 简化开发 Vue 是可以辅助前端工程师开发 Web App 的一种框架,它节省很多时间 ...

  5. linux --stdin 管道 标准输入重定向

    linux --stdin 标准输入重定向 --stdin This option is used to indicate that passwd should read the new passwo ...

  6. Mybatis中多对一与一对多

    多对一的处理 在pojo中就有 Student private String name; private String id; private Teacher teacher; 比如说多个学生对应着一 ...

  7. 面试突击78：@Autowired 和 @Resource 有什么区别？

    @Autowired 和 @Resource 都是 Spring/Spring Boot 项目中,用来进行依赖注入的注解.它们都提供了将依赖对象注入到当前对象的功能,但二者却有众多不同,并且这也是常见 ...

  8. Qt 创建按钮动画

    1 封装自定义按钮 myPushBttton 2 构造函数 (默认图片,按下后显示图片) 3 测试开始按钮 4 开始制作特效 5 zoom1 向下弹跳 6 zoom2 向上弹跳 代码如下 main.h ...

  9. OSI七层模型与TCP/IP协议

    作者:菘蓝 时间:2022/9/1 ================================================================================== ...

  10. 源码(chan,map,GMP,mutex,context)

    目录 1.chan原理 1.1 chan底层数据结构 1.2 创建channel原理 1.3 写入channel原理 1.4 读channel原理 1.5 关闭channel原理 1.6 总结 2.m ...