js基础笔记（个人用）

最新推荐文章于 2024-04-15 10:06:29 发布

sha虫剂

最新推荐文章于 2024-04-15 10:06:29 发布

阅读量167

点赞数

分类专栏：前端文章标签： javascript html5

本文链接：https://blog.csdn.net/a1015895218/article/details/115355675

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript的基础知识，包括它的概念、历史、特点和用途。JavaScript是一门面向对象、跨平台的脚本语言，常用于网页行为控制。文中讲解了变量、数据类型、运算符，以及变量类型转换。例如，`typeof`用于检测数据类型，`parseInt`和`parseFloat`用于类型转换。此外，还讨论了JavaScript在HTML5中的作用，以及与H5标签的交互。

摘要由CSDN通过智能技术生成

JS基础

console.log 控制台输出

prompt 弹出一个输入框

alert 警告弹框

一、概念

1、JavaScript是一门面向对象的，跨平台的脚本语言

对象：属性和方法

跨平台：可以在多平台使用

脚本：凡是不能独立执行需要依赖其他程序的，通常都叫做脚本，也叫动态语言。（宿主语言）

2、JS历史

1995 它最初由Netscape（网景公司）的[Brendan Eich](https://baike.baidu.com/item/Brendan Eich)设计为Netscape Navigator 2.0开发LiveScript

就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript

因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript

ECMA包括核心语法以及BOM和DOM

3、JS特点

解释型脚本语言

运行在浏览器

弱类型语言（松散型）

事件驱动（动态）

跨平台

4、JS用途

嵌入动态文本于HTML页面

对浏览器事件作出响应

读写HTML元素

在数据被提交到服务器之前验证数据

检测访客的浏览信息（可以使用JS代码判断浏览器类型）

控制cookies，包括创建和修改等

基于node.js技术进行服务器端编程

视觉交互、数据交互、node.js（后台） ### 5、JS和H5的关系

页面三要素

结构：HTML

表象：css

行为：JS

H5是一种新的技术，就目前而言，我们所知的H5都是一些标签，但是有了JS之后，这些标签深层的扩展功能才得以实现。

比如video标签；我们对其理解为一个简单的标签；但是实际上，video标签还有更深层次的扩展功能；

6.JS书写位置

内部js：

<script>  document.write("hello world")  </script>

外部js： index.js文件 document.write(“hello world”);

内部引入：

<script src="path:to/index.js"></script>

7.向页面输出内容

 document.write("hello world");

document.write("<strong>我很man</strong>");

转义字符:

  &lt; || &gt;

   document.write("&lt;strong&gt;我很man&lt;/strong&gt;");

8.变量

var a = "hello world"；

var	声明变量的关键字
a	变量名
=	赋值
“hello world”	变量的值

var a = “hello world”; 这句话分成两个部分

左值：在等号左侧，是声明一个变量并且起名

右值：在等号右侧，是存放进变量中的东西（给变量赋值）

变量的类型

（因为存放进变量中的数据是放在内存中的，计算机只识别0，1，所以需要对不同类型的数据进行编码，编码的结果会导致所需空间不同，所以JavaScript中分成很多种数据类型，以便计算机储存时使用）

数字类型(number)：1234567890 int（integer）：整型 float：浮点型（小数）

字符类型(string)：‘123456’,“字符串类型”,…（有单引号或者双引号）

未定义类型(undefined)：这是一种特殊类型，当变量被声明但是没有被赋值的时候，那么该变量的类型为undefined；

布尔值类型（boolean）：true，false；

对象类型：object；

函数类型：Function；

symbol

一个关键字 typeof

typeof返回有六种值： number、string、boolean、undefined、object（数组也是对象）、function

js有五种基本数据类型：number、string、boolean、undefined、null、symbol

两种引用类型：object、function

两种特殊数据类型： null、undefined

变量使用小技巧: 声明一串变量:var a=1,b=2,c=3;

js语言里面的分号可以省略，但是不建议省略

变量：可变的量

 var a = "hello world";



   a = "<strong>我很man</strong>";

注意：再次修改变量的值的不是不需要再写 var（相当于你往杯子里重新倒水不需要拿一个新的杯子）

弱类型

声明变量的时候无需声明类型

同一个变量可以修改存储不同类型的数据，例如：

    var a = "hello world";

    a = 123;

类比强类型语言，如：Java

String a = “Hello world”;

a = 123; // 报错！！！

变量命名规范：（匈牙利命名法：驼峰命名法）

小驼峰命名：除了第一个单词以外，其他单词首字母大写

大驼峰：每一个单词首字母都大写

第二个规则：

变量名首字符必须为字母(a-z A-Z)，下划线( _ )，或者美元符号( $ )开始

余下的字符可以是下划线、美元符号或任何字母或数字字符

变量名大小写敏感（var a 和 var A 是不一样的两个变量）

二、运算符

程序：数据结构 + 算法

算数运算符

加、减、乘、除、求余/取模（+ 、- 、* 、/ 、%）

余数： a/b整除之外的剩余的数字

10 / 3 = 3 … 1

10 % 3 = 1

取余：大数对小的那个数取余结果为整除之后的余数

小的那个数对大数求余的结果就是小的那个数本身

+ 除了做数字相加运算以外，还可以做字符串拼接，而且一个数字加上字符串，把数字转换为字符串再去拼接

关系运算符

==（相等）、!=（不等于）、<（小于）、>（大于）、<=（小于或者等于）、>=（大于或者等于）

判断运算符两侧的结果是否满足规则，满足结果即为true，否则false

	5 != 3     true

5 < 3 false

5 <= 5 true

= 和 == 以及 === 的区别

> 一个等号是赋值，将等号右边的值赋给左边

> 两个等号是判断相等，相等结果为true，不等为false，不考虑数据类型，只判断值

> 三个等号要求全等，不仅值要相等，类型也必须相等

逻辑运算符

逻辑与：&&

“和”的意思

我和彭于晏都是帅哥

必须两个条件均为true结果才为true
逻辑或：||

“或”的意思

我或彭于晏是帅哥

只要有一个条件为true结果就为true

必须两个条件均为false结果才为false
逻辑非：!

“不”的意思

我不是帅哥

对本身的结果取反

与逻辑在两个条件均为true时结果才为true，其余情况均为false

或逻辑在两个条件均为false时结果才为false，其余情况均为true

逻辑短路

与逻辑：第一个条件已经是false，不管第二个条件是啥，整个的结果都是false。所以这个时候第二个条件就不会去判断了

表达式如果第一个条件是false，那么就短路，整个表达式的结果就是false，如果第一个条件为true，那么结果就为后半部分的值

表达式如果第一个条件是true，那么就短路，整个表达式的结果就是true，如果第一个条件为false，那么结果就为后半部分的值

三、变量类型转换

你的电脑做着正确的二进制浮点运算，但问题是你输入的是十进制的数，电脑以二进制运算，这两者并不是总是转化那么好的，有时候会得到正确的结果，但有时候就不那么幸运了；
alert(0.7+0.1); //输出0.7999999999999999

类型转换：alert(0.6+0.2); //输出0.8；

隐式转换

var a = 2, b = “2”;
a + b  ===  "22"
a == b  true

显式转换

parseInt()、parseFloat()、Number()、toString()、String()

toFixed()

保留几位小数之后数据类型变为字符串

保留小数，保留之后变为字符串了

parseInt() 方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回 NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时 parseInt() 将把该字符之前的字符串转换成数字。

parseInt(“20b”) == 20

parseInt(“b20”) == NaN

parseInt(“20.99”) == 20

另：Math.round() 方法可以实现四舍五入

Math.round(20.6) == 21

Math.round(“20.6”) == 21

Math.round(“20.6r”) == NaN

parseFloat()跟parseInt()极其相似，不过第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的。parseFloat() 会把这个小数点之前的字符转换成数字。

parseFloat(“11.22.33”) == 11.22