简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > JavaScript之代码结构和变量声明细则
Blogger Information
Blog 7
fans 0
comment 0
visits 5834
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JavaScript之代码结构和变量声明细则
董家大少
Original
583 people have browsed it

JavaScript之代码结构和变量声明细则

代码结构

JavaScript是一种执行在前端浏览器的嵌套在html文档中的脚本语言

调用方式：

在html代码中进行调用有两种方式：

  1. 第一种方式

    1. <script>
    2. // 中间是Javascript的代码内容
    3. </script>

    2.第二种方式

    1. <script src="这里是js文件的位置">
    2. //如果存在src属性，那么标签中的所有代码都会失效，只会引入src路径中的js文件
    3. </script>

    变量和函数的声明细则

  2. 变量的声明与命名

    变量的声明

用var来声明变量，变量的命名严格区分大小写

例如：我们现在来声明，一个变量。

Eg：

  1. var email = "php@php.cn"

现在我们来更新一个变量

  1. email = "123123@qq.com"

在第一次声明时需要加var关键字,而且js变量可以用中文命名

  • 变量声明的提升
  1. console.log(email)
  2. var email = "123123@qq.com";

在这当中是由于先打印变量然后此声明变量。理应得到未定义的输出，但实际执行时，将声明变量提升至打印之前，固打印出来的是变量存在但值为空。

  1. 函数的声明与命名、更新

  • 函数的命名也严格的区分大小写

  • 下面我们来写一个函数

    1. function write()
    2. {
    3. alert('我是php中文网的学生')
    4. }

    脚本属性和属性功能

属性名称 功能
defer 实现代码的延迟加载，避免js代码中出现死循环，而导致下面代码无法解析
async 实现外部代码的异步加载，html和js代码的同时解析，防止外资源过大，导致加载缓慢

作用域

JavaScript和PHP相似，都有两种作用域

1.函数作用域

函数作用域中可以直接访问全局

2.外部作用域（非函数作用域）

外部作用域不能够访问函数作用域的变量

连接符

php中的连接符是”.”,但是javascipt中的连接符是”+”

具体案例运行效果展示

  1. 代码 - 顺序加载
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>js-第一节</title>
    7.  <script>
    8.    alert("我是PHP中文网的一个学生。");
    9.  </script>
    10. </head>
    11. <body>
    12.  <h2>我是PHP中文网的一个学生。</h2>
    13. </body>
    14. </html>
    效果 - 顺序加载

    2.代码 - 延迟加载
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.  <meta charset="UTF-8" />
    5.  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.  <title>js-第一节</title>
    7.  <script defer>
    8.    alert("我是PHP中文网的一个学生。");
    9.  </script>
    10. </head>
    11. <body>
    12.  <h2>我是PHP中文网的一个学生。</h2>
    13. </body>
    14. </html>

效果 - 延迟加载

3.代码 - 异步加载

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>js-第一节</title>
  7.     <script async>
  8.       alert("我是PHP中文网的一个学生。");
  9.     </script>
  10.   </head>
  11.   <body>
  12.     <h2>我是PHP中文网的一个学生。</h2>
  13.   </body>
  14. </html>

效果 - 异步加载

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：看来你对js的基本语法知道了
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！