javascript-基础知识点总结

最新推荐文章于 2024-04-26 16:47:03 发布

纪水一

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.8k

点赞数 2

分类专栏：网页文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_49349476/article/details/130732599

版权

网页专栏收录该内容

6 篇文章 1 订阅

订阅专栏

（一）基础语法

1、javaScript引入方式

JavaScript的3种引入方式：

外部JavaScript
内部JavaScript
元素事件JavaScript

外部JavaScript：指的是把HTML代码和JavaScript代码单独放在不同的文件中，然后在HTML文档中使用“script标签”来引入JavaScript代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1.在head中引入-->
    <script src=”index.js”></script>
</head>
<body>
    <!--2.在body中引入-->
    <script src="index.js"></script>
</body>
</html>

内部JavaScript：指的是把HTML代码和JavaScript代码放在同一个文件中。其中，JavaScript代码写在<script></script>标签对内

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <!--1.在head中引入-->
    <script>
          ……
    </script>
</head>
<body>
    <!--2.在body中引入-->
    <script>
          ……
    </script>
</body>
</html>

元素事件JavaScript：指的是在元素的“事件属性”中直接编写JavaScript或调用函数

2、变量与常量

变量：

在JavaScript中，如果想要使用一个变量，我们一般需要两步：

第1步：变量的声明
第2步：变量的赋值

变量命名，我们需要遵循以下2个方面的原则:

变量由字母、下划线、$或数字组成，并且第一个字母必须是字母、下划线或$
变量不能是系统关键字和保留字

var 变量名=值；

常量：定下来的，不能随便改变的数

var DEBUG = 1

3、数据类型

js有5大数据类型：

关键字	说明
number	数值型：包括整数和浮点数
boolean	布尔类型：true / false
string	字符串：包含字符和字符串。可以使用双引号或单引号
object	对象类型：JS内置对象或自定义对象
undefined	未初始化，未知类型

js是弱类型语言，定义一个变量可以赋值为不同的数据类型

java与js数据类型对比
数据类型	Java中定义变量	JS中定义变量
整数	int i = 5;	var i = 5;
浮点数	float f = 3.14; 或 double d=3.14;	var f = 3.14; 或 var d=3.14;
布尔	boolean b = true;	var b = true;
字符	char c = ‘a’;	var c = ‘a’;
字符串	String str = “abc”;	var str = “abc”;

typeof操作符

typeof用于判断某个变量数据类型，返回这种数据类型的名字

写法一：
typeof 变量名 
写法二
typeof(变量名)

4、运算符

5、输出函数

document.write("输出内容")

6、类型转化

在JavaScript中，共有两种类型转换。隐式类型转换。显式类型转换。在JavaScript中，共有两种类型转换

隐式类型转换：自动进行的类型转换
显式类型转换：需要手动用代码强制进行的类型转换

7、转移字符

8、注释

语言	注释语法
HTML	<!-- 注释 -->
CSS	/* 注释 */
JavaScript	// 单行注释 /* 多行注释 */

（二）流程控制

1、选择结构

if语句

1、单向选择
if（条件）
{
     ……
}
2、双向选择：
if（条件）
{
     ……
}
else
{
     ……
}

3、多向选择
if（条件1）
{
     //当条件1为true时执行的代码
}
else if（条件2）
{
     //当条件2为true时执行的代码
}
else
{
     //当条件1和条件2都为false时执行的代码
}

switch

switch（判断值）
{
    case 取值1:
         语块1;break;
    case 取值2:
         语块2;break;
  ……
  case 取值n:
        语块n;break;
  default:
        语句块n+1;
}

2、循环结构

while

while（条件）
{
    //当条件为true时，循环执行
}

do...while

do
{
     ……
}while（条件）;

for

for（初始化表达式；条件表达式；循环后操作）
{
     ……
}

（三）函数

1、函数的定义

function 函数名（参数1 ,参数2 ,...,参数n）
{
     ……
}

2、函数的调用

JavaScript的函数调用方式有很多，常见的有以下4种

直接调用
在表达式中调用
在超链接中调用
在事件中调用

直接调用

函数名（实参1，实参2,...，实参n）;

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         //定义函数
         function getMes（　）
         {
             document.write（"愿你眼里长着太阳，笑容全是坦荡。"）;
         }
         //调用函数
         getMes（　）;
    </script>
</head>
<body>
</body>
</html>

在表达式中调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         //定义函数
         function addSum（a,b）
         {
             var sum=a+b;
             return sum;
         }
         //调用函数
         var n=addSum（1,2）+100;
         document.write（n）;
    </script>
</head>
<body>
</body>
</html>

在超链接中调用

<a href="javascript：函数名"></a>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         function expressMes（　）
         {
             alert（"我在学习js"）;
         }
    </script>
</head>
<body>
    <a href="javascript:expressMes（　）">点击学习</a>
</body>
</html>

在事件中调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         function alertMes（　）
         {
             alert（"我在学习js"）;
         }
    </script>
</head>
<body>
    <input type="button" onclick="alertMes（　）" value="提交" />
</body>
</html>

（四）字符串操作

获取字符串长度：字符串名.length
大写转换小写：字符串名.toLowerCase()
小写转换大写：字符串名.toUpperCase()
获取某一个字符：字符串名.charAt（n）
截取字符串：字符串名.substring（start,end）
替换字符串：字符串名.replace（原字符串，替换字符串）
分割字符串：字符串名.split（"分割符"）
检索字符串首次的位置：字符串名.indexOf（指定字符串）
检索字符串最后一次出现的位置：字符串名.lastIndexOf（指定字符串）

（五）数组操作

1、数组的创建

var 数组名=new Array（元素1,元素2,……,元素n）;　　//完整形式
var 数组名=[元素1,元素2,……,元素n];　　　　　　　//简写形式

2、数组的获取：数组名[索引值]

3、数组的赋值：数组名[索引值]=值

4、获取数组长度：数组名.length

5、截取数组某部分：数组名.slice（start,end）

6、添加数组元素：

赋值方式

在数组开头添加元素：unshift（）

数组名.unshift（新元素1，新元素2,……，新元素n）

在数组结尾添加元素：push（）

数组名.push（新元素1，新元素2,……，新元素n）

7、删除数组元素

后面元素依次覆盖
删除数组中第一个元素：shift（）
删除数组最后一个元素：pop（）

8、比较数组大小

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
         //定义一个升序函数
         function up（a,b）
         {
             return a-b;
         }
         //定义一个降序函数
         function down（a,b）
         {
             return b-a;
         }
         //定义数组
         var arr=[3,9,1,12,50,21];
         arr.sort（up）;
         document.write（"升序："+arr.join（"、"）+"<br/>"）;
         arr.sort（down）;
         document.write（"降序："+arr.join（"、"））;
    </script>
</head>
<body>
</body>
</html>

（六）时间对象:Date

1、实例化对象

var日期对象名=new Date（）;

2、操作年、月、日

获取年、月、日：

设置年、月、日：

设置年月日：时间对象.setFullYear（year,month,day）;
设置月日：时间对象.setMonth（month,day）;
设置日：时间对象.setDate（day）;

3、操作时、分、秒

获取时、分、秒

设置时、分、秒

设置时、分、秒、毫秒：时间对象.setHours（hour,min,sec,millisec）;
设置分、秒、毫秒：时间对象.setMinutes（min,sec,millisec）;
设置秒、毫秒：时间对象.setSeconds（sec,millisec）;

4、获取星期

时间对象.getDay();

（七）数学对象

1、Math对象的属性:

2、Math对象的方法

random（）方法来生成0～1的一个随机数。random，就是“随机”的意思。需要注意的是，这里的0～1包含0但不包含1，也就是[0, 1）

随机生成某个范围内的“任意数”：

（1）Math.random（）*m表示生成0～m的随机数，如“Math.random（）*10”表示生成0～10的随机数。
（2）Math.random（）*m+n表示生成n～m+n的随机数，如“Math.random（）*10+8”表示生成8～18的随机数。
（3）Math.random（）*m-n表示生成-n～m-n的随机数，如“Math.random（）*10-8”表示生成-8～2的随机数。
（4）Math.random（）*m-m表示生成-m～0的随机数，如“Math.random（）*10-10”表示生成-10～0的随机数。

随机生成某个范围内的“整数”：