js基础01


内容概述

  1. JavaScript 的基本概念

  2. JavaScript 的由来

  3. 在那里写js代码

  4. 注释语法

  5. 如何声明变量，常用的有哪几种变量类型

  6. 数据类型之间的转换和如何判断变量属于那种数据类型

  7. 常用操作符

 

 

学习内容

JavaScript 概述

概念

 

  1. javascript 是互联网上最流行的、轻量级脚本语言；

  2. javascript 是可插入html(我们最常见的网页文件)页面的编程代码；

  3. javascript 插入html也买你后，可由所有现代浏览器执行；

  4. js是弱类型的语言；

  5. 推荐学习网站：

    • 菜鸟编程： 学习JavaScript基础语法和一些其它编程语言基础

    • W3school: 比较权威的学习JavaScript基础语法的网站；但可能内容不是最新的

    • MDN: 进阶学习，可查看各种对象属性和方法的语法和用法

 

JavaScript 是：一门运行在浏览器上面的脚本语言。

 

运行方式

 

 

javaScript的变更历史

JavaScript 有两个标准：

  • ECMA-262 由 Ecma International 主持。这是主要标准。

  • ISO / IEC 16262 由国际标准化组织（ISO）和国际电工委员会（IEC）主持。这是次要标准。

这些标准描述的语言成为ECMASccript,而不是javaScript。但原则上js和es意味着相同的事情。只是有时会做出一下区别：

  • 术语 JavaScript 指的是语言及其实现。

  • 术语 ECMAScript 是指语言标准和语言版本。

 

注意：js基础部分主要学习es6(又称es2015)之前的语法。由于es6新增了不少功能，后面会单独拿出来讲解

 

小结

JavaScript 的是什么语言？

脚本语言，一边编译一边执行，可以单行执行。

JavaScript 特点。

如果一行代码出错，后面代码就不执行。

 

 

JavaScript 作用和组成

JavaScript 作用

  1. javaScript 自身内置对象和语法。具有一定功能；

    var date = new Date('2022/08/08'); // 创建一个时间对象，获2022年8月8日零点
    console.log(date.getFullYear() + '-0' + (date.getMonth() + 1) + '-0' + date.getDate()) // 2022-08-08

  2. html树（DOM）实例：在html文档中写入一个标题

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    ​
    <script>
    document.write("<h1>Hello World!</h1>");
    </script>
    ​
    </body>
    </html>

  3. 浏览器（BOM）对象支持实例:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
    function myFunction(){
        alert("你好，我是一个警告框！");
    }
    </script>
    </head>
    <body>
    ​
    <input type="button" onclick="myFunction()" value="显示警告框" />
    ​
    </body>
    </html>

     

 

 

JavaScript初体验

js代码写在那里

  1. 在html页面中插入js,使用<script />。

    • 可以放在<head>或者<body>底部。 因为html文档的解析是从上到下逐步执行的，解析完js脚本后才会继续向下解析下面的内容，当网页文档js脚本过大时，最好放在<body>底部，避免干扰页面内容的显示。

    • 同一个网页文件中可以插入多段js脚本。

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction()
    {
        document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
    }
    </script>
    </head>
    <body>
    <h1>我的 Web 页面</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">尝试一下</button>
        
    <script>
    console.log(123)
    </script>
    </body>
    </html>

  2. 外部脚本文件，既写在以.js为后缀的文件里的js代码.在文档中的引入方式：

    <script src="js文件路径"></script>

  3. 行内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>
    </head>
    <body>
      <button onclick="document.write('<p>新增一段内容</p>')">浅试一下</button>
    </body>
    </html>

     

注释

被注释的内容仅供开发者查看，并不执行。

  1. 单行注释

// 单行注释

  1. 多行注释

/* 多行注释 */

 

 

常用输入输出的方法

 

  1. alert() ： 弹出一个警告框，只有一个按钮，alert 括号内的文字会在页面弹窗中显示。

    <script>
    window.alert(5 + 6);
    </script>

  2. prompt() ：弹出提示框，输出提示，用户可在输入框输入内容。

    <script>
      window.prompt();
    </script>

  3. console.log() : 控制台打印功能。按f12打开控制台，可以在上面写一些简单的js代码进行测试，在实际开发过程中最常用的方式。

     

 

 

变量

什么是变量

什么是变量：可以把编程时候需要的数据存放起来。

直接的一份数据，可以叫直接量，直接使用数据，在修改的时候需要一个个改回来。

变量的作用

所以变量的作用是： 把数据存起来后，可多次使用。

声明变量的语法
// 声明变量 - 创建变量
var 变量名;
​
// 把数据赋值 给 声明的变量
var 变量名 = 数据;

 

变量命名规范

必须遵守：

  1. 不能数字开头

  2. 符号值允许：下划线 _ 和 美元符号 $

  3. 不能占用关键字保留字

建议遵守：

  1. 驼峰命名：比如：fromCost

  2. 变量名语义: 尽量见名知意

 

数据类型

js中按照数据存储方式可分两种数据类型：基本数据类型和引用数据类型

基本数据类型：

数据存放在栈内，通过变量名可以直接访问数据。j中常见的基本数据类型

 

  • 字符串类型： string。如：'abc'、 '123'

  • 数值类型：number。所有的数字都归数字类型管，比如： 整数，小数，负数，正数 ...。

    特殊的数字类型：NaN,表示不是一个数字。

    出现NaN的情况：

    • 数据类型转换成数值型转换失败的时候返回的结果。

    • 进行数学运算无法运算得到结果的时候也会出现NaN。

  • 布尔类型：boolean。只有两个值，一个是true，一个是false

    这个类型，是在编程中专门为了得到判断是否成立的类型

    true 这个结果表示判断成立

    false 这个结果，表示判断不成立

    在学到条件判断后，布尔类型就比较常用。

 

基本数据类型之间的转换：

  1. Number(数据): 可以把字符串类型，布尔类型都转换成数字。

  2. parseInt(数据): 可以把字符串转换为<整数>。转换不了就返回NaN,比如：parseInt('12a')。

  3. parseFloat(数据): 可以把字符串转换为<小数>。转换不了就会返回NaN。

  4. String(数据)： 推荐使用，可以把所有的类型的数据都变成字符串。

  5. 数据.toString(): 转成字符串类型。undefined 和 null 无法转换，调用这个方法会报错。

  6. Boolean(): 可以把数据转换成布尔类型的数据，结果只有 true，false。

    转换成true又无数种情况，转成false只有以下6种
    1.   ''             真空字符串，引号里面不能有空格
    2.   0              数字0
    3.   NaN            不是一个数字
    4.   undefined      未定义
    5.   null           空值
    6.   false          false 自己

     

 

引用数据类型：

其具体内容都是存放在堆中的，而栈中存放的是其具体内容所在内存的地址 。

 

  • 对象：object

    var obj = {
        data1: 'str',
        data2: 123,
        data3: false,
        data4: [1, 2, 3]
    }

  • 数组： array

    var arr = [1, 'str', [1,2,3], false, null]
    // 通过 数组名[索引] 的方式访问数组元素。索引号从0开始，比如：arr[0]获取的是 1

  • 函数： function

    function fn() {...} || var fn = function() {...}

  1. 以上三种引用数据类型都继承自对象类型（Object）。

  2. null: 是一种特殊的对象类型，表示空指针。

 

 

特殊的数据类型：

undefined: 它的值就是undefined。一个变量被声明之后没有赋值就会是这个值。

 

总结：因为js是弱类型语言，因此在声明变量的时候不用说明变量类型，能根据赋值类型判断变量类型。同时这一特点也导致js支持类型的隐式转换。

 

 

判断变量的数据类型

  1. typeof(变量名)

    变量类型返回值(字符串类型)
    数字 number
    字符串 string
    布尔 boolean
    undefined undefined
    NaN number
    字面量对象 object
    数组 object
    函数 function
    null object

  2. 变量名 instanceof 引用数据类型：判断一个引用类型变脸是否是某个引用类型的实例

    变量类型所属实例
    数组 Array、Object
    字面量对象 Object
    函数 Function 、Object

instanceof常用于一个变量是否为数组类型。

 

 

常用操作符

  1. 算数运算符：

    • 二元: + - * / %(取余)

    • 一元: ++ --

  2. 赋值运算符： = += -= *= /= %=

  3. 关系运算符：

    > < >= <= 
    == 近似等于，会发生隐式转换。比如 true == 1  返回的是true
    === 判断两个数据是否完全对等
    !== 判断两个数据是否不是完全对等
    != 近似不等于， 会发生隐式转换。比如 true != 1 返回的是false

     

  4. 逻辑运算符：两个boolean类型的操作数或者表达式进行比较

    &&-与 ||-或 !-非

  5. 三元运算符： 布尔表达式 ? 结果1 : 结果2

posted on 2022-08-08 18:10  妖娆的油条2号  阅读(25)  评论(0)  编辑  收藏  举报

导航