JavaScript详解_`javascript csdn-CSDN博客

本文链接：https://blog.csdn.net/m0_63947250/article/details/124512480

1:定义:javascript是一门弱类型脚本语言，源代码在经过客户端运行之前不需要编译，由浏览器解释运行

2:快速入门

①引入js

②基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="one.css">
<!--这是不分离的情况下写script标签内，写js代码（内部标签使用）
也可以单独新建一个js文件，直接写js代码
-->
  <script>
    //alert('我的世界');//alert 弹窗，是一个顺序结构，只能执行一个
//1：定义变量 变量类型 变量名= 变量值；
    var score=71;//在js中只有var一种类型
    //2:条件控制
    if(score>60&&score<70){
      alert("及格");
    }
    else if(score>70&&score<80){
      alert("良好");
    }
    else{
      alert("其他");
    }
    //3:检查，在网页控制台内检查 console
    //console.log(score) 打印变量

  </script>
<!--  外部引入js代码
<script src="js/qj.js"></script>-->

</head>
<body>

</body>
</html>

js中严格区分大小写;

变量名取值也遵循标识符规则，数字不能开头

3:总体数据类型

①数值，文本，图形，音频，视频....

②注意事项:js不区分小数和整数，都属于number

NaN 表示not a number

Infinity 表示无限大

③字符串

'abc' "abc" 俩个符号都可以表示内为字符串

④布尔值

true,false

⑤逻辑运算

&& 与

|| 或

！非

⑥比较运算符

= 赋值

== 等于(类型不一样，值一样，也会判断为true 例如 1和字符'1'此也可表示为true)

=== 绝对等于(类型一样，值一样，结果为true,在js中尽量使用此种＝==)

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

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

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

⑦null和undefined

null:空

undefined:未定义

⑧数组

java中一些列相同类型的对象，js中不需要这样

var arr=[1,2,'hello',null];

打印越界的数值元素就会 undefined

⑨对象

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

4:监测

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="one.css">
  <script>
var arr=[1,2];
//Person person=new Person(1,2,3);
//创立对象，每个属性之间用,分离，最后一个不需要
//在网站中打印，person.name
i=1;//全局变量，尽量不要这么使用
// 'use strict'; 严格检查模式，预防js的随意性导致产生的一些问题，要求：必须写在第一行
var u=5;//局部变量 用let定义也可
var person={
  name:"wy",
  age:5,
  tags:["sd","web"]
}
  </script>
</head>
<body>

</body>
</html>

5:数据类型详解

①字符串

1:正常字符串我们使用单引号，或双引号包裹

2:注意转意义字符 \

\u### 输出Unicode字符

\x### 输出Ascll字符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="one.css">
  <script>
    //定义字符串,定义后字符串不可变，即无法重写赋值
    var trr=`d
    ddsdsa
    `
    let name="wyp";
    let a="这个字符串长度"
    let msy=`我的名字叫做${name}`;//用$表示另一个变量
    console.log(msy);
    console.log(a+name.length);//打印字符串长度
    console.log(name.toUpperCase())//大小写转换 tolowercase()小写
    //console.log(a.indexOf(这));//查找字符串对应元素的下标数字
    console.log(a.substring(1,3));//截取字符串的部分，大于等于一小于三，12
    console.log(a.substring(1));//从标号1到最好一个元素下标
  </script>
</head>
<body>

</body>
</html>

②数组(存，取)

1:arr中数组可以包含任意的数据类型

2:给arr.length赋值，数组大小会变化，变大，多出来的为undefined ，变小，数据会丢失

3:数组元素的值可以通过下标来取值和赋值

arr[0]=6;

4:indexof(元素):通过元素获得小标索引

5:slice() 截取arr的一部分，返回一个新数组

类似于字符串中的substring的作用

6:arr.push(1) 压入到尾部

arr.pop() 弹出尾部的一个元素

俩者都会改变数组的长度

arr.unshift(5)压入到头部

arr.shift()弹出头部的一个元素

arr.sort() 数组排序根据编码值

arr.reverse() 元素反向排列

arr.concat([1,2,3])数组元素拼接

arr的元素加上1，2，3

但并未改变arr，只是返回了一个新的数组

连接符join

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

["A","B"]

arr.join('-')

"A-B"

7:多维数组

arr=[[1,2],[3,4]];

arr[0][1]=2;

arr[1][0]=3;

8:对象

var 对象名={

属性名:属性值,

属性名:属性值//定义了一个对象名对象，它有俩个属性

//键值对描述属性 xxx:xxxx,

}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="one.css">
  <script>
    //js中所有的键都是字符串，值是任一对象
    var person={
      name:"wyp",
      age:18,
      height:181
    }
    console.log(person.name);//打印对象
    delete person.name;//动态的删减数组属性
    person.weight=130;//动态的增加属性
    'name' in person//判断属性值是否在这个对象中（true）(属性值也可能是继承来的)
    person.hasOwnProperty(name);//判断属性值是否是自身对象所拥有的
  </script>
</head>
<body>

</body>
</html>

9:流程控制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="one.css">
  <script>
   var age=3;
   var height=1;
   var hh=[1,2,3,7]
   if(age>3){//If判断
     alert("长大成人");
   }
   else{
     alert("牙牙学语");
   }
   while(height<5){//while循环，注意避免死循环
     height=height+1;
     console.log(height);
   }
   for(let i=1;i<5;i++){//for循环
     console.log(i);
   }
   for(var num in hh){
     console.log(num);
   }
  </script>
</head>
<body>

</body>
</html>

10:Map和Set

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="one.css">
  <script>
//Map,Set一种集合
   var map=new Map([['tom',100],['jack',80]]);//Map里面加成对的值，键值对
   var name=map.get('tom');//通过key获得value
   console.log(name);
   map.set('td',123);//加一个map的数据
   //Set 无序不重复的集合
   var set=new Set([3,1,1]);//Set可以去重
    set.add(5);//增加数据
    set.delete(1);//删除数据
   console.log(set.has(1));//判断是否包含
  </script>
</head>
<body>

</body>
</html>

11:iterator:遍历

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="one.css">
  <script>
   var arr=[3,4,5];
   for(var x in arr){
     console.log(x);//循环打印数组小标
   }
   //遍历：即全部打印出来
   var arr=[3,4,5];
   for(var x of arr){
     console.log(x);//循环打印数组具体的值
   }
  </script>
</head>
<body>

</body>
</html>

4:函数

①：定义：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="one.css">
  <script>
    function ab(x) {//定义一个函数 关键词function ab是函数名
      //一旦执行return 表示函数结束
      //在网页内 ab(-5)此类传值[此为调用函数]
      //js中可以传任意个参数，也可以不穿参数，不会报错
      //参数不对，想要其报错的操作
      if(typeof x!=='number'){//typeof 抓取x的数据类型
        throw 'Not a Number';//抛出错误，让其报错
      }
      if (x >= 0) {
        return x;
      } else {
        return -x;
      }
    }
      var abs=function(x){//第二种定义函数的方法，这是一个匿名函数式，但可以把结果赋值给abs
      //输入多个参数，如何全部抓取出来，才用系统默认的argument关键字，argument是一个数组
      console.log(x);//显示输入的第一个
      for (var i=0;i<arguments.length;i++){
        console.log(arguments[i]);//重写全部抓取出来
      }
        if (x >= 0) {//显示输入的第一个
          return x;
        } else {
          return -x;
        }
      }
      //获取已经定义的参数之外的所有参数，rest同为默认的关键词，也是一个数组
    //特点 rest 必须写在最后面
      function aaa(a,b,...rest){
      console.log(a);
      console.log(b);
      consloe.log(rest);
      }


  </script>
</head>
<body>

</body>
</html>

②：变量的作用域

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="one.css">
  <script>
    function ac(){
      var x=1;
      x=x+1;// var定义的变量只在函数体内有用，即定义域（强行实现，需要闭包操作）
    }
   x=x+3;//就会报错，无定义
    function ad() {
      var x = 1;//不会报错，俩个函数可以使用同名的变量
      x = x + 1;
      function aw(){
        var y=x+1;//内部函数可以访问外部函数的成员，反之不可以
      }
    }
  </script>
</head>
<body>

</body>
</html>

css美华网站: