javascript-基础（一）-CSDN博客

本文链接：https://blog.csdn.net/2301_80115241/article/details/142671957

JavaScript介绍

JavaScript （是什么？）

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

JavaScript的组成（有什么？）

ECMAScript(基础语法):

规定了js基础语法核心知识

比如：变量、分支语句、循环语句、对象等等

Web APIs :

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

JavaScript 书写位置

1.内部 JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面

原因是浏览器会按照代码在文件中的顺序加载 HTML。

如果先加载的 JavaScript 期望修改其下方的 HTML，那么它可能由于 HTML 尚未被加载而失效

2. 外部 JavaScript

代码写在以.js结尾的文件里

语法： 通过script标签，引入到html页面中

<body>
    <!--通过src引入外部js文件-->

    <script src="my.js"></script>    
//这个用得比较多 外部javaScript让代码更有序，易复用，反正就是好
</body>

3. 内联 JavaScript

代码写在标签内部

语法：

注意：此处作为了解即可，但是后面 vue框架会用这种模式

<button onclick="alert('逗你玩')">点我变帅</button>

JavaScript 的注释

单行注释

符号： //

作用： //右边这一行的代码会被忽略

快捷键： ctrl + /

<script>
    //我这段话，会被忽略，我只是注释，让你明白代码
    //一次只能注释一行
</script>

块注释

符号： /* */

作用： 在/* 和 */ 之间的所有内容都会被忽略

快捷键： shift + alt + A

<script>
    /*这是多行注释
    的写法
    很多行，怎么注释
    都有面*/
</script>

JavaScript 结束符

结束符

作用： 使用英文的 ; 代表语句结束

实际情况： 实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置

现状： 在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符

约定： 为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求）

输入和输出语法

<script>
    //输出语法
    document.write('要输出的<strong>内容</strong>')
    //：向body内输出内容
    //注意：如果输出的内容写的是标签，也会被解析成网页元素
</script>

<script>
    //页面弹出警示对话框
    alert('要输入的内容')
    
    //控制台输出语法，程序员调试使用  基本上这个很常用，骚噶
    console.log('控制台打印')
</script>

//输入语法
prompt('请输入您的姓名：')

//显示一个对话框，用来提示用户输入文字

JavaScript 代码执行顺序：

按HTML文档流顺序执行 JavaScript代码

alert() 和 prompt() 它们会跳过页面渲染先被执行

字面量

/*
我们工资是： 10000 此时 10000 就是 数字字面量

'我喜欢代码' 字符串字面量

  [] 数组字面量 

  {} 对象字面量
*/

变量

变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子

变量基本使用

1. 声明变量：

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

//let 变量名  声明一个 age 变量
let age
//age 变量赋值为 18      18为字面量
age = 18
//输出变量
alert(age)

//通过变量名age 获得变量里面的数据

//还有个 变量初始化     

let age = 18

//当不知道给啥时，一般给 0 或 '' 或 true/false 或 [] 或 {} 或 null等

3.更新变量:

//声明了一个 age 变量，同时存放一个数据 18
let age = 18
//变量数据发生变化 变为19
age = 19
//页面输出结果为 19
document.write(age)

注意：let 不可以多次声明一个变量

4. 声明多个变量：

//多个变量中间用逗号隔开
let age = 18, uname = '俸涛'

//但不推荐哦 最好这样

let age = 18
let uname = '俸涛'

变量本质

内存： 计算机中存储数据的地方，相当于一个空间

变量本质： 是程序在内存中申请的一块用来存放数据的小空间

变量命名规则与规范

1. 规则：

不能用关键字

关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等

只能用下划线、字母、数字、 $ 组成，且数字不能开头

字母严格区分大小写，如 Age 和 age 是不同的变量

2. 规范：

起名要有意义

遵守小驼峰命名法

第一个单词首字母小写，后面每个单词首字母大写。例：userName

变量拓展 let 和 var 的区别

var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let

数组（Array）

好处：数组可以保存多个数据

//1.声明语法
let 数组名 = [数据1,数据2,...,数据n-1,数据n]

//2.例子
let names = ['小明','小刚','小红','小李']

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

//取值语法  数组名[下标]
let names = ['小明','小刚','小红','小李']
console.log(names[0)]   //小明
console.log(names[2] )  //小红
console.log(names.length )   //4

元素： 数组中保存的每个数据都叫数组元素

下标： 数组中数据的编号

长度： 数组中数据的个数，通过数组的 length 属性获得

javascript-基础（一）

JavaScript介绍

JavaScript 书写位置

1.内部 JavaScript

2. 外部 JavaScript

3. 内联 JavaScript

JavaScript 的注释

JavaScript 结束符

输入和输出语法

字面量

变量

变量基本使用

变量本质

变量命名规则与规范

数组（Array）

常量

数据类型

类型转换

javascript-基础 （一）

JavaScript介绍

JavaScript 书写位置

1.内部 JavaScript

2. 外部 JavaScript

3. 内联 JavaScript

JavaScript 的注释

JavaScript 结束符

输入和输出语法

字面量

变量

变量基本使用

变量本质

变量命名规则与规范

数组（Array）

常量

数据类型

类型转换

javascript-基础（一）