首页 > 基础资料 博客日记

JavaScript 入门(简单易懂) 看这一篇就够了

2024-08-10 10:00:06基础资料围观158次

本篇文章分享JavaScript 入门(简单易懂) 看这一篇就够了，对你有帮助的话记得收藏一下，看Java资料网收获更多编程知识

目录

1、快速入门

1.1、引入JavaScript

1.2、基本语法

1.3、数据类型

1.4、严格检查模式

2、数据类型

2.1、字符串

2.2、数组

2.3、对象

2.4、流程控制

2.5、Map和Set

2.6 iterator

2.7数据类型转换字符串类型

2.8数据类型转换数字型（重点）

2.9标识符、关键字、保留字

1.标识符：就是指开发人员为变量、属性、函数、参数取的名字。

2.关键字：是指JS本身已经使用了的字，不能再用它们充当变量名、方法名

3.保留字

3.运算符

        3.1算数运算符

3.2算数运算符

3.3表达式和返回值

4.递增和递减运算符

4.1递增和递减运算符概念

4.2递增运算符

         4.3前置递增和后置递增小结

4.5.赋值运算符

4.6.运算符优先级

5.1流程控制

1.流程控制

2.顺序流程控制

3.分支流程控制if语句

分支控制

3.2if语句

3.3 if else语句（双分支语句）

3.4 if else if 语句（多分支语句）

4.三元表达式

6.分支流程控制switch语句

5.2switch语句和 if else if 语句的区别

4.2 for循环

2.1语句结构

断点调试：

2.2for循环重复相同代码

2.3for循环重复某些相同操作

课堂案例：求学生成绩

3.1双重for循环概述

7 函数

4.1 定义函数

4.比较运算符

4.1比较运算符概念

4.2=小结

8.逻辑运算符

5.1逻辑运算符概述

5.2逻辑与&&

5.3逻辑非！

5.4逻辑中断（短路操作）

5.4短路运算（逻辑中断）

9.赋值运算符

3.7转换为布尔类型

4.2、变量的作用域

4.3、方法

10.内部对象

5.1 Date

5.2 JSON

1解析型语言和编译语言

5.3 Ajax

11.面向对象编程

1.1 什么是面向对象

1.2创建对象的三种方式：利用字面量创建对象

12.操作BOM对象（重点）

13、操作 Dom对象（重点）

结束语：

1、快速入门

1.1、引入JavaScript

测试

<!--script标签内，写JavaScript代码  弹窗-->
<script>
   alert("hello,world");
</script>
<!--外部引入-->
 <!--注意：script标签必须成对出现-->
<script src="js/qj.js"/>
</script>
<!--不用显示定义type，也默认就是javascript-->
<script type="text/javascript"/>
</script>

1.内部标签

<script>
   //.......
</script>

2.外部引入

abs.js

//、、、

test.html

<script src="abc.js"></script>

1.2、基本语法

<!--JavaScript严格区分大小写-->
<script>
    //1.定义变量  变量类型  变量名=变量值；
var num=1;
var name="qinjiang";
   //alert(num);
   //2.条件控制
    if(2>1){
        alert("true");
    }
</script>
<!--JavaScript严格区分大小写-->
<script>
    //1.定义变量  变量类型  变量名=变量值；
var num=1;
   //alert(num);
   //2.条件控制
    if(score>60&& score<70){
       alert("60-70")
       }else if(score>70&& score<80){
                alert("70-80")
         }else{
             alert("other")
         }
​
//console.log(score)在浏览器的控制台打印变量；System.out.println()；
​
</script>

浏览器必备调试须知：

Elements:元素，爬网占用。

Console: 控制台，测试，调试JavaScript。

Soures:源码调试，断点。

Network:网路

Application:存储一些数据保存到网页里面。 Local Storage：本地存储，应用。

1.3、数据类型

js 中声明变量统一使用var、let、const

js 在声明时没有数据类型。数据类型有具体的值来确定

数值，文本，圆形，音频，视频....

变量

 var 王者荣耀="倔强青铜"
 
 //在浏览器控制台输入的代码
 console.long(王者荣耀) 
var person={
name:"wo"
age=3;
tags:['java','htnl','js','....']  
​
//在浏览器控制台输入的代码
person.name  //查出名字
}

number

js不区分小数和整数，Number

123//整数
123.1//浮点数123.1
1.123e3//科学计数法
-99  //负数
NaN  //not  a  number翻译：不是一个数字
Infinity //表示无限大

typeof可以查看莫格变量的数据类型

alert(bianliang4==bianliang5)

typeof可以查看莫格变量的数据类型

alert(typeof(bianliang1))

var bianliang4;//声明不附值，类型为undefined。他和null做等值比较为true
bianliang5=null;

字符串

'abc' "abc"

布尔值

true、false

逻辑运算符

&& 两个都为真，结果都为真
​
||  一个为真，结果为真
​
| 真即假，假即真

比较运算符! ! ! !重要！

=
==等于(类型一样，值不一样，也会判断true)
===绝对等于(类型一样，值一样，结果为true)

这是一个js的缺陷，坚持不要使用===比较

须知：

NaN===NaN,这个与所有的数值都不相等，包括自己

只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题：

<script>
    console.log((1/3)===(1-2/3))
</script>

尽量避免使用浮点数进行运算，存在精度问题！

<script>
    console.log(1/3-(1-2/3))<0.00000001
</script>

null和 undefined

null 空

undefined未定义

数组：

java的数组必须是相同类型的对象,js中不需要这样！

<script>
    //保证代码的可读性，尽量使用[]
   var arr=[1,2,3,4,5,'hello',null,true]
​
   new Array(1,12,3,4,4,5,'hello')
</script>

取数组下标;如果越界了，就会

1.undefied

alert是一个弹出警告框。他可以展示变量内容，并且暂停程序运行。特别适合调试。

对象

对象是大括号，数组是中括号--

每个属性之间使用逗号隔开，最后一个不需要添加

<script>
   //Person person =new Person(1,2,3,4,5);
   var person={
     name:"qinjing",
     age:3,
     tams:['js','java','wed','...']
   }
</script>

取对象的值

person.name
>"qinjiang"
person.age
>3

1.4、严格检查模式

<!--
    'use strict'这个报错了。前提：IEDA，需要设置支持ES6语法。
    'user strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题
    必须写在javascript的第一行！
    局部变量建议都使用let 取定义
    -->
<script>
    'use strict';
   //全局变量
    let i=1;
//ES6 let
</script>

2、数据类型

2.1、字符串

1、正常字符串我们使用 单引号，或者双引号

2、注意转移字符\

\’ 字符串
\n 换行
\t
\u4e2d  编码 \u### Unicode字符
\x41        Ascll字符
<script>
 ‘user strict’
 consle.log('a\'');
 consle.log('a');
</script>

3、多行字符串编写

<script>
var msg='hello
         world
         你好ya
         你好'
</script>

4、模板字符串

<script>
  ‘user struct’;
  //tab 上面  esc键下面
  let name="qinjiang";
  let age=3;
  let msg=`你好呀，${name}`
</script>

5、字符串长度

console.log(str.length)

6、字符串的可变性，不可变

console.log(student[0])
s
student[0]=1  //赋值为1
console.log(student) //打印
student //输出

7、大小写转换

//注意，这里是方法，不是属性了
console.log(student.toUpperCase())//大写
console.log(student.toLowerCase()) //小写

8、获取下标

console.log(student.indexOf("t")) //t字符串

9、截取 substring

console.log(student.substring(1))//从第一个字符串截取到最后一个字符串
console.log(student.substring(1,3)
           )//截取一三的字

2.2、数组

Array可以包含任意的数据类型 （重点练习）

var arr=[1,2,3,4,5,6]; //通过下标取值和赋值 
arr[0]
arr[0]=1

1、长度

arr.length

注意：加入给arr.length赋值，数组大小就会发生变化~,如果赋值过小，元素就会就会丢失

2、indexOf，通过元素获得下标索引。

arr.indexOf(2)
1

字符串的“1”和数字1是不同的

3.slice () 截取Array 的一部分，返回一个新的数组，类似于String中的substring

4、push（），pop（） 尾部 重点练习

push:添加压入到尾部
pop:弹出尾部的一个元素

5、unshift(),shift()头部 重点练习

push:添加压入到头部
pop:弹出头部的一个元素

6、排序sort()

(3)["B","C","A"]
arr,sort()
(3)["A","B","C"]

7、元素反转 reverse()

(3)["B","C","A"]
arr,reverse()
(3)["A","B","C"]

8、concat() （重点练习）

(3)["C","B","A"]
arr.concat([1,2,3])
(6)["C","B","A",1,2,3]
arr
(3)["C","B","A"]

注意：concat()并没有修改数组，只是会返回一个新的数组

9、连接符join

打印拼接数组，使用特定的字符串连接

(3)["C","B","A"]
arr.join('-')
"C-B-A"

10、多维数组

arr=[[1,2],[3,4],["5","6"]];
arr[1][1]
4

数组：存储数据（如何存，如何取，方法都可以自己实现！）

2.3、对象

若干个键值对

var 对象名={
    属性名： 属性值，
    属性名： 属性值，
    属性名： 属性值
}
​
​
//定义一个person对象，它有四个属性
var person={
    name："wo",
    age:3,
    eail:"132546@qq.con",
    score:0
}

js中的对象，{......}表示一个对象，键值对描述属性xxxx: xxxx, 多个属性之间使用逗号隔开，最后一属性不加逗号。

javascript中的所有的键都是字符串，值是任意对象！

1.对象赋值

person.name="shi" //赋值
"shi" //执行
person.name
"shi" //输出

2.使用一个不存在的对象属性，不会报错！undefined

person.hala
underfined

3.动态的删除属性,通过delete删除对象的属性

delete person.name
ture
person

4.动态的添加，直接给新的属性添加值即可

person.haha="haha"
"haha"
person

5.判断属性值是否在这个对象中！ xxx in xxx!

'age' in person
true
//继承
'toString' in person
true

6.判断一个属性是否是这个对象自身拥有的hasOwnProerty()

person.hasOwnProerty('toString')
false
person.hasOwnProperty('age')
true

2.4、流程控制

if判断

var age=3;
if(age>3){  //第一个判断
   alert("haha");
}else if (age<5){ //第二个判断
   alert("kuwa");
}else{  //否则
   alert("kuwa~");
}
while循环,避免程序死循环

var age=3;
while(age<100){
    age=age+1;
    console.long(age)
}
​
​
//死循环，关闭不了弹窗
while(true){
    alert(123)
}
​


for循环

 var age=3;
   for(let i=0;i<100;i++){
    console.log(i)
   }


forEach循环(重点练习)

var age=[12,3,12,3,12,3,31,23,123]
​
//函数
age.forEach(fumction (value)){
console.log(value)
})


for....in

var age=[12,3,12,3,12,3,31,23,123]
for(var in age){
if(age.hasOwnProperty(num)){
consolse.log("存在");
consolse.log(age[num])
}
}

2.5、Map和Set

Map:

​

//学生的成绩，学生姓名
​
var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom');//通过key获得value
map.set('admin',123456); //新增
comsole.log(name);

Set：无序不重复的集合

set.add(2);  //添加
set.delete(1);  //删除
console.log(set.has(3)); //是否包含某个元素

2.6 iterator

作业:使用iterator来遍历迭代我们Map,Set !

遍历数组

//通过for of/  for in 下标
var arr=[3,4,5];
//arr.name ="2133"; 早期的漏洞
for(var x of arr){
console.log(x)
}

遍历map

var map=new Map([["tom",100],["jack",90],["haha",80]]);
    for(let x of map){
        console.log(x)
    }

遍历set

var set =new Set([5,6,7]);
    for(let x of set){
        console.log(x)
    }

数据类型转换字符串类型

方式说明
toString()转成字符串var num=1;alert(num.toString);
String()强制转换转成字符串var num=1;alert(String(num));
加号拼接字符串和字符串拼接的结果都是字符串var num=1;alert(num+"我是字符串")

toString()和String()使用方法不一样。

三种转换方式，我们更喜欢用第三种拼接字符串转换方式，这一种也称之为隐式准换。

 //1.把数字转换为字符串 变量.toString()
    var num=10;
    var str=num.toString();
    console.log(str);
    console.log(typeof str);
    //2.我么利用 String(变量)  
    console.log(String(num));
    //3.利用+拼接字符串的方法实现转换效果  隐式转换
    console.log(num+'');

数据类型转换数字型（重点）

方式说明案例
parselnt(string)函数(重点)将string类型转换成整数数值型parseln('18')
parseFloat(string)函数（重点）将string类型转成浮点数数值型parseFlat('78.21')
Number()强制转换函数将string类型转换为数值型Number('12')
js隐式转换（- * /）利用算术运算符隐式转换为数值型'12'-0

2.7标识符、关键字、保留字

1.标识符：就是指开发人员为变量、属性、函数、参数取的名字。

标识符不能是关键字或者保留字。

2.关键字：是指JS本身已经使用了的字，不能再用它们充当变量名、方法名

包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typed、var、void、while、with等。

3.保留字

保留字：实际上就是预留的“关键字”，意思是现在居然还不是关键字，但是未来可能会成为关键字，同样不能使用它们当变量名或者方法名。

3.运算符

1.运算符：

运算符（operator）也被称为操作符，是用于实现赋值，比较和执行算数运算等功能的符号。

javascript中常用的运算符有：

算数运算符

递增和递减运算符

比较运算符

逻辑运算符

赋值运算符

3.1算数运算符

概念：算术运算使用的符号，用于执行两个变量或值得算术运算。

运算符描述实例
+加10+20=30
-键10-20=-10
*乘10*20=200
/除10/20=0.5
%取余数（取模）返回除法的余数9%2=1

2.2浮点数的精度问题

浮点数值得最高精度是17位，但是进行算术计算时其精确度远远不如整数。

//浮点数 算数运算里面会有问题
var result=0.1+0.2;//结果不是0.3，而是0.300000000000000000004
console.log(0.07+100); 结果不是7，而是：7.00000000000000001
​
//我们不能直接拿着浮点数来进行比较 是否相等
var num=01+0.2;
console.log(num==0.3);//false

所以：不要直接判断两个浮点数是否相等！

3.2算数运算符

3.3表达式和返回值

表达式：是由数字、运算符、变量等以能得数值的有意义排列方法所得的组合，简单理解：由数字、运算符、变量等组成的式子。

表达式最终都会有一个结果，返回给我们，我们成为返回值。

4.递增和递减运算符

4.1递增和递减运算符概念

如果需要反复给数字变量添加或减去1，可以使用递增（++）和递减（--）运算符完成。

在javaScript中，递减（++）和递减（--）既可以放在变量前面，也可以放在变量的后面，放在变量前面时，我们可以成为前置递增（递减）运算符时，我们可以称为后置递增（递减）运算符。

注意：递增和递减运算符必须和变量配合使用。

4.2递增运算符

1.前置递增运算符

++num前置递增，就是自加1，类似于 num=num+1，但是 ++num写起来简单。

使用口诀：先自加，后返回值。

2.后置递增运算符

num++后置递增，就是自加1，类似于num=num+1,但是num++写起来更简单。

使用口诀：先返回原值。后自加。

4.3前置递增和后置递增小结

前置递增和后置递增运算符可以简化代码的编写，让变量的值+1比以前写法更简单。

单独使用是，运行结果相同

与其他代码联用时，执行结果不同

后置：先原值运算。后自加（先人之已）

前置：先自加，后运算（先已后人）

开发时，大多数使用后置递增/减，并且代码独占一行，例如：num++;或者num--;

1.赋值运算符

概念：用来把数据赋值给变量的运算符。

赋值运算符说明案例
=直接赋值var userName='赋值'；
+=、-=加、减一个数 后在赋值var age=10;age+=5;//15
*=、/=、%=乘、除、取模 后在赋值var age=2;age*=5//10
var age=10;
age+=5; //相当于age=age+5;
age-=5; //相当于age= age-5;
age*=10;//相当于age=age*10;

2.运算符优先级

优先级运算符顺序
1小括号（）
2一元运算符++ -- ！
3算数运算符先*/%后 + -
4关系运算符> >= < <=
5相等运算符== != === !==
6逻辑运算符先&& 后||
7赋值运算符=
8逗号运算符，

一元运算符里面的逻辑非优先级很高

逻辑与逻辑后优先级高

5.1流程控制

1.流程控制

在一个程序执行的过程中，各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行来实现我们要完成的功能。

简单理解：流程控制就是来控制我们的代码按照什么结构顺序来执行。

流程控制主要有三个结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行顺序。

2.顺序流程控制

顺序结构式程序中最简单、最基本的流程控制，它没有特定的语法结构。程序会按照代码的先后顺序，依次执行，程序中大多数的代码都是这样执行的。

3.分支流程控制if语句

分支控制

由上到下执行代码的过程中，根据不同的条件，执行不同的路径代码（执行代码多选一的过程），从而得到不同的结果。

if语句

1.语句结构

//条件成立执行代码，是否什么也不做
if(条件表达式){
         //条件成立执行的代码语句
​
    }
//2.执行思路 如果if 里面的条件表达式结果为真true 则执行大括号里面的 执行语句
     //如果if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码

语句可以理解为一个行为，循环语句和分支语句就是典型的语句。一个程序由很多个语句组成，一般情况下，会分割成一个一个的语句。

 if else语句（双分支语句）

1.语法结构

//条件成立 执行if里面的代码，否则执行else里面的代码
if(条件表达式){
//[如果]条件成立执行的代码
}else{
//[否则]执行的代码
}
​
//if里面的语句1 和else 里面的语句2 最终只能有一个语句执行
//else后面直接跟大括号

 if else if 语句（多分支语句）

1.多分支语句 就是利用多个条件选择不同的语句执行 得到不同的结果 多选1 的过程

2.if else if语句是多分支语句

3.语法规范

//适合于检查多重条件
if(条件表达式1){
//语句1；
}else if(条件表达式2){
//语句2；
}else if(条件表达式3){
//语句3；
}else{
 //最后的语句；
}

4.执行思路

如果条件表达式1 满足就执行 语句1 执行完毕后，退出整个if 分支语句

如果条件表达式1 不满足，则判断条件表达式2 满足的话，执行语句2 以此类推

如果上面的所有的条件表达式都不成立，则执行else 里面的语句

5.注意点

一、多分支语句还是多选1 最后只能有一个语句执行

二、else if 里面的条件理论上是可以任意多个的

三、else if 中间有个空格

4.三元表达式

三元表达式也能做一些简单的条件选择，有三元运算符组成的式子称为三元表达式。

1.有三元运算符组成的式子我们称为三元表达式

2.++num 3+5 ?:

3.语法结构

条件表达式 ？ 表达式1： 表达式2

4.执行思路

如果条件表达式结果为真 则 返回 表达式1 的值 如果条件表达式结果为假 则返回为假 则返回 表达式 2 的值

5.代码体验

var num=10;
var result = num >5 ? '是的'： '不是的'；//我们知道表达式是有返回值的
​
var time =prompt('请您输入一个0~59之间的一个数字');
    //三元表达式  表达式？ 表达式1：表达式2
    var result =  time<10 ? '0'+time : time;//把返回值赋值给一个变量
    alert(result);

6.分支流程控制switch语句

61语法结构

switch语句也是多个分支语句，它用于基本不同的条件来执行不同代码。当时针对变量设置一系列的特定值的选项是，就可以使用switch.

//switch注意事项
var num=3;
switch(num){
case 1:
  console.log(1);
  break;
 case 2 :
    console.log(3);
     break;
}
//1.我们开发里面表达式我们经常写成变量
//2.我们Num的值 和 case 里面的值相匹配的时候是 全等  必须是值和数据类型一致才可以num ===1
//3.break 如果当前的case 里面没有break 则不会退出swith 是继续执行下一个case

switch案例：

var frui=prompt('请输入你需要的水果');
    switch (frui){
        case '苹果':
            alert('苹果的价格是33.5/斤');
            break;
        case '榴莲':
            alert('榴莲的价格是36.5/斤');
            break;
         default:
            alert('没有此水果');   
    }

1.switch语句也是多分支语句 也可以实现多选1

2.语句结构switch转换、开关 case 小例子或者选项的意思

sitch(表达式){
   case value1:
    执行语句1；
    break;
    case value2:
    执行语句2;
    ...
    default:
    执行最后的语句;
}

3.执行思路 利用我们的表达式的值 和 case后面的选项值项匹配 如果匹配上，就执行该case里面的语句 如果都没有匹配上，那么执行default里面的语句。

6.2switch语句和 if else if 语句的区别

1.一般情况下，他们两个语句可以相互替换的。

2.switch..case语句通常处理case为比较确定的情况，而if...else...语句更加灵活，通常用于范围判断（大于、等于某个范围）

3.switch 语句进行条件判断后直接执行到程序的条件语句，效率更高。而f...else语句有几条件，就得判断多少次。

4.当分支比较少时，if..else语句的执行效率比swtich语句高。

5.当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。

6.3 for循环

在程序中，一组被重复执行的语句被称为循环体，能否继续重复执行，取决于循环的终止条件，有循环体及循环的终止条件的组成的语句，被称之为循环语句。

6.4语句结构

for循环只要用于把某些代码循环若干次，通常跟计数有关系。其语法结构如下：

for(初始化变量；条件表达式；操作表达式){
//循环体
}
    //3.初始化变量 就是用var 声明的一个普通变量，通常用于作为计数器使用
    //4.条件表达式 就是用来决定每一次是否继续执行 就是终止的条件
    //5.操作表达式 是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
    //6.代码体验 我么重复打印100局 你好
    for(var i++;i<=100;i++){
    console.log('你好吗？');
}
​
//1.首先执行里面的计数跟变量 var i=1,但是这句话在for 里面执行一次 index
//2.去i<=100 来判断是否满足条件，如果满足条件 就是 执行 循环体 不满足条件退出循环
//3.最后去执行 i++  i++是单独写的代码 递增  第一轮结束
//4.接着去执行 i<=100如果满足条件 就去执行 循环体 不满足条件退出循环 第二轮

断点调试：

断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。 断点调试可以帮我们观察程序的运行过程 浏览器中按 F12--> sources-->找到需要调试的文件-->在程序的某一行设置断点 Watch:监视，通过watch可以监视变量的值的变化，非常的常用。 F11:程序单步执行，让程序一行一行的执行，这个时候，观察watch中变量的值的变化。 代码调试的能力非常重要，只有学会了代码调试，才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试知识点花点功夫肯定学的会，但是代码调试这个东西，自己不去练，永远都学不会。 今天学的代码调试非常的简单，只要求同学们记住代码调试的这几个按钮的作用即可，后面还会学到很多的代码调试技巧。

for循环重复相同代码

//for循环可以执行相同的代码
for(var i=1;i<=10;i++){
  console.log('我错了');
}
​
​
//我们可以让用户控制输出的次数
var num=prompt('请输入次数');
for(var i=1;i<=num;i++){
  console.log('我错了');
}
​
//for循环可以重复执行不同的代码 因为我们有计数器变量 i 的存在 i每次循环值都会变化
//我们想要输出一个 人 1~100岁
for(var i=0;i<=100;i++){
    console.log('这个人今年'+i+'岁了');
}
​
for(var i=0;i<=100;i++){
    console.log('这个人今年1岁了，他出生了');
}else if{
    console.log('这个人今年100岁了，他死了');
}else}{
    console.log('这个人今年'+i+'岁了');
}

for循环重复某些相同操作

for循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算数运算符。

案例：求1-100之间所有整数的累加和

案例分析：

1.需要循环100次，我们需要一个计数器 i

2.我们需要一个存储结果的变量sum,但是初始值一定是0

3.核心算法：1+2+3+4.....，sum=sum+i;

var sun=0;//求和 的变量
for(var i=1;i<=100;i++){
sum=sum+1;
    sum+=i;
}
console.log(sum);

//1.求1-100之间所有数的平均值
var sum=0;
var average=0;
for(i=0;i<=100;i++){
    sum=sum+i;
}
average=sum/100;
console.log(average);
​
//2.求1-100之间所有的偶数和奇数的和
var even=0;
var odd=0;
for(var i=0;i<=100;i++){
    if(i%2==0){
       even=even+i;
       }else{
           odd=odd+i;
       }
}
console.log('1~100之间所有的偶数和是'+even);
console.log('1~100之间所有的奇数和是'+odd);
​
//3.求1-100之间所有能被3整除的数字的和
var result=0;
for(var i=0;i<=100;i++){
    if(i%3==0){
       result=result+i;
       }
}
console.log('1~100之间能够被3整数的数字的和是'+result);
课堂案例：求学生成绩

要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均分的成绩。

案件分析：

1.弹出输入框总的班级人数（num）

2.依次输入学生的成绩（保存起来score），此时我们需要使用for循环，弹出的次数跟班级总数的关系 表达式：！<=num

3.进行业务处理：计算成绩，先求总成绩（sum）,之后求平均成绩（average）

3.弹出结果

var num=prompt('请输入班级的总人数：');//num 总得班级人数
var num=0;//求和的变量
var average=0;//求平均的变量
for(var i=0; i<=num; i++){
   prompt('请输入第'+i+'个学生成绩');
   //因为从prompt取过来的数据是  字符串型的需要转换为字型
   sum=sum+parseFloat(score);
}
average=sum/num;
alert('班级总的成绩是'+sum);
alert('班级平均分是'+average);

打印一行星星案例

var num=prompt('请输入星星的个数');
var str='';
for(var i=1; i<=num; i++){
   str=str+'☆'
}
console.log(str);

双重for循环概述

很多情况下，单层for循环并不能满足我们的需求，比如我们要打印5行5列的图形、打印一个倒直角三角形，此刻就可以通过循环嵌套来实现。

//1.双重for循环 语法结构
for(外层的初始化变量；外层的条件表达式；外层的操作表达式){
    for(里层的初始化变量；里层的条件表达式；里层的操作表达式){
    //执行语句
    }
}
​
//2.我们可以把里面的循环看做是外层循环的语句
//3.外层循环一次，立面的循环执行全部
//4.代码验证
for(var i=0;i<=3;i++){
   console.log('这是外层循环第'+i+'次');
   for(var j=1;j<=3;j++){
     console.log('这是里层的循环第'+i+'次');
   }
}

7 函数

7.1 定义函数

预解析：1.会把全局的变量的“声明”提前，

2.提前声明函数，但是函数内部的代码是不执行的。

局部变量：必须在函数内部使用var\let声明。如果不使用，则称为隐式全局变量

隐式全局变量：只有在执行后才能使用.

全局变量和局部变量可以重名，使用就近原则。

8.比较运算符

8.1比较运算符概念

概念：比较运算符（关系运算符）是两个数据进行比较时所使用的运算，比较运算后，会返回一个布尔（true/false）作为比较的结果

运算符名称说明案例结果
<小于号1<2true
>大于号1>2false
>=大于等于号（大于或者等于）2>=2true
<=小于等于号（小于或者等于）3<=2false
==判等号（会转移）37==37true
!=不等号37!=37false
=== !==全等 要求值和 数据类型都一致37==='37'false

8.2=小结

符号作业用法
=赋值把右边给左边
==判断判断两边值是否相等（注意此时有隐式转换）
===全等判断两边的值和数据类型是否完全相等
console.log(18 === '18');//true
console.log(18 ==='18'); //false

9.逻辑运算符

9.1逻辑运算符概述

1.概念：逻辑运算符是用来进行布尔值运算的运算符，其返回也是布尔值。后面开发中经常用于多个条件的判断。

2.概念：逻辑运算符是用来进行布尔值运算的运算符，其返回值也是布尔值，后面开发中经常用于多个条件的判断。

逻辑运算符说明案例
&&“逻辑与”，简称“与”andtrue&&false
||"逻辑或"，简称“或”ortrue||false
！"逻辑非"，简称“非”not!true

9.2逻辑与&&

两边都是true 才返回true，否则返回false

9.3逻辑非！

逻辑非（！）也叫做取反符，用来取一个布尔值相反的值，如true的相反是false。

var isOk=!true;
console.log(isOk)//fasle

9.4逻辑中断（短路操作）

2.逻辑或

语法：表达式1||表达式2

如果第一个表达式的值为真，则返回表达式1

如果第一个表达式的值为假，则返回表达式2

console.log(123 || 456)//123
console.log(0 || 456) //456
console.log(123 || 456 ||789)//123

9.4短路运算（逻辑中断）

//1.用我们的布尔值参与的逻辑运算符 true && false  == false
//2.123 && 456 是值 或者是  表达式 参与逻辑运算符？
//3.逻辑运算符 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1
console.log(123 && 456);//456
console.log(0 && 456);//0
console.log(0 && 1+2 && 456 *56789);//0
console.log('' && 1+2 && 456*56789);//''
//如果有空的或者否定的为假，其余是真的 0 '' null undefined NaN

短路运算的原理：当有多个表达式（值）时，左边的表达式可以确定结果时，就不再继续运算右边的表达式的值；

1.逻辑与

语法：表达式1&& 表达2

如果第一个表达式的值为真，则返回表达式2

如果第一个表达式的值为假，则返回表达式1

2.逻辑或

语法：表达式1||表达式2

如果第一个表达式的值为真，则返回表达式1

如果第一个表达式的值为假，则返回表达式2

console.log(123 || 456)//123
console.log(0 || 456)//456
console.log(123 || 456 || 789)//123
var x=10;
function func1(){
    var y=5;
    console.log(x);
    console.log(y);
}
func1();
console.log(x);
console.log(y);

1.在函数内部定义一个函数

2.把内部函数作为外部函数的返回值

原理：利用了内部函数可以调用外部函数的变量

function func(){
        var num=20;
        function func2(){
            alert(num);
        }
        return func2
    }
​
    var result=func1();
    result();

定义方式一:

绝对值函数

function adc(x){
        if(x>=0){
             return x;
        }else{
            return -x;
        }
    }

一旦执行 return 代表函数结束,返回结果!

如果没有执行return ,函数执行完也不会返回结果,结果就是undefined

定义方式二:

var abs= function(x){
  if(x>=0){
             return x;
        }else{
            return -x;
        }
}

function(x){.......}这是一个匿名函数.但是可以把结果赋值给 abs,通过abc就可以调用函数! 方式一和方式二等价!

调用函数:

abs(10) //10
abs(-10)  //-10

参数问题:javascript可以传任意一个参数,也可以不传递参数~

参数进来是否存在问题?

假设不存在参数,如果规避?

var abs =function(x){
//手动抛出异常来判断
if(typeof x!=='number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}

arguments(重点)是一个js免费赠送的关键字:

代表,传递进来的所有的参数,是一个数组!

var abs=function(x){
console.log("x=>"+x);
for(var i=0;i<aguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}

问题是:aguments 包含所有的参数,我们有时候想使用多余的参数来进行附加操作,需要排除已有参数~

rest:

以前:

if(arguemnts,length>2){
for(var i=2;i<arguemnts.length;i++){
//.....
}
}

ES6引用的新特性,获取除了已经定义的参数之外的所有参数~....

function aaa(a,b....rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}

rest参数只能写在最后面,必须用....标识

10.赋值运算符

赋值运算符说明案例
=直接赋值var usrName='我是值';
+=、-=加、减一个 数 后在赋值var age=10; age+=5;//15
*=、/=、%=乘、除、取模后在赋值var age=2; age*=5;//10

10.1转换为布尔类型

方式说明案例
Boolean()函数其他类型转换为布尔值Boolean(''true);

代表空、否定的值会被转换为false,如‘’、0、NaN/null/undefined

其余值都会被转换为true.

console.log(Boolean(''))//false
console.log(Boolean(0))//false
console.log(Boolean(NaN)) //false
console.log(Boolean(null))//false
console.log(Boolean(undefined));//false
console.log(Boolean('小白'))//true
console.log(Boolean(12)) //true

10.2、变量的作用域

在javascript中，var定义变量实际是有作用域的。

假设在函数中声明，则在函数体外不可以使用~（非要想实现的话，后面可以研究一下闭包）

function qj(){
        var x=1;
        x=x+1;
    }
​
    x=x+2;//报错：Uncaught ReferenceErrow:x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function qj(){
        var x=1;
        x=x+1;
    }
    
 function qj2(){
        var x=‘A;
        x=x+1;
    }

内部函数可以访问外部函数的成员，反之则不行

function qj(){
        var x=1;
​
        //内部函数可以访问外部函数的成员，反之则不行
        function qj2(){
            var y=x+1;//2
        }
        var z=y+1; //Uncaught ReferenceError:y is not defined
    }

假设，内部函数变量和外部变量，重名！

function cj(){
        var x=1;
        function dj(){
            var x='A';
            console.log('inner'+x); //outer
        }
        console.log('outer'+x); //inner A
        qj2();
    }

假设在javascript中 函数查找变量从自身函数开始~，由“内”向“外”查找.假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域：

function qj(){
  var x="x"+y;
  console.log(x);
  var y='y';
}

结果：xundefined

这个是在javascript建立之初就存在的特性，养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护：

funvtion qj2(){
  var x=1;
  y=x+1,
  z,i,a;// undefined
  
  //之后随意用
}

全局函数

//全局变量
x=1;
function f(){
 console.log(x);
}
f();
console.log(x);

全局变量window

var x='xxx';
alert(x);
alelrt(windows.x);

alert()这个函数本身也是一个window变量；（重点练习）

var x='xxx';
windows,alert(x);
var old_alert=window.alert;
//old_alert(x);
​
window.alert=function(){
​
};
//发现alert()失效了
widows.alert=old_alert;
widows.alert(456);

​

javascript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范：

由于我们所有的全局变量都会绑定到我们window上，如果不同的js文件，使用了相同的全局变量，冲突→如果能够减少冲突？

//唯一全局变量
var KuangApp={};
​
//定义全局变量
KuangApp.name='kuang';
KuangApp.add=function(a.b){
return a+b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局变量冲突问题~

jQuery

局部作用域let（重点练习）

function aaa(){
 for(var i=0;i<100;i++){
 console.log(i)
 }
 console.log(i+1); //问题？ i出了这个作用域还可以使用
}

ES6 let关键字，解决局部作用域冲突问题！

function aaa(){
 for(let i=0;i<100;i++){
 console.log(i)
 }
 console.log(i+1);  //报错：Uncaught ReferenceError； i is not defined
}

建议大家都是用let 去定义局部作用域的变量；

常量const:

在ES6之前，怎么定义常量：只有用全部大写字母命名的全部就是常量：建议不要修改这样的值

var PI='3.14';
​
console.log(PI);
PI='123';//可以改变这个值
console.log(PI)
;

在ES6引用了常量关键字 'const'

const PI='3.14';//只读常量
console.log(PI);
PI='123';
​
​
const PI='3.14';//只读常量
console.log(PI);
PI='123'; //报错：TypeError: Assignment to constant variable. 
console.log(PI);

10.3、方法

定义的方法：

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

var kuang={
 name:'秦'，
 bitrh:2000,
 //方法
 age:function(){
  //今年-出生的年
  var now=new Date().getFullYear();
  retur now-this.bitrh;
 }
}

11.内部对象

标准对象:

typeof 11231
'number'
typeof '1213'
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

11.1 Date

基本使用

var now =new Date();
   now.getFullYear();//年
   now.getMonth(); //月
   now.getDate(); //日
   now.getDay();//星期几
   now.getHours();//时
   now.getMinutes();//分
   now.getSeconds();//秒
​
   now.getTime();//时间戳  全世界统一  1970 1.1 0:00:00  毫秒
​
   console.log(new Date(1578106175991))

转换

Edge Translation started
now =new Date(1578106175991)
Sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
now.toLocaleString()
'2020/1/4 10:49:35'
now.toLocaleString
ƒ toLocaleString() { [native code] }
now.toGMTString()
'Sat, 04 Jan 2020 02:49:35 GMT'

11.2 JSON

json 是什么

早期,所有数据传输习惯使用XML文件!

JSON（JavaScript Object Notation, JS对象简谱）是一种轻量级的数据交换格式。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。

易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在javascript一切皆为对象,任何js支持的类型都 可以使用JSON来表示;

格式:

对象都用{}

数组都用[]

所有的 键值对 都是用key:value

JSON字符串和JS对象的转化

var user={
    name:"qingjiang",
    age:3,
    sex:'男'
   }
 //对象转换为json字符串 {"name":"qinjiang":"age":3,"sex":"男"}
   var jsonUser =JSON.stringify(user);
  //json 字符串转化为对象  参数为json 字符串
   var obj=JSON.parse('{"name":"qinjiang":"age":3,"sex":"男"}');

很多人搞不清楚,JSON和 JS对象的区别

var obj={a:'hello',b:'hellob'};
var json={"a":"hello","b":"hello"};

1解析型语言和编译语言

1.1概述：计算机不能直接理解任何除机器语言之外的语言，所有必须把程序员所写的程序语言翻译成机器语言才能执行程序，程序语言翻译成语言的工具，被称为翻译器。

1.2翻译器翻译的方式有两种：一个是编译，另一个是解释，两种方式之间的区别在于翻译时间点不同。

1.3编译是在代码执行之前进行编译，生成中间代码文件。

1.4解析器是在运行时进行及时解析，并立即执行（当编译器以解释方式运行的时候，也称为解释器）。

类似于请客吃饭：

编译语言：首先把所有菜做好，才能上桌吃饭。

解析语言：好比吃火锅，边吃边涮，同是进行。

5.3 Ajax

原生的js写法 xhr异步请求

jQuey封装好的 方法$("#name").ajax("")

axios 请求

12.面向对象编程

12.1 什么是面向对象

javascript . java .c# ...面向对象:javascript 有些区别!

类:模版

对象:具体的实例

在javascript这个需要大家换一下思想方式!

原型：

 var Student ={
    name :"qinjing",
    age:3,
    run:function(){
       console.log(this.name+"run....");
    }
   };
  
    var Bird={
        fly:function(){
            console.log(this.name+"fly....")
        }
    }
 
​
    var xiaoming={
        name:"xiaoming"
    };
​
    //小明的原型 是Student
    xiaoming._proto_=Student;
 function Student(name){
        this.name=name;
    }
​
    //给studnet新增一个方法
    Student.prototype.hello=function(){
        alert("Hello");
    }

class继承：

class关键字，是在ES6引入的

1、定义一个类，属性，方法

 //定义一个学生类
    class Student{
       
        constructor(name){
            this.name=name;
        }
        hello(){
            alert('hello');
        }
    }
​
var xiaoming=new Student("xiaoming")
var xiaohong=new Student("xiaohong")
xiaoming.hello()

12.2创建对象的三种方式：利用字面量创建对象

对象的调用：

对象里面的属性调用：对象，属性名，这个小点.就理解为“的”

对象里面属性的另一种调用方式：对象['属性名']，注意方括号里面的属性必须引号，我们后面会用。

对象里面的方法调用;对象。方法名（），注意这个方法名后面一定加括号

console.log(star.name)//调用名字属性
console.log(star['name'])//调用名字属性
star.syHi();  //调用sayHi方法，注意，一定不要忘记带后面的括号

13.操作BOM对象（重点）

window代表 浏览器窗体

window.alert(1)
undefined
window.innerHeight
258
window.innerwidth
919
window.outerHeight
994
window.outerwidth
919
//大家可以调整浏览器窗体试试...

Navigator（不介意使用）:

Navigator,封装了浏览器信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36 Edg/104.0.1293.47'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.81 Safari/537.36 Edg/104.0.1293.47'
navigation.platform
undefined

大多数时候，我们不会使用navigator对象，因为会被人为修改！

不建议使用这个属性来判断和编写代码

screen:

代表屏幕尺寸

screen.width
1920 px
screen.height
1080 px

location（重要）

location代表当前页面的URL信息

host:"ww.baidu.com"
href:"https://www.baidu.com/"
protocol:"htpps:"
reload:reload()//网页刷新
//设置新的地址
location.assign('https:blog.kuangstudy.com/')

document代表当前的页面，HTML DOM文档树

documen.title
"百度一下，你就知道"
documen.title='狂神'//改变标题
"狂神"

获取具体的文档数节点

<body>
    <dl id="app">
     <dd>JavaSe</dd>
     <dd>JavaSe</dd>
     <dd>JavaSe</dd>
    </dl>
    <script>
        var dl =document.getElementById('app');
    </script>
</body>

获取cookie

document.cookie

劫持cookie原理

www.taobao.com

<srcipt src="aa.js"></srcipt>
<!--恶意人员，获取你的cookie上传到他的服务器-->

服务器端可以设置cookie：httPOnly

history（不介意使用）:

history代表浏览器的历史记录

history.back()//后退
history.forward()//前进

14、操作 Dom对象（重点）

核心：浏览器页面就是一个Dom树形结构！

1.更新：更新Dom节点

2.删除：删除一个Dom节点

3.添加：添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获得dom节点

<body>
   <div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
   </div>
    <script>
        var h1=document.getElementsByClassName('h1');
        var h1=document.getElementById('p1');
        var h1=document.getElementsByClassName('p2');
        var father=document.getElementById('father');
​
        var childrens=father.childrens;//获取父节点下的所有子节点
        //father.firsthchild
        //father.lastchild
    </script>

这是原生代码，之后我们尽量都是用jQuery();

更新节点：

<body>
    <div id="id1">
​
    </div>
</body>
<script>
    var id1=document.getElementById('id1');
</script>

操作文本

id1.innerText='456' 修改文本值

id1.innerHTML='123'可以解析为HTML文本标签

操作css

id1.style.color='red'; //属性使用 字符串 包裹
id1.style.fontsize='20px' //-转 驼峰命名
id1.style.oadding='2em'

删除节点：

删除节点的步骤;先获取父节点，在通过父节点删除自己

<div>
<h1></h1>
<p id="p1"></p>
<p class="p2"></p>
</div>
<script>
    var self=document.getElemenByID('P1');
    var father=p1.parentElement;
    father.removeChild(p1)
    
    
    //删除是一个动态的过程
    father.removeChile(father.shildren[0])
    father.removeChile(father.shildren[1])
    father.removeChile(father.shildren[2])
</script>

注意：删除多个节点的时候，children是在时刻变化的，删除节点的时候注意！

插入节点：

我们获得Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这么干了！会产生覆盖

追加

<body>
    <p id="js">JavaScript</p>
    <div id="list">
      <p id="se">javaSE</p>
      <p id="ee">javaEE</p>
      <p id="me">javaME</p>
    </div>
</body>
<script>
   var js=document.getElementById('js');//已经存在的节点
   var list=document.getElementById('list');
   list.appendchild(js);//追加到后面
    //通过JS 创建一个新的节点
    var nweP =document.createElement('p');//创建一个标签
    newP.id='newP';
    newP.innerText='Heelo,Kuang';
    list.sppendChid(newP);
    
    
</script>

创建一个新的标签，实现插入

<script>
   var js=document.getElementById('js');//已经存在的节点
   var list=document.getElementById('list');
   list.appendchild(js);//追加到后面
    //通过JS 创建一个新的节点
    var nweP =document.createElement('p');//创建一个标签
    newP.id='newP';
    newP.innerText='Heelo,Kuang';
    list.sppendChid(newP);
    //常创建一个新的标签节点（通过这个属性，可以设置任意的值）
    var myScript=document.createElement('script');
    myScript.setAttribute('type','text/javascript')
    var body= document.getElementsByTagName('body');
    body.style.background='#123'
</script>
insert

var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
//包含的节点。insertBefore(newNode,targetNode)
list.merstBerore(js.ee)

结束语：


首先，恭喜大家已经阅读完整个JavaScript（简单易通），一般而言，不管书籍也好，能够完整跟下来的就已经很不容易了。所以尽量帮助初学者减少初级的困难，其实一旦掌握了之后，会发现它其实是非常容易。但大道至简，知易行难，需要大家之后不断练习，在此基础上加强知识的认知深度。虽然我尽量以通俗易通的形式，将内容体现出来，但水平毕竟有限，望大家海涵。


文章来源:https://blog.csdn.net/2301_77638787/article/details/132127431
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：jacktools123@163.com进行投诉反馈，一经查实，立即删除！

标签：

上一篇：webSocket介绍与使用 spring boot 集成 websocket教程 java
下一篇：编译原理

相关文章

最新发布

点击排行

本站推荐

标签云