JavaScript基础（详细总结）上

最新推荐文章于 2024-10-19 20:24:35 发布

路痴先森

最新推荐文章于 2024-10-19 20:24:35 发布

阅读量157

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_57162921/article/details/134534542

版权

1、JavaScript简介

一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了。

1.2、JavaScript的发展史

1990年，欧洲核能研究所（CERN）科学家在互联网（Internet）基础上，发明了万维网（World Wide Web），从此可以再网上浏览网页文件。（互联网是线路、协议以及通过TCP、IP协议实现数据电子传输的硬件和软件的集合体。Internet提供的主要服务有万维网WWW、文件传输FTP、电子邮件E-mail、远程登录Telnet等。万维网则存在于互联网之上，是由无数个网络站点和网页集合而成，构成了因特网主要的部分。如果把互联网看成是基础，万维网就可以被看成是对互联网的应用）

1992年，美国国家超级电脑应用中心（NCSA）开发了人类历史上第一个浏览器Mosaic。

1994年，NCSA的程序员联合一个风投家成立Mosaic通信公司，后来更名为Netscape。开发面向普通用户的新一代浏览器Netscape Navigator1.0版，市场份额一举超过90%。

Netscape公司很快发现，浏览器需要一种可以嵌入网页的脚本语言来控制页面行为。因为那时网速很慢而且网费很贵，有些操作不需要在服务端完成，可以把这些操作在浏览器端完成，从而提高效率。他们对这项脚本语言的设想是：功能不需要太强，语法简单，容易学习和部署。恰逢Sun公司java问世，两家公司强强联合，NetScript公司希望借助Java语言的声势，Sun公司则将自己的影响力扩展到浏览器，1995年，他们雇佣程序员十天时间就设计完成了这种语言的第一版，命名为JavaScript，对外宣称JavaScript是Java的补充。

1.3、JavaScript的功能

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

1.4、JavaScript的特点

   1、js源码不需要编译，浏览器可以直接解释运行。

    2、js是弱类型语言，js变量声明不需要指明类型。

1.5、JavaScript组成

组成部分                作用
ECMA Script     构成了JS核心的语法基础
BOM             Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOM             Document Object Model 文档对象模型，用来操作网页中的元素（标签）

2、JavaScript基础语法

2.1、HTML引入JS

2.1.1、内部引入

定义script标签，标签体内容就是js代码

<script>
      //js代码
</script>

2.1.2、外部引入

<script src="js/文件名.js"></script>

1、script标签不能自闭合。

2、如果script标签使用src属性，那么浏览器将不会解析此标签体的js代码。

2.2、JS输出数据的三种方式

2.2.1、浏览器弹窗

<script>
        alert('浏览器弹框输出字符');
</script>

2.2.2、输出HTML页面

<script>
        document.write('输出html内容到页面');
</script>

2.2.3、输出浏览器控制台

<script>
    console.log('输出到浏览器控制台');
</script>

2.4、JS变量声明

java是强类型语言，注重变量的定义，所以在定义变量时都需要指定数据类型。

js是弱类型语言，不注重变量的定义，所以在定义变量时不需要指定数据类型。

2.4.1、定义变量

//局部变量 用let定义
let 变量名 = 值;
//全局变量 用var定义
var 变量名 = 值;

2.4.2、定义常量

  //常量定义 const
    const 常量名 = 值;

<script>
    //整数类型
    var a=3;
     
     // Boolean类型
     var b=true;
                
     // 定义小数类型  小数和整数类型统称为number类型
     var score=2.333;
                
     // 定义常量类型  常量类型一旦被定义就不能被改变
     const PI=3.1415926
                
     //boolean类型
     var f=true;
                
      var m;
      console.log(m);
      // undefined;  表示变量未被定义
        
      // 字符串类型 string
      var o="dd";
</script>

注意事项：

1、ECMAScript6之前定义变量使用var 但是会有很多坑，所以ECMAScript6之后开始推出let声明变量，const声明常量。

2、在js中，末赋值的变量，也是可以使用的，但是这个值是undefined,末定义的变量。

2.5、JS的数据类型

属性	描述
number	数字类型，不区分小数整数
string	字符串类型，不区分单双串
boolean	布尔类型，true/false
object	对象（function null）
undefined	未定义

2.5.1、类型判断 typeof变量

<script>
  // 使用let关键字 定义字符串
    let str1 = "你好JS!";
    let str2 =  'a';
    console.log(typeof str1);
    console.log(typeof str2);
     
   // 定义整数
     let num1 = 1314;
     let num2 = 13.14;//四舍五入，保留2位
     console.log(typeof num1);
     console.log(typeof num2);
                
   // 定义boolean类型
     let flag = true;
     console.log(typeof flag);
                
   // 末定义类型
      let a;
      console.log(typeof a);
                
   // 引用数据类型
      let obj = new Object();
      console.log(typeof obj);
                
</script>

2.6、JS的运算符

  运算符                  说明
算数运算符     +、 - 、*、 / 、% 、 ++ 、 --
赋值运算符     = 、+= 、-= 、 *= 、 /= 、 %=
比较运算符     > 、 >= 、 < 、 <= 、 == 、 ===(全等于,仅js) 、 !=
逻辑运算符     && 、 || 、 !
三元运算符     关系表达式 ? 值1 : 值2;

2.6.1、算数运算符

在js中数值可与字符串进行数学运算，底层实现隐式转换。

<script type="text/javascript">
        let str = "10";
        let num = 20;
        console.log(str + num); // 1020
        console.log(str - num); // -10
        console.log(str * num); // 200
        console.log(str / num); // 0.5
</script>

 var a = 3;
 var b = 4;
 var c = "hello";
     
 alert(a/b);//js相除可以得到小数
 alert(typeof(a+c));// number类与字符串类型相加，字符串拼接
     
 var d = 6;
 var f = '4';
 alert(d+f);//拼接的64
     
 var a1 = 3;
 var a2 = "4";
 alert(a1-a2);//-1 如果字符串与number类型进行相减，默认把字符串的数字转成number类型
     
 var b1 = 3;
 var b2 = "abc";
 alert(b1-b2);//NaN  not a number ;
     
//如果数值与boolean类型为的数据，进行做运算时，会将boolean数据转换成数值。true转为1，false转为0
 var bo1 = true;  
 var bo2 = false;
 alert(a+bo1);//4
 alert(a+bo2);//3

注意：字符串类型与数字类型的运算中，只有相加会进行字符串拼接，而减、乘、除运算中，字符串中的数值可与字符串进行数学运算。

2.6.2、比较运算符

==、===（全等于）之间的区别？

== : 只比较内容是否相同根本不比较数据类型

===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

<script type="text/javascript">
   let num = 100;
   let str = "100";
   console.log(num == str); // true
   console.log(num === str);// false
</script>

2.6.3、三目（元）运算符

格式：  表达式 ？ 结果1 ： 结果2 ；

如果表达式运算的结果是true,把结果1返回
如果表达式运算的结果是false,把结果2返回

    //定义一个变量为3
    let a = 3;
     
    //定义一个变量为4
    let b = 4;
     
    //页面输出
    //如果满足的 非0 ，非null， 非undefined 为true
    //如果满足的 是0 ，是null , 是undefined 为false
    document.write(a>b ? a : b);