学习JavaScript第一天

文章目录

1.JavaScript简介
2.JavaScript编写的位置
3.JavaScript注释和结束符
- 3.1的两种注释方式
- 3.2JavaScript结束符注意要点
4.js的输入输出语句与字面量
5.JavaScript数据类型
6.数组的使用
- 6.1数组的语法
- 6.2数组的使用
7.案例4：用户订单信息案例

1.JavaScript简介

JavaScript 是一种广泛使用的编程语言，主要用于增强网页的交互性。它由 Brendan Eich 在 1995 年在 Netscape 公司开发，最初被设计为一种简单的脚本语言，用于在客户端浏览器中运行。以下是 JavaScript 的一些关键特点和用途：

客户端脚本语言：JavaScript 主要运行在用户的浏览器中，可以与 HTML 和 CSS 一起工作，控制网页的行为和外观。
动态交互：通过 JavaScript，开发者可以创建动态更新的网页内容，响应用户的操作，如点击按钮、填写表单等。
异步编程：JavaScript 支持异步编程，可以通过 AJAX（Asynchronous JavaScript and XML）技术与服务器进行数据交换，而不需要重新加载整个页面。
事件驱动：JavaScript 可以响应各种事件，如鼠标点击、键盘输入、页面加载等，使得网页能够实时响应用户的操作。
跨平台：几乎所有现代浏览器都支持 JavaScript，使其成为跨平台开发的优选语言。
单线程：JavaScript 在浏览器中是单线程的，但可以通过事件循环和回调函数实现非阻塞的异步操作。
ECMAScript 标准：JavaScript 的标准由 ECMAScript 定义，ECMAScript 是一个脚本语言的规范，JavaScript 是实现这一规范的语言之一。
现代框架和库：有许多流行的 JavaScript 框架和库，如 React、Angular、Vue.js 等，它们提供了更高级的功能和更简单的开发方式。
服务器端运行：虽然最初是为客户端设计的，但通过 Node.js 等技术，JavaScript 也可以在服务器端运行，处理后端逻辑和数据库操作。
全栈开发：JavaScript 可以用于从前端到后端的全栈开发，使得开发者可以使用同一种语言开发整个应用程序。
总之，JavaScript 是一种非常灵活且功能强大的语言，广泛应用于网页开发、移动应用开发、桌面应用开发以及服务器端开发。

2.JavaScript编写的位置

2.1.内部JavaScript

直接写在html文件里，用script标签包住
规范：script标签写在上面
拓展：alert('你好，js)页面弹出警告对话框。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

        <!--内部js-->

<script>

    //页面弹出警示框

    alert('你好，js')

</script>

</body>

</html>

注意事项:
我们将script放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载HTM果先加载的」JavaScript期望修改其下方的HTML,那么它可能由于HTML尚未被加载而失效。因此，将JavaScript代码放在HTML页面的底部附近通常是最好的策略。

2.2外部JavaScript

代码写在以.js结尾的文件里
语法：通过script标签，引入到html页面中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

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

</body>

</html>

注意事项

script标签中间无需写代码，否则会被忽略！
外部的vaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML也会更加易读，因此这是个好的习惯。

2.3内联JavaScript

代码写在标签内部

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button onclick="alert('逗你玩的')">点击我月薪过万</button>

</body>

</html>

3.JavaScript注释和结束符

3.1的两种注释方式

单行注释：//
多行注释：/* * /

3.2JavaScript结束符注意要点

结束符是：
英文分号：;
结束符可以省略吗：
yes

4.js的输入输出语句与字面量

4.1js的输入输出语句

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户,这便是一次输入和输出的过程。

4.1.1输出语句

//语法1

document.write('这是一个输出语句')

作用：向body输出内容
注意：这个输出语句也可以解析标签

console.log('控制台打印')

作用：控制台打印语法，程序员调试使用

4.1.2输入语句

prompt('请输入你的姓名')

作用：显示一个对话框，对话框包含一条文字信息

4.2js的字面量

在计算机科学中，字面量(literal)是在计算机中描述事/物

5.JavaScript数据类型

5.1变量

5.1.1变量是什么？

计算机中用来存储数据的“容器”，简单理解是一个个的盒子。

5.1.2变量的基本使用

声明变量

let 变量名

声明变量有两部分构成：声明关键字、变量名（标识）
let即关键字(lt:允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义)变量的词语
2. 变量的赋值
赋值操作符 =

let age

age = 18

document.write(age)

声明多个变量

let age = 18,name = 'chengfu shi'

5.1.3案例1：输入姓名并输出

<script>

    let name = prompt('请输入你的姓名')

    document.write(name)

</script>

5.1.4 案例2：交换两个变量的值

<script>

    let num1 = 20

    let num2 = 10

    let temp = num1

    num2 = num1

</script>

5.2变量的本质

内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间

5.3案例3：输出用户的信息

<script>

    let name = prompt('请输入你的姓名')

    let age = prompt('请输入你的年龄')

    let mail = prompt('请输入你的性别')

    document.write(name,age,mail)

</script>

5.4let和var的区别

在较I旧的avaScript,使用关键字var来声明变量，而不是let。
vr现在开发中一般不再使用它，只是我们可能再老版程序中看到它。
let为了解决var的一些问题。
var声明：

可以先使用在声明（不合理）
var声明过的变量可以重复声明（不合理）
比如变量提升、全局变量、没有块级作用域等等

5.5常量

概念：使用const声明的变量称为“常量”。
使用场景：当某个变量永远不会改变的时候，就可以使用const来声明，而不是let。
命名规范：和变量一致

const G = 9.8

document.write(G)

5.6数据类型

number数字型
string字符串型
boolean布尔型
undefined未定义型
nul空类型
object对象

let age = 18    //数字型

let str = 'JavaScript'  //字符串型

let bool = true //布尔型

6.数组的使用

数组(Array)一一种将一组数据存储在单个变量名下的优雅方式。

6.1数组的语法

lat 数组名 = ['数据1','数据2']

数组是按顺序保存，所以每个数据都有自己的编号
计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
在数组中，数据的编号也叫索引或下标

6.2数组的使用

let arr = ['liudehua','zhengxueyou','limig']

document.write(arr[0])

7.案例4：用户订单信息案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>用户订单信息</title>

    <style>        h2{

            text-align: center;

        }

        table{

            border-collapse: collapse;

            height: 80px;

            margin: 0 auto;

        }

        th{

            padding: 5px 30px;

        }

        table,th,td{

            border: 1px solid #000;

        }

    </style>

</head>

<body>

    <h2>订单确认</h2>  

</body>

<script>  

    let price = prompt('请输入商品的价格')

    let number = prompt('请输入商品的数量')

    let nums = price * number

    let alocade = prompt('请输入地址')  

    document.write(`

    <table>        <tr>            <th>商品名称</th>

            <th>商品价格</th>

            <th>商品数量</th>

            <th>总价</th>

            <th>收货地址</th>

        </tr>        <tr>            <td>小米青春版plus</td>

            <td>${price}</td>

            <td>${number}</td>

            <td>${nums}</td>

            <td>${alocade}</td>

        </tr>    </table>    `)

</script>

</html>`