JS基础-day01

一条咸鱼TT

已于 2023-07-01 08:53:04 修改

阅读量98

点赞数 1

分类专栏： # js小计文章标签： javascript 开发语言 ecmascript

于 2023-05-25 17:24:09 首次发布

本文链接：https://blog.csdn.net/qq_44433427/article/details/130811567

版权

js小计专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、JS的基础

1.javascript是什么？

1.javascript简称js
2.与html、css并称为网页三剑客
    - 静态页面（网页合成工程师）
        - html    结构
        - css     样式
    - 动态页面(前端工程师 web前端) 
        - javascript   行为（交互）

2.javascript诞生

1、web的发展阶段：
    1. web1.0  可读
    2. web2.0
    3. web3.0
    - 网景(netscape)有一款浏览器叫做navigator(领航者)想要网页有一些可交互的效果
    - 请了javacript祖师爷`布兰登.艾奇`10天发明了livescript
    - 借助java热度去推广livescript  更名为javascript
    - 微软公司推出IE 自己参考javascript功能推出了JScript
    - 网景把javascript托管给了ECMA(欧洲计算机制造商协会) 由ECMA制定了一个标准 这个标准有一个名称叫做`ECMAScript` 简称es
    - ECMAscript是将javascript和jscript标准语法统一之后的一个产物
    - es5.0版本(现在已有es6.0)
2、javascript的构成部分
    - ECMAscript标准语法
    - DOM
    - BOM
     思考一下java和javascript什么关系？

3.javascript的三种写法

与css的书写方式相同

行内式：
<div class="box"  onclick="javascript: alert('hangnei')">
        这是行内样式的js
</div>
内部：
    <script>
        var name = '111';
        alert(name)
    </script>
外部：
<script src="./name.js"></script>

4. 注释

// 这是单行注释
/* 
    这是多行注释
    vscode中快捷键为：alt+shift+a
*/
- 为什么写注释？
    1. 方便代码的阅读
    2. 方便代码的维护

5.变量

/* 
    变量的概念：顾名思义，变量的值可以改变。在计算机内存中开辟一份空间并且命名，这个空间可以存储数据。我们可以根据变量的名称来寻找到存储的数据
*/
        // 定义(声明)变量
        var name
        // 定义(声明)多个变量
        var name , age , sex 
        // 定义(声明)变量并且赋值
        var name = 'jack'
        // 定义(声明)多个变量并且赋值
        var name='tom' , age=18 , sex = 'man'

注意事项
1. 只定义（声明）变量不给这个变量赋值使用这个变量不会报错值是undefined
2. 直接使用一个未定义的变量这时候会报错报错信息变量名 is not defined
3. 变量名命名规则和规范
规则:必须要遵循因为这个是由ecmascript定义的不遵循就会报错。

变量名必须是英文a-z A-Z、数字0-9、下划线_、美刀$组成，不能以数字开头（组成部分）
严格区分大小写（大小写）
不能是关键字和保留字（保留字和关键字）
- 关键字： js正在使用的单词 var
- 保留字: js未来可能会使用到的
不能是中文中间不能有空格

6.数据类型

类型	值
基础类型	String、Number、Boolean、undefined、null
复杂类型	Object、Array、Data 等

字符串类型(string): 用 '' 、 "" 包裹的内容都位字符串类型。
数值类型(Number）: 纯数字、 负数 、浮点数均为数值类型，特别注意NaN也是数值类型
布尔类型(Boolean):只有两种值、true 、 false
undefined类型：只有一种值、undefined， 若变量只进行了声明，会默认为该类型
null:只有一种值、null

tips: 数值分为二进制、八进制、十进制、十六进制数等，这里不进行详细赘述。

7.js中简单的几个方法

    // 1.console.log(数据)  在控制台里面打印一行日志 用于调试
		
		console.log('我是输出在控制台的测试语句！')
    /* 
   	 	2.typeof: 用于检测当前数据是什么类型， 返回值为数据类型
	       typeof 数据
	       typeof(数据)
    */
		var data0 = 'a'
        var data1 = 18
        var data2 = 'aiuhsuaguig'
        var data3 = undefined
        var data4
        var data5 = null
        console.log('data0: ',typeof(data0) ,' data1:',typeof(data1))
        console.log('data2: ',typeof(data2) ,' data3:',typeof(data3))
        console.log('data4: ',typeof(data4) ,' data5:',typeof(data5))
	
 	 //3.prompt方法：弹出一个输入框用于接收键盘输入的数据，默认为字符串类型
 	 //4.alert方法：弹出一个信息框
 	  var num = parseInt(prompt('请输入一个数字：'))
      console.log(num)
      alert(num)

8.数据类型转换

概念：把一种数据类型转换成另一种类型

类型	说明
自动类型转换(隐式类型转）	js自动进行类型转换
强制类型转换（手动转换）	使用js方法将数据类型进行转换

以下为强制类型转换：

	// 其他类型转数值类型
	/*
   Number方法 Number(数据) 
         - 将传入的内容整体转换
   parseInt方法 parseInt(数据) 
         - 从第一个字符开始检测，是(数字、负号)保留，遇到非数字停止返回保留内容
   parseFloat方法 parseFloat(数据)
        - 从第一个字符开始检测，是(数字、负号、小数点)保留，遇到非数字停止返回保留内容

	*/
        var data01 = true
        var data02 = false
        console.log(Number(data01)) // 1
        console.log(Number(data02)) // 0

        var data03 = 'true'
        var data04 = 'false'
        console.log(Number(data03)) // NaN
        console.log(Number(data04)) // NaN
        var data05 = '10.11'
        var data06 = '-1.00'
        console.log(Number(data05)) //10.11
        console.log(parseFloat(data05))//10.11
        console.log(Number(data06)) //-1
        var data07 = 'hello12ll'
        console.log(Number(data07)) //NaN
        console.log(parseInt(data02))//NaN

        var data08 = undefined
        console.log(Number(data08)) // NaN
        var data10 = null
        console.log(Number(data10)) // 0
        var data11 = '121hello'
        console.log(parseInt(data11)) // 121

总结
- 其他类型转数值(重点掌握)
  - 布尔值、undefined、null转数值：用Number方法
  - 字符串转数值有以下情况：
    - 纯数字：用Number方法
    - 非纯数字字符串截取前面的数字部分
      - 保留小数：用parseFloat
      - 不保留小数：用 parseInt
- 其他类型转字符串
  - String()方法: String(数据)
    - 任何类型均可以转换
  - toString()方法
    - undefined / null 无法使用toString()方法。
    - 可以将数值转换为其他进制数的字符串数值.toString(进制数[2/8/16])。
- 其他类型转布尔
  - Boolean()方法 Boolean(数据)
    - 只有 ‘’、0、null、undefined、NaN，这些是 false，其余都是 true
- 其他类型转undefined，其他类型转null
  - 直接赋值

9. NaN扩展

- 代表数值类型的非数字
- 含义： not a number 不是一个数字
- NaN是数值类型 用于表示这个数据不是一个数字
- 产生
    + 类型转换的过程中 有些数据可以转换成数字的方式显示  有一些数据无法以数字来显示的 用NaN来表示
- 注意事项
    1. NaN和任何数做任何比较结果都是false
    2. NaN和任何数做任何运算结果都是NaN