网站导航
> 文章列表 > 新手入门JavaScript看这篇就够了~

新手入门JavaScript看这篇就够了~

网友: 文章列表 2024-03-22 05:11:30

新手入门JavaScript看这篇就够了~

一、什么是JavaScript（简称js）

1.首先要了解前端页面的组成（前端页面的三层结构）

  • HTML 表示了你的页面内有什么，组成页面的骨架 （结构层）

  • CSS 表示了你的页面中每一个内容是什么样子的（样式层）

  • JavaScript（简称js） 表示了你的页面中每一个内容如何发生变化, 有什么行为内容（行为层）

2.JavaScript

是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常用来给HTML网页添加动态功能，比如响应用户的各种操作。

 二、JavaScript的组成

1.ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型

2.BOM (Browser Object Model): 浏览器对象模型

有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如：弹出框、浏览器跳转、获取分辨率等

3.DOM (Document Object Model): 文档对象模型

有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如：增加个 div，减少个 div，给 div 换个位置等

总结：JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果

 三、JavaScript的执行环境

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行JavaScript 代码，JavaScript代码的书写位置和 css 一样，我们的 js 也可以有多种方式书写在页面上让其生效，js 也有多种方式书写，分为行内式， 内嵌式，外链式。

第一段 JS 代码，在开始之前, 我们先来学习第一段 js 代码

alert("hello world")

作用 : 

在浏览器出现一个弹出框, 弹出框内显示的内容就是小括号内书写的文本

注意 : 

  • 小括号内的内容如果不是纯数字内容, 需要被引号包裹(单引号或双引号都可以)

  • 行内式 JS 代码（不推荐） a标签 因为a标签有自己的跳转行为，这个是这个标签本身就有的，当我们点击的时候会自动跳转到指定的页面

  • 我们只要在a标签的herf属性的位置写上javascript:;就不会跳转

  • 我们在冒号和分号之间写上js代码，就会执行我们写的这个js代码。

<a href="javascript:alert('hello world');">点击一下试试</a>

非a标签 

如果是非a标签，本身不具备这个跳转的能力，我们就需要认为的赋予它这个能力，先学第一个能力，onclick，这是一个点击的行为，在值的位置, 直接书写 js 代码就行, 不需要 javascript:; 了，写在标签上的 js 代码需要依靠事件（行为）来触发。

<div onclick="alert('我是一个弹出层')">点一下试试看</div>

内嵌式 JS 代码（不推荐）

内嵌式的 js 代码会在页面打开的时候直接触发

<script type="text/javascript">alert('我是一个弹出层')
</script>

注意 : 

1.script 标签对内的代码不需要任何行为, 打开页面就会执行

2.script 标签对原则上可以书写在页面的任意位置

推荐放在 head 标签的末尾或者 body 标签的末尾

目前我们推荐放在 body 的末尾

3.一个页面原则上可以书写任意多个 script 标签

会按照从上到下的顺序依次执行每一个 script 标签中的代码

外链式 JS 代码（推荐）

  • 外链式代码是书写在一个 .js 的文件内

  • 外链式 js 代码只要引入到了 html 页面中，就会在页面打开的时候直接触发（解析）

  • 新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面

<script src="index.js"></script><script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

注意 :

1.外链式 js 代码不需要任何行为, 打开页面就会执行

2.script 标签对原则上可以书写在页面的任意位置

推荐放在 head 的末尾或者 body 的末尾

目前推荐放在 body 的末尾

3.一个页面可以书写任意多个 script 标签

会按照从上到下的顺序依次执行每一个 script 标签

4.一个 script 标签当你书写了 src 属性以后, 表示你要把他当做外链式使用

那么此时就不能在当做内嵌式使用了, 写在标签对内的内容没有意义了

只要你写了 src 属性, 不管值的位置是否书写地址, 内嵌式都没有意义了

5.一个页面中可以同时存在外链式和行内式，执行的顺序还是按照你script标签的书写位置先关，写在上面的先执行

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 基础 - 引入方式</title>
</head>
<body><script src="demo.js">// 此处的代码会被忽略掉！！！！// 不管你有没有写demo.js。// 只要看到 src 属性浏览器就会当做外链式来解析。// 你写在 script 标签中的代码就不起作用了alert(千锋欢迎您);</script>
</body>
</html>

 JS中的注释

学习一个语言, 先学习一个语言的注释, 因为注释是给我们自己看的, 也是给开发人员看的，写好一个注释, 有利于我们以后阅读代码，JavaScript 支持两种形式注释语法：单行注释、多行注释。

单行注释

一般就是用来描述下面一行代码的作用，可以直接写两个 / ，也可以按 ctrl + /。

<!DOCTYPE html>
<html lang="en">
<head>...<title>基础-注释</title>
</head>
<body><script>// 这种是单行注释的语法// 一次只能注释一行// 可以重复注释alert('嗨，欢迎来千锋学习前端技术！');</script>
</body>
</html>

多行注释

一般用来写一大段话，或者注释一段代码，可以直接写 /* */ 然后在两个星号中间写注释，各个编辑器的快捷键不一样，vscode 是 Alt + shift + a。

<!DOCTYPE html>
<html lang="en">
<head>...<title>基础-注释</title>
</head>
<body><script>/*这是多行注释的语法*//*注释的代码不会执行alert('我是一个弹出层')alert('我是一个弹出层')*/alert('欢迎您的到来')</script>
</body>
</html>

变量（重点）

变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】（数据）

变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据，也就是说，我们向内存中存储了一个数据，然后要给这个数据起一个名字，为了是我们以后再次找到它

语法：var 变量名 = 值

定义（声明）变量及赋值

声明(定义)变量有两部分构成：声明关键字、变量名（标识）

  • var : 定义变量的关键字, 告诉浏览器, 我要定义一个变量了

  • 空格 : 必须写, 区分 关键 和 变量名 的

  • 变量名 : 你自己起的一个名字

  • = : 赋值符号, 把右边的内容, 给到左边的变量

  • 值 : 你给你定义的变量赋的是什么值

<!DOCTYPE html>
<html lang="en">
<head>...<title>基础-声明和赋值</title>
</head>
<body><script>// 语法: var 名字 = 值var age = 18// var 关键字 所谓关键字是系统提供的专门用来声明（定义）变量的词语// age 即变量的名称，也叫标识符</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>...<title>基础-声明和赋值</title>
</head>
<body><script>//   1. 定义不赋值//     => 语法: var x//     => 准备一个变量, 以后使用, 暂时先不进行赋值var x</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>...<title>基础-声明和赋值</title>
</head>
<body><script>//   2. 定义并赋值//     => 语法: var x = 100//     => 准备一个变量的同时, 并且给他赋值为某一个数据var x = 100</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>...<title>基础-声明和赋值</title>
</head>
<body><script>//   3. 一次性定义多个变量不赋值//     => 语法: var x, x2, x3, x4, ...//     => 同时定义多个变量, 都不进行赋值var x, x1, x2</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>...<title>基础-声明和赋值</title>
</head>
<body><script>//   4. 一次性定义多个变量并赋值//     => 语法: var x = 10, x2 = 20, x3 = 30, ...var x = 10, x1 = 20, x2 = 30</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>...<title>基础-声明和赋值</title>
</head>
<body><script>//   5. 一次性定义多个变量, 有的赋值有的不赋值//     => 语法: var x = 10, x2, x3 = 30var x = 10, x1, x2 = 20</script>
</body>
</html>

 变量命名规则和规范

变量命名规则(你必须遵守) 

  • 一个变量只能由 字母(a-z, A-Z) 数字(0-9) 下划线(_) 美元符($) 组成 

  • 一个变量不能由 数字 开头 

  • 变量严格区分大小写 

  • 不要使用关键字或保留字

变量命名规范(建议你遵守) 

  • 变量语义化 

  • 驼峰命名法 

  • 不使用中文

变量使用注意事项

  • 允许声明和赋值同时进行

  • 允许同时声明多个变量并赋值

  • JavaScript 中内置的一些关键字不能被当做变量名

  • 一个变量名只能存储一个值

  • 当再次给一个变量赋值的时候，前面一次的值就没有了

变量名称区分大小写（JS 严格区分大小写）

  • JS 的输入和输出

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

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

输出

以弹窗的形式展示给用户

// 以弹出层的形式展示给我们
alert('你好 世界')

在页面中展示给用户

// 直接展示到我们的页面上
document.write('hello world')

在控制台展示 一般用户看不到

// 在控制台展示出来
console.log('大家好');

输入

用户选择框

// 这个选择框返回的是一布尔值
var name = confirm('你是程序员吗')
// 打印我们拿到的结果(也就是布尔值)
console.log(name)

用户输入框

// 这个输入框返回的是用户输出的内容
var name = prompt('请输入你的姓名')
// 我们拿到的结果就是用户输入的结果
console.log(name)

推荐入门教程：

黑马程序员JavaScript全套教程，Web前端必学的JS入门教程，零基础JavaScript入门_

黑马程序员前端JavaScript入门到精通全套视频教程，javascript核心进阶ES6语法、API、js高级等基础知识和实战教程_

 

黑马程序员JavaScript核心教程，前端基础教程，JS的DOM BOM操作教程_i

 

网络标签：

相关问题