Javascript入门||基础篇

发布时间：2024年01月22日

定义

一种运行在客户端（浏览器）的编程语言，实现人机交互效果

作用

  • 网页特效（监听用户的一些行为让网页做出对应的反馈）
  • 表单验证（针对表单数据的合法性进行判断）
  • 数据交互（获取后台数据，渲染到前端）
  • 服务器编程（node.js）

组成

  • ECMAScript：基础语法，如变量，循环，对象等
  • Web APi
  • DOM：操作文档，比如对页面元素进行移动
  • BOM：操作浏览器，比如页面弹窗，检测窗口宽度，储存数据到浏览器等

书写位置

内部JavaScript

  • 直接写在html标签里，用script标签包住
  • 规范：写在/body上面
  • 原因在于浏览器会按照代码在文件中的顺序加载HTML，如果先加载的javascript期望修改其下方的HTML，那么它可能由于HTML尚未被加载而失败

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>
??????? // 页面弹出警示框
??????? alert('你好，js')
??? </script>
</body>
</html>

外部JavaScript

新建一个以.js文件结尾的文件

内联JavaSript

代码写在标签内部

HTML
<body>
??? <button οnclick="alert('逗你玩--')">点击领奖</button>
?</body>
?

输出语法

语法1：document.write

作用：向body内输出内容

注意：如果输出的内容写的是标签，也会被解析成网页元素

HTML
<!DOCTYPE html>
<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>
??? <script>
??????????? document.write('hey')
??????????? // 输出hello world?
??????????? document.write("<h1>hello world</h1>")
??? </script>
</body>
</html>

语法2：alret

页面弹出警告对话框

语法3：console.log

控制台输出语法，程序员调试使用

输入语法

Prompt

作用：显示一个对话框，对话框中包含一条文字信息，用来提示用户输入文字

注：alert和prompt会跳过页面渲染先被执行

变量

定义

变量是计算机中用来存储数据的容器，它可以让计算机变得有记忆

注意：变量不是数据本身，仅仅是一个用于存储数据的容器

基本使用

声明

JavaScript
let 变量名

声明变量由两部分构成：声明关键字，变量名

变量声明要有意义

小驼峰命名法

第一个单词首字母小写，第二个单词首字母大写，userName

赋值

JavaScript
let age = 18

等号两边要有空格

数组

Array

JavaScript
let arr = [数据1，数据2，数据3]

常量

Const

常量不允许重新赋值

运算，判断与循环

注：运算，判断与循环的语法与C相同

并且支持自增和自减

JavaScript
<!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>
??????? let a = 1, b = 1
??????? for(let i = 1; i<10; i++)
??????? {
??????????? for(let j=1;j<=i ;j++)
??????????????? {
??????????????????? document.write(j+'*'+i+'='+i*j+'&nbsp;&nbsp;')
??????????????? }
??????????????? document.write('<br>')
??????? }
??? </script>

</body>
</html>

输出结果

数组

数组的组成

数组做为数据的集合，它的单元值可以是任意数据类型

CSS
?
? <script>
??? // 6. 数组单值类型可以是任意数据类型
?
??? // a) 数组单元值的类型为字符类型
??? let list = ['HTML', 'CSS', 'JavaScript']
??? // b) 数组单元值的类型为数值类型
??? let scores = [78, 84, 70, 62, 75]
??? // c) 混合多种类型
??? let mixin = [true, 1, false, 'hello']
? </script>

数组长度属性

数组长度属性

重申一次，数组在 JavaScript 中并不是新的数据类型，它属于对象类型。

?
? <script>
??? // 定义一个数组
??? let arr = ['html', 'css', 'javascript']
??? // 数组对应着一个 length 属性，它的含义是获取数组的长度
??? console.log(arr.length) // 3
? </script>

操作数组

数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：

  1. push 动态向数组的尾部添加一个单元
  1. unshit 动态向数组头部添加一个单元
  1. pop 删除最后一个单元
  1. shift 删除第一个单元
  1. splice 动态删除任意单元

使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。

JavaScript
<script>
??? // 定义一个数组
??? let arr = ['html', 'css', 'javascript']
?
??? // 1. push 动态向数组的尾部添加一个单元
??? arr.push('Nodejs')
??? console.log(arr)
??? arr.push('Vue')
?
??? // 2. unshit 动态向数组头部添加一个单元
??? arr.unshift('VS Code')
??? console.log(arr)
?
??? // 3. splice 动态删除任意单元
??? arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
??? console.log(arr)
?
??? // 4. pop 删除最后一个单元
??? arr.pop()
??? console.log(arr)
?
??? // 5. shift 删除第一个单元
??? arr.shift()
??? console.log(arr)
? </script>

文章来源:https://blog.csdn.net/qq_74854522/article/details/135757880
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章