js学习（1~32集）

最新推荐文章于 2024-11-10 15:10:09 发布

浪漫季

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量817

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/lishunyu1226/article/details/128638264

版权

一.js之hello

alert("hello world")

在这里插入图片描述

document.write("hello world"）

console.log("hello world")//用于开发人员调试

网页控制台上的内容，便于开发人员调试

二.JS的书写位置

js有多种书写方式，行内式，内嵌式，外链式。

行内式js代码（不推荐）

写在标签上的js代码需要依靠事件行为发生

<!-- 写在其他元素上 -->
    <div onclick="alert('hello world')">点我</div>
    <!-- 写在a标签的href属性上 -->
    <a href="javascript:alert('heelo world')">点击</a>

注：onclick是一个点击事件，当点击元素的时候来执行后面的 JS 代码

内嵌式

内嵌式的js代码会在页面打开的时候直接触发

  <!-- 在html页面书写一个script标签,在标签内书写js代码 -->
    <script>
        alert("我是一个弹出层")
    </script>

注：script标签可以放在head里面也可以放在body里面（写在body最后部分）

3.外链式

外链式js代码只要引入了html页面，就会往页面打开的时候直接触发
新建一个.js后缀的文件，在文件内直接写js代码，把写好的代码引入html页面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./02.js">
     /*    有了链接后再写其他内容会忽略 */
    </script>
</head>
<body>
    
</body>
</html>

一个页面可以引入多个js文件

三.变量

变量是指再程序中保存数据的一个容器
变量是计算机内存中存储数据的标识符，根据变量名称可以获取内存中存储的数据
总而言之，我们内存中存储了一个数据，然后要给这个数据起个名字，为了下次再找到他。

语法：var 变量名 = 值

		var num/* 定义一个变量 */
        num=200/* 给一个变量赋值 */
        var num=300/* 定义一个变量的同时给其赋值 */

例子：

 	<script>
        var num/* 定义一个变量 */
        num=200/* 给一个变量赋值 */
        y= num+2000/*定义变量赋值*/
        console.log(y)//在控制台的输出结果为2200
    </script>

在这里插入图片描述

四.变量命名的规则和规范

规则：必须遵循

1.一个变量名称可以由数字，字母，英文下划线（_），美元符号($)组成
2.严格区分大小写
3.不能由数字开头
4.不能是保留字或者关键字
5.不要出现空格

规范：建议遵守的（开发者默认的）

1.变量名尽量有意义
2.遵循驼峰命名的规则，由多个单词组成，从第二个单词开始首字母大写
3.不要使用中文

五.数据类型

1.Number

二进制（前面加0b）
var a=0b11
八进制（前面0)
var a =077
十六进制(前面加0x）
var b=0xff
浮点型（12.5)
NaN

2e3→2×10的三次方
NaN→Not a Number

2.String字符串

加引号

3. 布尔类型（boolean)

只有两个（true或者false）

4.undefined

 	  var which//声明了但未赋值
      console.log(which)

5.Null

现在未赋值，但确定未来会赋值

6.判断数据类型

使用typeof 关键字来进行判断

	  var n1 =100
      console.log(typeof n1)//number
      
      var n2 ="ab"
      console.log(typeof(n2))//string

七.数据类型转换

1.转数值

number（变量）

可以把一个变量强制转换成数值类型
可以转换小鼠，会保留小数
可以转换布尔值
遇到不可转换的都会返回NaN

	  var a="123"//string类型
      var b=Number(a)
      console.log(a,b)

输出结果为
123 123(蓝色,表示转化成number类型)

parseInt（变量）

从第一位开始检查，是数字就转换，知道一个不是数字的内容
开头就不是数字，那么直接返回NaN
不认识小数点，只保留整数

parseFloat（变量）

从第一位开始检查，是数字就转换，知道一个不是数字的内容
开头就不是数字，那么直接返回NaN
认识依次小数点

除了加法以外的数学运算

运算符两边都是可运算数学才行
如果运算符任何一遍不是一个可运算数字，那么就会返回NaN
加法不可以用

	  var a="100"
      var b=a/1
      console.log(a,b)
      var a="100"
      var b=a-0
      console.log(a,b)
      var a="100"
      var b=a*1
      console.log(a,b)

2.转字符串

变量.toString()

有一些数据类型不能使用toString()方法，比如undefined和null

String（变量）

所有数据类型都可以

使用加法运算

在JS里面，+有两个含义

1.字符串拼接：只要+任意一边是字符串，才会进行字符串拼接
2.加法运算：只有+两边都是数字的时候，才会进行数学运算

三种方法例子：

	  var a=100
      var b=String(a)
      console.log(a,b)

      var a=100
      var b=a.toString()
      console.log(a,b) 

      var a=100
      var b=a+""
      console.log(a,b)

3.转布尔

模板：Boolean（变量）

在js中，只有" "，0，null，undefined，NaN，这些都是false
其余都是true

      var a=""
      var b=Boolean(a)
      console.log(a,b)

八.运算符

1.数学运算符

就是在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在js里面还有很多的运算方式

只有符号两边都是数字的时候才会进行加法运算
只要符号任意一边是字符串类型，就会进行字符串拼接

会执行剑法运算
会自动把两边都转换成数学进行运算

会执行乘法运算
会自动把两边都转换成数字进行运算

会执行除法运算
会自动把两边都转换成数字进行运算

会执行取余运算
会自动把两边都转换成数字进行运算

 	var a=10
    var b=true//也可以为true（代表1）或者false（代表0）
    console.log(a+b)
    
    console.log(1+"2"*3+4)//结果为11先算乘
    console.log("1"+"2"*3+4)//结果为164 ，"1"为字符串会进行拼接

实例：
将1000分钟转换成几小时几分

		var a=1000//分钟
        var b=parseInt(a/60)//取整小时
        var c=a%60//取余下多少分钟
        console.log(b+":"+c)//将b转化为字符串

2.赋值运算符

var num=100
就是把100赋值给num变量
那么num变量的值就是100

 		var a=10
        a +=10
        console.log(a )

a +=10等价于a=a+10

		var a=10
        a -=10
        console.log(a)

a-=10等价于a=a-10

*=,/=，%=类似

3.比较运算符

==
比较符号两边的值是否相等，不管数据类型

1==“1”
两个值是一样的，所以得到的值为true

===
比较符号两边的值和数据类型是否都相等

1===“1”
两个值虽然一样，但是因为数据类型不一样，所以得到false

！=
比较符号两边的值是否不等

1！=“1”
因为两边的值是相等的，所以比较他们不等的时候得到false

4.逻辑运算符

&&
进行且的运算

符号左边必须为true并且右边也是true，才会返回true
只要一边不是true，那么就会返回false
true&&true结果是true
true&&false结果是false
false&&true结果是false
false&&false结果是false

||
进行或的运算

符号的左边为true或者右边为true，都会返回true
只有两边都是false的时候才会返回false

！
进行取反运算（逻辑 “ 非”）

本身是true的会变成false
本身是false的会变成true

5.自增自减运算符

1.++

进行自增运算
分为两种，前置++和后置++
前置++，会先把值自动+1，在返回

	var a=10
    console.log(++a)
    //会返回11，并把a的值变为11

后置++，会先把值返回，再自动+1

	var a=10
    console.log(a++)
    //会返回10，然后把a的值变为11

2.–

进行自减运算
分为两种，前置–和后置–
和++运算符道理一样

6.三元运算符

三元运算，就是用两个符号组成一个语句
语法：条件？条件为true的时候执行：条件为false的时候执行

		var age=18
        age>=18?alert("已经成年"):alert("没有成年")

九.分支结构

我们js代码都是上到下，左到右的顺序执行
逻辑分支就是根据我们设定好的条件来决定要不要执行某些代码

if条件分支结构

1.if语句

通过一个if语句来决定代码是否执行
语法：if（条件）{要执行的代码}
通过（）里面的条件是否成立来决定{}里面的代码是否执行

		var sum=210
        var youhuisum
        if (sum>200) {   //达到条件才会继续执行
            youhuisum=sum-10
        }

2. if else 语句

通过if条件来决定，执行哪一个{}里面的代码
语法：if（条件）{条件为true时执行}else{条件为false的时候执行}
两个{}内的代码一定有一个会执行

 		var sum=190
        var youhuisum
        if (sum>200) {
            youhuisum=sum-10
        }else{
            youhuisum=sum
        }
        console.log(sum,youhuisum)//因为if条件错误所以执行else的条件

switch条件分支语句

也是条件判断语句的一种
是对某一个变量的判断
语法：

			var code = 5
        	switch (code) {
            case 1 :
                document.write("未付款")
                break;
            case 2 :
                document.write("已付款")
                break;
            case 3 :
                document.write("已发货")
                break;
            case 4 :
                document.write("已完成")
                break;
            default : 
            	document.write("出错了")//上述情况都不满足的时候执行的代码
        }

要判断某一个变量等于某一个值的时候使用

十.循环结构

循环结构，就是根据某些给出的条件，重复的执行同一段代码
循环必须要有某些固定的内容组成

1.初始化
2.条件判断
3.要执行的代码
4.自身改变

1.while循环

while，中文叫“ 当……时”，其实就是当条件满足时就执行的代码，一旦不满足就不执行了。
语法：while（条件）{满足条件就执行}
要设计一个边界值，不然一直循环

		var a=0//初始化条件
		条件判断
        while (a<10) {
        	//要执行的代码
            console.log("shabi")
            //自身改变，防止一直循环
            a++
        }

利用循环结构来计算1到100加起来

		var a = 1
        var sum = 0//放在循环外边，防止每次循环重置
        while(a<=100){ 
            //console.log(a)
            sum+=a
            a++
        }
        console.log(sum)

2.do while 循环

是一个和while循环类似的循环
while会先进行条件判断，满足就执行，不满足直接就不执行
但是do while 循环是，先不管条件吗，先执行一会，然后再开始进行条件判断
语法：do{要执行的代码}while（条件）

		var a=1
        var sum=0
        do {
            sum+=a
            a++
        } while (a<=100);
        console.log(sum)

		do{
            res = prompt("请输入你的名字")
            console.log(res) 
        } while (!res);//！使得达不成条件不循环

3.FOR循环

和while和do while 循环都不太一样的一种循环结构
道理和其他两种一样的，都是循环执行代码的
语法：for(var i = 0 ; i < 10 ; i++){要执行的代码}

		var sum = 0
		    //初始化；条件判断；自身改变
        for(var a=1; a<=100;a++){
        //这里写要执行的代码	
            sum+=a
        }
        console.log(sum)

初始化。条件判断后直接执行代码，然后再自身改变，在循环到条件判断，依次循环。

		var count = 0
        for(var n=1000 ; n<=2000 ; n++ ){
            if (n%400===0||n%4===0&&n%100!==0) {
                document.write(n+" ")
                count++
                if (count%4===0) {
                    document.write("<br/>")//使四个换一次行
                }
            }
        }

4.break终止循环

在循环未完毕的时候，因设置的条件满足，提前终止循环。
例如：吃五个包子，吃到第三个就不能吃了，即停止
要终止循环就可以直接使用break关键字

		for(var i=0 ; i<5 ; i++){
            if(i===3){
                break//当条件达成，就break终止循环
            }
            console.log(i);
        }

5.continue结束本次循环

在循环中，把循环的本次跳过去，继续执行后续的循环
例如：吃五个包子，吃第三个扔了不吃了，继续吃第四个和第五个
跳过本次循环，就可以使用continue关键字

		for(var i=0 ; i<5 ; i++){
            if(i===3){
               continue//当条件达成，就跳过此次循环，继续进行下一轮循环
            }
            console.log(i);
        }