关于前端:JavaScript基础入门全解析上

JavaScript 根底语法
什么是 JavaScript（简称 js）

首先要理解前端页面的组成（前端页面的三层构造）

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

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

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

JavaScript

是一种基于对象和事件驱动并具备绝对安全性的客户端脚本语言。同时也是一种宽泛用于客户端 Web 开发的脚本语言，罕用来给 HTML 网页增加动静性能，比方响应用户的各种操作。

JavaScript 的组成

ECMASCRIPT: 定义了 javascript 的语法标准, 形容了语言的根本语法和数据类型
BOM (Browser Object Model): 浏览器对象模型

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

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 属性上 -->
<a href="javascript:alert('hello world');"> 点击一下试试 </a>

非 a 标签
● 如果是非 a 标签，自身不具备这个跳转的能力，咱们就须要认为的赋予它这个能力

● 先学第一个能力，onclick，这是一个点击的行为

● 在值的地位, 间接书写 js 代码就行, 不须要 javascript:; 了

● 写在标签上的 js 代码须要依附事件（行为）来触发

<!-- 写在其余元素上 -->
<div onclick="alert(' 我是一个弹出层 ')"> 点一下试试看 </div>

<!--
注：onclick 是一个事件（点击事件），当点击元素的时候执行前面的 js 代码
-->

内嵌式 JS 代码（不举荐）
● 内嵌式的 js 代码会在页面关上的时候间接触发

<!-- 在 html 页面书写一个 script 标签，标签外部书写 js 代码 -->
<script type="text/javascript">
    alert('我是一个弹出层')
</script>

<!--
    注：script 标签能够放在 head 外面也能够放在 body 外面
-->

● 留神 :

script 标签对内的代码不须要任何行为, 关上页面就会执行
script 标签对原则上能够书写在页面的任意地位

● 举荐放在 head 标签的开端或者 body 标签的开端

● 目前咱们举荐放在 body 的开端

一个页面原则上能够书写任意多个 script 标签

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

外链式 JS 代码（举荐）
● 外链式代码是书写在一个 .js 的文件内

● 外链式 js 代码只有引入到了 html 页面中，就会在页面关上的时候间接触发（解析）

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

<!-- 我是一个 html 文件 -->

<!-- 通过 script 标签的 src 属性，把写好的 js 文件引入页面 -->
<script src="index.js"></script>

<!-- 一个页面能够引入多个 js 文件 -->
<script src="index1.js"></script>
<script src="index2.js"></script>
<script src="index3.js"></script>

● 留神 :

外链式 js 代码不须要任何行为, 关上页面就会执行
script 标签对原则上能够书写在页面的任意地位

● 举荐放在 head 的开端或者 body 的开端

● 目前举荐放在 body 的开端

一个页面能够书写任意多个 script 标签

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

一个 script 标签当你书写了 src 属性当前, 示意你要把他当做外链式应用

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

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

一个页面中能够同时存在外链式和行内式，执行的程序还是依照你 script 标签的书写地位先关，写在下面的先执行

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 根底 - 引入形式 </title>
</head>
<body>
  <!-- 外联模式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <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 = 30
        var 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基础入门全解析上

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）