本篇内容

  1. 简介
  2. 使用
  3. DOM

一、 简介

JavaScript 是世界上最流行的编程语言。

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JavaScript 是脚本语言。

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。

二、 使用

1.简单使用

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        alert("My First JavaScript");

    </script>

</head>

<body>

</body>

</html>

2.注释使用

JavaScript 不会执行注释。

我们可以添加注释来对 JavaScript 进行解释，或者提高代码的可读性。

（1）单行注释

单行注释以 // 开头。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

//        alert("My First JavaScript");

    </script>

</head>

<body>

</body>

</html>

（2）多行注释

多行注释以 /* 开始，以 */ 结尾。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        /*alert("My First JavaScript");

        alert("My First JavaScript");

        alert("My First JavaScript");

        alert("My First JavaScript");

        alert("My First JavaScript");

        alert("My First JavaScript");*/

    </script>

</head>

<body>

</body>

</html>

3.变量使用

变量是存储信息的容器。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        var x=2;

        var y=3;

        var z=x+y;

        alert(z)

    </script>

</head>

<body>

</body>

</html>

4.函数使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function myFunction(){

            document.getElementById("demo").innerHTML="My First JavaScript Function";

        }

</script>

</head>

<body>

    <h1>My Web Page</h1>

    <p id="demo">A Paragraph</p>

    <button type="button" onclick="myFunction()">Try it</button>

</body>

</html>

三、 DOM

1.什么是DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM （文档对象模型）。

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素。
  • JavaScript 能够改变页面中的所有 HTML 属性。
  • JavaScript 能够改变页面中的所有 CSS 样式。
  • JavaScript 能够对页面中的所有事件做出反应。

2.id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

var x=document.getElementById("intro");

3.标签名查找 HTML 元素

var y=x.getElementsByTagName("p");

4.类名查找 HTML 元素

var x=document.getElementsByClassName("left_float")

第十四篇：JavaScript的更多相关文章

  1. 解剖SQLSERVER 第十四篇 Vardecimals 存储格式揭秘（译）

    解剖SQLSERVER 第十四篇    Vardecimals 存储格式揭秘(译) http://improve.dk/how-are-vardecimals-stored/ 在这篇文章,我将深入研究 ...

  2. 第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  3. Python之路【第十四篇】：AngularJS --暂无内容-待更新

    Python之路[第十四篇]:AngularJS --暂无内容-待更新

  4. 【译】第十四篇 Integration Services：项目转换

    本篇文章是Integration Services系列的第十四篇,详细内容请参考原文. 简介在前一篇,我们查看了SSIS变量,变量配置和表达式管理动态值.在这一篇,我们使用SQL Server数据商业 ...

  5. 跟我学SpringCloud | 第十四篇：Spring Cloud Gateway高级应用

    SpringCloud系列教程 | 第十四篇:Spring Cloud Gateway高级应用 Springboot: 2.1.6.RELEASE SpringCloud: Greenwich.SR1 ...

  6. SpringBoot第二十四篇：应用监控之Admin

    作者:追梦1819 原文:https://www.cnblogs.com/yanfei1819/p/11457867.html 版权声明:本文为博主原创文章,转载请附上博文链接! 引言   前一章(S ...

  7. Egret入门学习日记 --- 第十四篇（书中 5.4~5.6节 内容）

    第十四篇(书中 5.4~5.6节 内容) 书中内容: 总结 5.4节 内容重点: 1.如何编写自定义组件? 跟着做: 重点1:如何编写自定义组件? 文中提到了重要的两点. 好,我们来试试看. 第一步, ...

  8. Spring Cloud第十四篇 | Api网关Zuul

    ​ 本文是Spring Cloud专栏的第十四篇文章,了解前十三篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring C ...

  9. Hibernate（十四篇）

    (一)Hibernate简介 (二)hibernate配置管理 (三)Hibernate对象-关系映射文件 (四)Hibernate API详解 (五)Hibernate一级缓存 (六)Hiberna ...

随机推荐

  1. Vim---配置实用的.vimrc文件

    配置自己电脑的vim,配置一个根据个人习惯使用的.vimrc文件.我的有以下功能等,读者可以根据自己的 个人喜好去配置自己的vim. 1.自动插入文件头 ,新建C.C++源文件时自动插入表头:包括文件 ...

  2. ABAP Table Control

    SAP中,Table Control是在Screen中用的最广泛的控件之一了,可以实现对多行数据的编辑.  简单来说,Table Control是一组屏幕元素在Screen上的重复出现,这就是它与普通 ...

  3. TCPIP协议编程：基于UDP协议的局域网聊天工具的研发

    任务目标 聊天器采用客户端/服务器(C/S)模式: 客户端利用UDP与服务器相连,客户端与客户端之间通过UDP相互通信: 服务器端具有服务器端口设置维护客户端个人信息,记录客户端状态,分配账号等: 客 ...

  4. 统计重复IP并排序

    #降序排列 sort ip20180623.log | uniq -c | sort -rn | more #可以输出到文件哦 sort ip20180623.log | uniq -c | sort ...

  5. 干货！一篇文章集合所有Linux基础命令，适合所有菜鸟学习和老手回顾！

    1 文件{ ls -rtl # 按时间倒叙列出所有目录和文件 ll -rt touch file # 创建空白文件 rm -rf 目录名 # 不提示删除非空目录(-r:递归删除 -f强制) dos2u ...

  6. Shell学习——Shell分类：登录shell和非登陆shell 交互shell和非交互shell

    1.从两个不同维度来划分,是否交互式,是否登录 2.交互式shell和非交互式shell 交互式模式:在终端上执行,shell等待你的输入,并且立即执行你提交的命令.这种模式被称作交互式是因为shel ...

  7. 移动端h5页面meta标签设置

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= ...

  8. python flask学习第2天 URL中两种方式传参

    新创建项目   自己写个url映射到自定义的视图函数 在url中传递参数 app.py from flask import Flask app = Flask(__name__) @app.route ...

  9. 430. Flatten a Multilevel Doubly Linked List

    /* // Definition for a Node. class Node { public: int val = NULL; Node* prev = NULL; Node* next = NU ...

  10. WPF Datagrid对鼠标单击进行响应，借助EventSetter

    在做的一个c#的项目中发现Datagrid没办法直接对鼠标单击进行响应, 调用MouseDown事件也需要点击某一行第二次才能响应. 所以借助EventSetter来简单的实现了一个. 界面部分的代码 ...