JavaScript快速入门

2024-04-09 18:00:15 阅读数 686

一、基础语法
（1）快速入门
创建第一个htm页面，开发第一个JavaScript交互应用

获取用户点击行为，用户通过鼠标点击了按钮之后，发生了一些操作行为；使用HTML/css无法实现
点击行为发生后，浏览器中弹出了一个窗口（浏览器软件内置），使用HTML/css无法实现
总结：需要用户和网页进行交互时，使用JavaScript编程语言来实现需要的功能，单纯通过HTML/css无法实现

<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>
</head>
<body>
  <!-- 页面中添加一个按钮 -->
  <button id="btn" onclick="show()">点击我试试</button>

  <!-- 页面中添加一段脚本代码 -->
  <script>
    function show() {
      alert("讨厌，点我干吗...")
    }
  </script>
</body>
</html>

（2）代码位置

标签行内
页面内嵌
外部关联文件

<html lang="zh">
<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>
</head>
<body>
  <!-- 1、标签内嵌 -->
  <button onclick="alert('我是行内js代码')">点击我试试</button>

  <hr>

  <!-- 2、页面内嵌 -->
  <button id="btn" onclick="show()">页面内嵌</button>
  <!-- 网页中编写一对script标签，js代码写在标签内部 -->
  <script>
    // 编写了js代码
    function show() {
      alert("页面内嵌代码执行.")
    }
  </script>

  <!-- 3、外部文件关联 -->
  <hr>
  <button onclick="handler()">外部文件关联</button>
  <!-- script标签通过src属性，引入一个外部js文件; script标签必须成对出现 -->
  <script src="./js/comm.js"></script>
</body>
</html>

（3）注释:

行内注释:：主要针对一行或者多行代码的关键性描述
多行注释：主要针对一行或者多行复杂的代码，进行详细描述
文档注释:一般出现在js文件中，描述文档开发作者、开发时间、功能描述等作用

<html lang="zh">
<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>
</head>
<body>
  <script>
    // 1、单行注释
    // 一般针对一行或者多行代码进行关键性作用描述
    // 页面中弹出一个警告对话框, alert(额勒特)，浏览器内置警告对话框
    // alert("hello javascript!")

    /*
      2、多行注释
      一般针对一行或者多行关键性代码（功能比较复杂、条目较多）添加注释内容
      prompt(普让普特)，浏览器内置交互对话框，接受用户输入数据
      括号中第一个数据：对话框中提示的文本内容
      括号中第二个数据：对话框中默认输入的内容
    */
   prompt("请输入您的年龄:", 0)
   
  </script>
</body>
</html>

（4）解释型执行
JavaScript是一门解释型语言：代码执行过程，解释一行，执行一行！

<html lang="zh">
<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>
</head>
<body>
  <script>
    // 1、解释执行
    // 解释一行代码，执行一行代码
    alert("我是第一行代码")
    alert("我是第二行代码")
    alert("我是第三行代码")

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

（5）字面量

字面量：描述的是代码的字面意思，一般情况在JavaScript中表示字面意思的数据，如数字、字符串等等

<!DOCTYPE html>
<html lang="zh">
<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>
</head>
<body>
  <script>
    // 字面量：代码的字面意思，代码字面表示的数据
    // 12、1
    // 字面量，可以在代码中直接使用
    // alert(3.1415)
    alert(175)
    // alert(85)

    // 存在的问题：不能重复利用
    alert("饮料的价格：" + 5.00)
    alert("两瓶的价格：" + 5.00*2)  // 使用5.00字面量，需要重新编写
  </script>
</body>
</html>

（6）变量
变量(Variable)：存储数据的容器，可以在代码中存储数据，然后通过变量名称重复使用这些数据

<html lang="zh">
<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>
</head>
<body>
  <script>
    // 变量：Variable，表示临时存储数据的容器
    // 使用var关键字声明一个变量
    var pi = 3.1415926   // 使用变量pi存储了一个圆周率
    alert("圆周率: " + pi) // 通过变量名称，使用变量中存储的数据

    var price = 5.00  // 使用price(单价)存储一瓶饮料单价
    alert("饮料价格：" + price)
    alert("两瓶饮料价格：" + price * 2)

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

（7）运算符
数据存储的时候，经常会用到赋值运算符

符号	描述
`=`	将等号右侧的数据，存储到左侧的变量中

反映生活中交易行为的运算，主要是算术运算！

符号	描述
`+`	加法运算
`-`	减法运算
`*`	乘法运算
`/`	除法运算

二、快速入门
（1）页面弹窗
JavaScript可以操作三种浏览器弹窗

警告对话框
确认对话框
交互对话框

alert("警告信息，一种重要的提示信息，暂停代码的向下执行，直到用户点击确定")

// 确认对话框
var res = confirm("针对用户的一些危险行为，进行提示，让用户确认自己的选择")
alert("用户的选择：" + res) // res: true / false表示真假两种行为

// 交互对话框
var pmp = prompt("提示信息，提示用户输入的文本内容", "默认数据")

（2）数据输出
JavaScript中提供了多种语法，可以将数据输出到指定的位置

alert(xxx)将数据以弹窗的形式展示出来，经常用于代码错误测试打印数据
document.write(xxx)：将数据在网页中输出，不论是错误调试或者项目开发，都严禁使用
console.log(xxx)：将数据在浏览器的控制台中输出展示，使用频率最高

var name = "大牧"
// 查看name变量中的数据
// 1.alert()
alert(name)     // 页面弹窗，阻止代码向下继续执行，一般很少使用(影响页面加载效率)

// 2.document.write()
document.write(name)    // 网页中直接输出数据，严禁使用；影响网页布局

// 3.console.log()
console.log("姓名数据：", name) // 代码错误排查时，使用较多

（3）页面交互
JavaScript在浏览器中开发，主要用于服务页面；通过代码获取标签、操作标签内容、操作标签样式

document.getElementById('btn')：获取页面中id="btn"的一个标签
div.innerHTML = xxx：设置标签中的文本内容
div.style.color = 'red'：设置标签中的文本颜色

<html lang="zh">
<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>
</head>
<body>
  <div id="box">赳赳老秦，共赴国难</div>
  <button id="btn">按钮：设置div中的内容</button>
  
  <script>
    // 获取页面标签
    var _box = document.getElementById("box")
    var _btn = document.getElementById("btn")

    // 查看标签
    // console.log(_box)
    // console.log(_btn)

    // 查看标签中的内容
    // console.log(_box.innerHTML)
    // console.log(_btn.innerHTML)

    // 设置页面内容
    // 固定语法：点击_btn对应的按钮，执行后面function(){}花括号中的代码
    _btn.onclick = function() {
      // 修改div中的内容
      _box.innerText = "血不流干，死不休战"
      // 修改div的样式
      _box.style.width = "300px"
      _box.style.height = "200px"
      _box.style.backgroundColor = "orangered"
      _box.style.color = "white"
      _box.style.lineHeight = "200px"
      _box.style.textAlign = "center"
    }
  </script>
</body>
</html>```

（5） 字面量

（5）字面量