本篇内容

  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. CSS-DOM

    在所有的产品设计中,选择最适用的工具去解决问题是最基本的原则. ①使用(X)HTML去搭建文档的结构. ②使用CSS 去设置文档的呈现效果. ③使用DOM脚本去实现文档的行为. 文档中的每个元素都是一 ...

  2. Data Warehouse 简介

    数据仓库定义 数据仓库之父Bill Inmon在1991年出版的“Building the Data Warehouse”一书中所提出的定义被广泛接受:数据仓库(Data Warehouse)是一个面 ...

  3. LeetCode-177:第N高的薪水

    第N高的薪水与第二高的薪水,解题思路是一样的,只要对LeetCode-176的SQL做一下变形,便可以满足这题,详见:https://www.cnblogs.com/zouqf/p/10282392. ...

  4. 在github上查找star最多的项目

    如何在github上查找star最多的项目 在search中输入stars:>1 就可以查找所有有star的项目,然后右上角根据自己的需要筛选 当我输入stars:>10000的时候,就会 ...

  5. get请求中文乱码问题

    Get中文乱码解决 Get请求类型: <form action="${pageContext.request.contextPath}/addArtical.action"  ...

  6. HTML+CSS : 笔记整理(3 移动端布局简单了解)

    流体布局:宽度用百分比,计算真实宽度用函数 : width: calc(25% - 4px); box-sizing: 1.content-box:默认计算方式 ,宽度和高度分别应用到元素的内容框.在 ...

  7. &、|、~与&&、||、！ 谬误

    按位运算符(&.|.~)的操作是被默认为一个二进制的位序列,分别对其中的每个位进行操作. 逻辑运算符(&&.||.!)将操作数当成非真及假,非假及真.通常就是将0当成假,非0即 ...

  8. Codeforces Round #462 (Div. 2) C DP

    C. A Twisty Movement time limit per test 1 second memory limit per test 256 megabytes input standard ...

  9. Description POJ1703

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  10. 修改 cmd 字体为 Consolas

    windows 下的 cmd 窗口默认的字体有点难看,长时间使用操作 node.js 有点小疲劳,可以修改注册表替换字体为 Consolas,并且可以全屏 cmd 窗口,代码如下: Windows R ...