js---▁

原创已于 2024-09-07 15:15:04 修改 · 1.8k 阅读

53 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2024-09-02 19:36:15 首次发布

1.概念：

JavaScript是用于实现用户交互、动态控制文档的外观和内容,动态控制浏览器操作、创建cookies等网页行为的跨平台、跨浏览器的由浏览器解释执行的客户端脚本语言动态交互，数据请求

2.特点：

是基于对象的弱类型语言
跨平台 Linux，windows，mac只要有浏览器，就能够运行
事件驱动鼠标点击，鼠标悬浮，鼠标移动，键盘按下，键盘弹起，获取焦点，失去焦点，加载等常用的事件

3.js作用

表单客户端验证；
动态HTML(DHTML)：不需要人为介入，就能自动实现动画效果。
用户交互的动画效果：需要鼠标和键盘介入的动画效果
动态添加一些网页内容
动态的获取和改变html元素的属性或css属性，从而动态的创建网页内容或改变内容的显示

4.js的组成

ECMAScript 是Javascript的核心基础，JavaScript 的正式名称是 "ECMAScript"。这个标准由 ECMA 组织发展和维护 ECMA-262 是正式的 JavaScript 标准,提供语法、数据类型、语句、关键保留字、流程控制、内置对象、运算符等规范，定义了脚本语言的所有属性、方法和对象
DOM(Document Object Model) 文档对象模型动态管理HTML、XHTML、XML元素
BOM(Browser Object Model) 浏览器对象模型动态操作浏览器窗口和框架

5.js的引入方式

1.head标签中，不推荐，需要添加window.onload

 <script src="./js/1-.js"></script>

2.在body结束标签的后面好处：先加载html css 再加载js

  <script>
        document.write('world');
    </script>

3.放在任意一个标签中，需要使用事件

  <div class="box" onclick="alert('hhh')">bd</div>

4.可以添加到a标签中

  <a href="javascript:alert('aaaa')">baidu</a>

6.js的常用输出语句

alert（"这是我的输出页面"）；弹窗输出

 <script>
        alert('弹窗输出');
 </script>

document.write（“这是我输出的内容”）；在页面输出，可以输出标签

  <script>
        document.write('页面中输出');
        document.write('<h1>hahaha</h1>');
 </script>

console.log（）在控制台中打印，打印任意字符或者js的变量信息；可以接受任何字符串、变量、数字、对象；

 <script>
        console.log('控制台输出')；
 </script>

7.js注释

//…… 单行注释
/* */ 多行注释

8.标识符

标识符的组成：标识符可以由字母、数字、下划线（_）和美元符号（$）组成。这意味着标识符可以包含英文字母、数字、下划线和美元符号。
不能以数字开头：标识符的第一个字符必须是字母、下划线或美元符号，不能以数字开头。
大小写敏感：JavaScript是大小写敏感的，因此“MyVariable”和“myvariable”被视为两个不同的标识符。
保留字和关键字：标识符不能使用JavaScript的保留字（关键字），如if、for、while，true、false和null等。这些词被JavaScript语言内部使用，具有特定的用途，用户不能自定义同名的标识符。
描述性和驼峰命名法：标识符应具有描述性，能够清晰地表达其含义和用途（有意义）。命名通常采用驼峰命名法，即第一个单词小写，后续单词首字母大写，例如myVariable、calculateSum等。
常量命名：常量通常使用全大写字母，并用下划线分隔单词，例如MAX_VALUE、PI。

9.拓展：

onmouseover 鼠标悬浮事件
onmouseout 鼠标离开事件
onclick 点击事件
查找选择器

document.querySelector('.box');

10.变量

1.可以变化的量

变量是用于存储信息的容器【内存空间】
变量是一段命名的存储空间
变量是在程序运行过程中值允许改变变量的值
变量是由变量名，变量值，和变量类型组成

只要声明了一个变量，就会开辟一个内存空间（容器）无具体大小

2.变量命名规则

第一个字符必须为字母，_或$，其后的字符还可以是数字严格区分大小写，
要有一定的含义
建议使用小驼峰规则来命名变量。redApple 不能使用关键词，保留字作为变量名

3.变量的声明与赋值

var 变量名

变量名=值

var 变量名=值
变量名=值
var 变量1=值1，变量2=值2，变量3=值3

注：

变量名是浏览器关闭后才释放在，在没关闭之前随时使用
重新声明的变量，不会丢失原始值，除非重新赋值
换行是语句的结束，最好结束时都加上 “ ； ”
变量名是区分大小写的

11.变量的数据类型

分为 { 基础数据类型：string number boolean null undefined

{ 引入数据类型：数组array 对象

1>string字符串

字符串用单引号或双引号包括起来
单双引号均不能解析变量
变量与字符串，变量与变量之间可以使用运算符‘+’来拼接

当+号的左右两边任意一值为字符串时，则此的+为拼接

4.单引号和双引号可以互相嵌套，如果单引号中要嵌套单引号，需要使用转义字符

转义字符：

2>number 数字{ 数字{ 整形

{ 浮点型不是一个准确的数值，近似值{ 单精度浮点小数点后保留7位

{ 双精度浮点小数点后保留15位

{ NaN

进制：不管输入的是几进制，最终显示时都会转为10进制

0开头（八进制）

0b开头（二进制）

0x开头（十六进制）

科学计数法：tofixed（1）括号里写小数点后保留的位数（自动四舍五入）

 console.log((0.1 + 0.2) ,toFixed(1));

3>boolean 布尔值

值只有true和false。分别代表逻辑真与假
布尔值通常用来表示比较所得的结果
true和false是严格区分大小写的

var n=10;
if(n>8){
    alert('我是true');
}else{
    alert('我是false');
}

4>undefined 未定义

定义了一个变量但没有为该变量赋值，使用了一个并未赋值的变量

var n;
alert(n);

2.使用了一个不存在的对象的属性时5.5

var people=new Object; // 创建一个object对象
people.height =162;  // 添加属性height
alert(people.height);  // 输出属性height
people.show=function(){  // 添加方法show
  alert(this.color);   // 调用属性color
  alert(this.height);  // 调用属性 height
  }
people.show()  // 调用方法show

5>null 空值

null表示一个空值
null不等于空字符串""、''或0（空字符串或空数字）

null和undefined的区别是，null表示一个变量被赋予了一个空值，而undefined则表示该变量尚未被赋值

6>array数组

1.书写方式：里面可以放多个值

1.var 数组名=new Array();

数组名【0】= ‘jack’

数组名【1】= ‘marry’

...

2. var cars=new Array("Audi","BMW","BYD");

3.var cars=["Audi","BMW","BYD"];

2.多维数组

var arr = [
  ['北京','上海','深圳'],
  ['合肥','石家庄','昆明'],
  ['','','']
];
console.log（arr[0]）;
console.log（arr[1]）;
console.log（arr[2]）;
console.log（arr[3]）;

 var arr = ['张三',185,['打球','打游戏',['篮球','羽毛球','乒乓球'],['lol','黑悟空']]];
 // 若想找到篮球：  console.log（arr[2][2][0]）

注：如何查看判断数据类型

可以通过typeof来判断数据类型

12.数据类型的转换

{ 自动转换

{ 强制转换

1>转为字符串

自动转换：

number类型----->字符串：直接加‘’引号

boolean类型----->字符串：直接加‘’引号

undefined类型----->字符串：直接加‘’引号

null类型----->字符串：直接加‘’引号

强制转换

string() 或 object.tostring（）

2>转为数字类型

自动转换：

string类型----->数字：若是纯数字类型字符串，去掉‘’引号即可，若为其他则转为NaN

null类型----->数字：null自动转换为0

boolean类型----->数字：true转换为1，false转换为0

undefined类型----->数字：转换为NaN

object类型----->数字：转换为NaN

array类型----->数字：若是空，则转换为0，有值，则转换为值。其他为NaN

强制转换

{ number（）

{ parseint （string） //整形

{ parsefloat （string）//浮点型

3>转为布尔类型

自动转换：

“ ” ‘ ’（空的字符串）类型----->布尔类型：false
0或0.0类型----->布尔类型：false
null类型----->布尔类型：false
undefined类型----->字符串：false
NaN类型----->字符串：false

其他的----->字符串：true

强制转换

! 表示取反

！！表示强制将任意类型转为布尔类型

特殊转换规则：

null == undefined true，但是换成 === 结果是false（因为类型不一致），剩下null/undefined和其他任何数据类型值都不相等
字符串 == 对象，要把对象转为字符串
剩下如果 == 两边数据类型不一致，都是需要转换为数字再进行比较
如果类型都是字符串，就会按照ASCII编码的进行对比
[] == [] // false
{} == {} // false

13.运算符

1>算术运算符

+ （算数加和字符串拼接）、
-
*
/
%（取余）

2>比较运算符返回值是布尔类型

== 判断（值相同,数据类型不同）
！= 不等于
=== 绝对相等（值相等，数据类型相等）
！== 不全等于（其中之一）

3>赋值运算符

= 赋值等号右边赋值给等号左边
+= eg：i+=1 ---> i=i+1

4>逻辑运算符返回值不是布尔类型

！逻辑取反
&& 逻辑且等式两边都为true，返回true，只要有一边为false，则会返回false
|| 逻辑或，等式两边只要有一边为true，则会返回true

&&返回值：返回假的一边

如果两边为真，返回&&后面的内容
如果前真后假，返回&&后面的内容
如果前假后真，返回&&前面的内容

|| 返回值：返回真的一边

如果前面为真，返回||前面的内容
如果前面为假，返回||后面的内容
如果前假后假，返回||后面的内容

断点问题：&& 前为假，后面的将不再运算

|| 前面为真，后面的将不再运算

5>条件运算符

条件表达式?结果1:结果2

如果条件表达式结果为true则返回结果1 如果条件表达式结果为false则返回结果2

var m=100>99?66:33
alert(m)

14.运算符的优先级

小括号>算术运算符>比较运算符>逻辑运算符>赋值运算符

一元（++ -- ）> 二元（* / + - %）> 三元（> < >= <=） > == !== === != >逻辑运算符（！ && ||）> 赋值运算符

15.json数据类型（对象）

SON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式主要作用： JSON 是用于存储和传输数据的格式。 JSON 通常用于服务端向网页传递数据。特性： json的键不能重复，如果键是一个完整的单词，可以直接写，如果键里面包含了空格，要用引号引起来格式：

{key: value, key: value}

数据为键/值对。多个数据由逗号分隔 value可以为任意类型

16.流程控制

在任何一门程序设计语言中，都需要支持满足程序结构化所需要的三种流程控制:

顺序控制：在程序流程控制中，最基本的就是顺序控制。程序会按照自上而下的顺序执行。
分支控制（条件控制）{ if语句

{ switch语句

循环控制{ while

{ do-while

{ for *

1>if语句

分类：单分支，双分支，多分支，分支嵌套

单分支的if语句中，业务逻辑只有一行时，代码可省略掉括号

// 单分支
if (条件表达式){
   代码段        //业务逻辑
}
// 双分支
if (条件表达式) {
    代码段1 
}else {
   代码段2
}
// 多分支
if (条件表达式1){
    代码段1
} else if (条件表达式2){
   代码段2
} else if (条件表达式3){
   代码段3
}else{
    代码段4
}

2>switch语句

switch (变量){
  case 值1:
  代码段;
       break;
  case 值2:
  代码段;
       break;
  ...
  default:        //以上情况都不符合，则来到default
  代码段;
}

案例：

var d = new Date();
console.log(d); // 获取日期时间对象
var week = d.getDay(); // 获取星期几
switch (week) {
  case 0:
    console.log('星期天');
    break;
  case 1:
    console.log('星期一');
    break;
  case 2:
    console.log('星期二');
    break;
  case 3:
    console.log('星期三');
    break;
  case 4:
    console.log('星期四');
    break;
  case 5:
    console.log('星期五');
    break;
  case 6:
    console.log('星期六');
    break;
}

什么时候用if，什么时候用switch

if：条件是一个范围或者是具体的值

switch：条件是一个具体的值

3>while循环

While 循环会在指定条件为真时循环执行代码块。 While循环，先进行条件判断，再执行循环体的代码

while (条件表达式){
  循环体
}

当前循环中，如果不满足条件，一次都不会执行

var i= 1;
while(i<=10){
  console.log(i);
  i++;
}

4>do-while 循环

do/while 循环是 while 循环的变体。该循环会执行一次代码块，在检查条件是否为真之前，然后如果条件为真的话，就会重复这个循环。 do while循环，先执行循环体代码，再进行条件判断。至少执行一次循环体的代码。

do {
    代码段
} while (条件表达式)

注意：当前循环中，代码至少执行一次

var i=1;
    do{
        i++; // 2
        console.log(i);
    }while(i<=10)

5>for循环

for (循环变量初始化表达式; 循环条件表达式; 更新循环变量表达式) {
    循环体
}

注意：

循环变量可以定义在for 循环结构体外
没有更新循环变量会变成死循环
循环条件中的‘；’不能省略

6>for in 循环

for (变量 in 对象) {
   代码段
}

eg：

for(var k in person){
        console.log(person[k]);//k是一个变量，需要用[]包裹
        
    }

json对象中不能使用for循环，应该使用for-in循环

for-in循环专门用来循环对象和数组

while循环与do-while循环与for循环的区别：

while循环：只有满足条件才会执行不固定循环次数（条件）

do-while：不管是否满足条件，一定会执行一次

for：循环固定的次数

17.跳转语句

continue ：退出当前这一次循环，继续下一次循环

continue语句只能应用在循环中（while、do......while、for）语句中用于中止本次循环，根据控制表达式还允许继续进行下一次循环。

var iNum = 0; 
for (var i=1; i<10; i++) {
  if (i % 5 == 0) {
    document.write(i);

    continue;
  }
  iNum++;
}
alert(iNum);

break ：退出整个循环

break语句只能应用在循环（while、do......while、for）或switch语句中 break语句用于退出循环，阻止再次反复执行任何代码或者退出一个switch语句

for (var i=1; i<10; i++) {
  if (i % 5 == 0) {
    break;
  }
  iNum++;
}
alert(iNum);