JavaScript-上篇

news2024/11/28 19:00:45

JS 入门

JS概述

JavaScript（简称JS）是一种高层次、解释型的编程语言，最初由布兰登·艾奇（Brendan Eich）于1995年创建，并首次出现在网景浏览器中。JS的设计初衷是为Web页面提供动态交互功能，因此与HTML和CSS一起构成了Web的三大核心技术。随着时间的推移，JavaScript不断发展，成为如今最流行的编程语言之一。

ECMA

1997年，JavaScript正式通过ECMA-262标准化，成为ECMAScript（简称ES）。ECMAScript是一个基于JavaScript的规范，旨在统一和规范不同的JavaScript实现。此后，JavaScript的发展就与ECMAScript版本紧密相连，每个新版本都引入了新的特性和功能。目前流行的是ES6，也就是2015年发布的版本，也是大多数企业采用的。

Java与JS

Java与JavaScript虽然名字相似，但它们是两种不同的语言。Java是一种编译型的静态语言，主要用于开发企业级应用和移动应用，而JavaScript是一种动态语言，主要用于在网页中实现交互效果。两者之间并没有直接的关系，但因为Java在90年代的受欢迎程度，使得JavaScript的命名受到了影响。

Web工作关系

作为一个后端开发者，我们也是需要简单学习一下前端的知识，目前大多数企业都是采用前后端分离开发，我们应该重点学习后端部分。

JavaScript的引入方式

JavaScript可以通过两种主要方式引入到HTML文档中：

1.内联引入：

将JavaScript代码直接嵌入到HTML文件中，通常放置在<script>标签内。

2.外部引入：

将JavaScript代码写入外部文件中，然后在HTML中引入。这样做可以提高代码的复用性和维护性。


	/*三种输出方式  */
    window.alert('HELLo!');//网页弹窗
    document.write('HELLo');//写入html中
    console.log('hello'); //浏览器控制台输出
    {
    /* 变量 */
    var a = 20;  //var是 variable的缩写
    a = '张三';
    /* 
    JS大部分语法与Java类似，是弱类型的语言，因此类型不同也可以对同一变量赋值 
    var关键字定义变量的特点
    特点1.var定义出来的是全局变量
    特点2.可以重复定义变量名
    */
    }

    {
        let x = 20;
        alert(x);
        /* let是ES6中引入的，let用法与var类似都是用来定义变量的
        1.let定义的是局部变量
        2.let不能重复定义变量名
        */ 
    }
    /* ES6还引入了 const 关键字，定义只读变量 */

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<script src="./JS_code/demo1.js"></script>
	<title>js基础语法</title>
</head>
<body>
	<!-- JS,跨平台、面向对象的脚本语言 -->
	 <script>
		/* js有两种引入方式 */

	 </script>
	
	


</body>
</html>

JavaScript基础语法

1. 输出方式

JavaScript提供了3种方式来输出内容：

alert()：弹出警告框，显示信息。

alert("Hello, World!");

console.log()：在浏览器的控制台输出信息，适合调试使用。

console.log("这是一个调试信息");

document.write()：直接在HTML文档中写入内容，通常不推荐在页面加载之后使用。

document.write("这是一段文本");

2. 变量

JavaScript使用var、let和const声明变量：

var：用于声明可变变量，作用域为函数或全局。
let：用于声明块级作用域的变量。
const：用于声明常量，一旦赋值后不可修改。


	/*三种输出方式  */
    window.alert('HELLo!');//网页弹窗
    document.write('HELLo');//写入html中
    console.log('hello'); //浏览器控制台输出
    {
    /* 变量 */
    var a = 20;  //var是 variable的缩写
    a = '张三';
    /* 
    JS大部分语法与Java类似，是弱类型的语言，因此类型不同也可以对同一变量赋值 
    var关键字定义变量的特点
    特点1.var定义出来的是全局变量
    特点2.可以重复定义变量名
    */
    }

    {
        let x = 20;
        alert(x);
        /* let是ES6中引入的，let用法与var类似都是用来定义变量的
        1.let定义的是局部变量
        2.let不能重复定义变量名
        */ 
    }
    /* ES6还引入了 const 关键字，定义只读变量 */

3. 运算符与数据类型

JavaScript的运算符与Java种类似，有稍微不同

可以看到只是多了一个 === ，那么 === 和 == 有什么区别呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS运算符</title>
</head>
<body>
    <script>
        // JS运算符与Java运算符大致相同，但也有一些差异。
        /* ==  与 === 区别：
        1. == 运算符比较两个值是否相等，不论数据类型是否相同，如果值相等，则返回true，否则返回false。
        2. === 运算符比较两个值是否相等，且数据类型也相同，如果值相等且数据类型相同，则返回true，否则返回false。
          */
        {
            //转换为数字类型
          alert(parseInt('12A56'));//12
          alert(parseInt('A56'));//NaN
        }


        {
            //转换为boolean类型
            if(-1)    alert('只有0和NaN才为false，其他值都为true');//数字类型转换为boolean类型
            if("")    alert('空字符串转换为false，其他值都为true');//字符串类型转换为boolean类型
            if(" ")   alert('空格也是false');
            if(null)  alert('null转换为false');
            if(undefined)  alert('undefined转换为false');
        }
          

          




    </script>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS数据类型</title>
</head>
<body>
    <script>
        // JS 基本数据类型
        alert(typeof 8);//number
        alert(typeof 3.14);//number

        
        alert(typeof true);//boolean
        alert(typeof false);//boolean

        alert(typeof "HEllo!");//string
        alert(typeof 'A');//string

        alert(typeof null);//object
        var a;
        alert(typeof a);//未初始化会被归为,undefined


    </script>


    
</body>
</html>

JS是一种跨平台、面向对象的脚本语言，有了Java的基础，我们学习起来会非常轻松，下面是JS的基本数据类型。

4. 流程控制

JS流程控制与Java基本一致，我就不过多赘述了

JS函数

函数的定义与调用也非常简单，由于JS是弱类型的语言，可以不需要定义返回类型，不需要定义参数类型

主要有两种方式，通过 function 关键字来定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS函数</title>
</head>
<body>
    <script>
        // 函数定义
        function add(a, b) {
            return a + b;
        }

        var add2 = function(a, b) {
            return a + b;
        }

        // 函数调用
        var result = add(10, 20);
        console.log(result);
        alert(add2(10, 20));

    </script>
    
</body>
</html>