博客列表 >Javascript 入门

Javascript 入门

我是郭富城
我是郭富城原创
2020年05月20日 19:25:00791浏览

Javascript 入门

  • HTML 定义了网页的内容
  • CSS 描述了网页的布局
  • JavaScript 网页的行为

1. 什么是 JavaScript

  • JavaScript 被设计用来向 HTML 页面添加交互行为。
  • JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
  • JavaScript 由数行可执行计算机代码组成。
  • JavaScript 通常被直接嵌入 HTML 页面。
  • JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。

2.Java 和 JavaScript 是相同的吗

  • 不同!
  • 在概念和设计方面,Java 和 JavaScript 是两种完全不同的语言。
  • Java(由太阳微系统公司开发)很强大,同时也是更复杂的编程语言,就像同级别的 C 和 C++。

3. JavaScript 用法

3.1 内部调用

  • HTML 中的脚本必须位于 <script></script>标签之间。
  • 脚本可被放置在 HTML 页面的 <body><head> 部分中。

    那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

  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>Document</title>
  7. <script>
  8. alert("这是我的第一个JavaScript");
  9. </script>
  10. </head>
  11. <body>
  12. <script>
  13. document.write("<h1>这是一个标题</h1>");
  14. document.write("<p>这是一个段落</p>");
  15. </script>
  16. </body>
  17. </html>


3.2 外部的 JavaScript

  • 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
  • 外部 JavaScript 文件的文件扩展名是.js
  • 如需使用外部文件,请在<script> 标签的 "src" 属性中设置该.js文件:

    外部 javascript 文件不使用 <script> 标签,直接写 javascript 代码。

3.3 JavaScript 注释

  • 不是所有的 JavaScript 语句都是”命令”。双斜杠 // 后的内容将会被浏览器忽略:
    // 我不会执行
  • 多行注释以/*开始,以*/ 结尾。
  1. <script>
  2. /* 下面的这些代码会输出 一个标题和一个段落 并将代表主页的开始 */
  3. alert("这是我的第一个JavaScript");
  4. </script>

3.4 JavaScript 字母大小写

  • JavaScript 对大小写是敏感的。
  • 当编写JavaScript语句时,请留意是否关闭大小写切换键。
  • 函数 MyfunctionMyFunction是不同的。
  • 同样,变量 myVarMyVar也是不同的。

3.5 JavaScript 变量

  • 变量必须以字母开头
  • 变量也能以 $_符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(yY 是不同的变量)
  • 在 JavaScript 中创建变量通常称为”声明”变量。
  • 使用 var 关键词来声明变量:
    var name="Nicola";
  • 在一条语句中声明很多变量。该语句以var 开头,并使用逗号分隔变量即可:
    var name="Nicola", age=18, job="boss";

    在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined

3.6 JavaScript 输出

  • JavaScript 可以通过不同的方式来输出数据:
  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

3.7 JavaScript 作用域

  • 在 JavaScript 中, 对象和函数同样也是变量。在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。

JavaScript 局部作用域

  • 变量在函数内声明,变量为局部作用域。局部变量:只能在函数内部访问。
  1. // 此处不能调用 Name 变量
  2. function myFunction() {
  3. var Name = "Volvo";
  4. // 函数内可调用 Name 变量
  5. }

JavaScript 全局变量

  • 变量在函数外定义,即为全局变量。全局变量: 网页中所有脚本和函数均可使用
  1. var Name = " Volvo";
  2. // 此处可调用 Name 变量
  3. function myFunction() {
  4. // 函数内可调用 Name 变量
  5. }

JavaScript 变量生命周期

  • JavaScript 变量生命周期在它声明时初始化。局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁。

3.8 JavaScript 变量提升

  • 变量未定义之前就可以使用
  1. <script>
  2. // 变量声明提升: 变量未定义之前就可以使用了
  3. // 声明
  4. var email;
  5. // 访问在前
  6. console.log(email);
  7. // 声明在后
  8. // var email = "admin@php.cn";
  9. // 初始化,第一次赋值
  10. email = "admin@php.cn";
  11. console.log(email);
  12. // var username;
  13. // console.log(username);
  14. </script>

变量提升:函数声明和变量声明总是会被解释器悄悄地被”提升”到方法体的最顶部。

4. 总结

JavaScript 的出现,可以使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交互的表达能力。从而基于 CGI 静态的 HTML 页面将被可提供动态实时信息,并对客户操作进行反应的 Web 页面取代。JavaScript 脚本正是满足这种需求而产生的语言。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议