一、JavaScript简介

　　JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言，有了JavaScript，可使网页变得生动。使用它的目的是与HTML超文本标识语言、Java 脚本语言一起实现在一个网页中链接多个对象，与网络客户交互作用，从而可以开发客户端的应用程序。它是通过嵌入或调入在标准的HTML语言中实现的。

JavaScript的优点：

1.简单性 　

　　JavaScript是一种脚本编写语言，它采用小程序段的方式实现编程，像其它脚本语言一样，JavaScript同样已是一种解释性语言，它提供了一个简易的开发过程。它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

2.动态性　

　　JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页中执行了某种操作所产生的动作，就称为“事件”。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

3.跨平台性 　

　　JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可以正确执行。

4.节省CGI的交互时间　

　　随着WWW的迅速发展有许WWW服务器提供的服务要与浏览者进行交流，确浏览的身份、需服务的内等等，这项工作通常由CGI/PERL编写相应的接口程序与用户进行交互来完成。很显然，通过网络与用户的交互过程一方面增大了网络的通信量，另一方面影响了服务器的服务性能。服务器为一个用户运行一个CGI时，需要一个进程为它服务，它要占用服务器的资源(如CPU服务、内存耗费等)，如果用户填表出现错误，交互服务占用的时间就会相应增加。被访问的热点主机与用户交互越多，服务器的性能影响就越大。

　　JavaScript是一种基于客户端浏览器的语言，用户在浏览中填表、验证的交互过程只是通过浏览器对调入HTML文档中的JavaScript源代码进行解释执行来完成的，即使是必须调用CGI的部分，浏览器只将用户输入验证后的信息提交给远程的服务器，大大减少了服务器的开销。

二、JavaScript的用法：

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

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

　　3、注意：每一行代码写完要写一个分号来分割开，谨记

2.1、JavaScript代码存在形式

 <!-- 方式一：引入外部的javascript文件， -->

 //注意：外部的js脚本不能包含 <script> 标签

 <script type="text/javascript" src="xxx.js"></script>

 <!-- 方式二：脚本放置在<head>和<body>部分中 -->

 <script type="text/javascript">

     Js代码内容

 </script>

2.2、JavaScript代码存放位置

　　1、HTML的head中

　　2、HTML的body代码块底部(推荐)

　　由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。

2.3、实例一：脚本放置在<head>块内

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript用法1</title>

<!--    脚本放置在<head>块内-->

    <script type="text/javascript">

        function show() {

            document.getElementById("show").innerText="我在努力学习javascript";

        }

    </script>

</head>

<body>

    <p id="show">my name is yusheng_liang</p>

    <button type="button" onclick="show()">点我一下</button>

</body>

</html>

实例二：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript用法1</title>

</head>

<body>

    <p id="show">my name is yusheng_liang</p>

    <button type="button" onclick="show()">点我一下</button>

<!--    脚本放置在<body>块内,放到了页面代码的底部-->

    <script type="text/javascript">

        function show() {

            document.getElementById("show").innerText="我在努力学习javascript";

        }

    </script>

</body>

</html>

三、JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

JavaScript 可以通过不同的方式来输出数据：

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

3.1、使用 window.alert() 弹出警告框实例。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript输出</title>

</head>

<body>

    <h1>这是我的第一个web页面</h1>

    <script type="text/javascript">

        window.alert(+);

    </script>

</body>

</html>

结果图示：

3.2、使用 innerHTML 写入到 HTML 元素。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript输出</title>

</head>

<body>

    <p id="show">my name is yusheng_liang</p>

    <button type="button" onclick="show()">点我一下</button>

<!--    脚本放置在<body>块内,放到了页面代码的底部-->

    <script type="text/javascript">

        function show() {

            document.getElementById("show").innerText="我在努力学习javascript";

        }

    </script>

</body>

</html>

3.3、使用 document.write() 方法将内容写到 HTML 文档中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>javascript输出</title>

</head>

<body>

    <h1>这是我的第一个web页面</h1>

    <script type="text/javascript">

        document.write(Date())

    </script>

</body>

</html>

3.4、使用 console.log() 写入到浏览器的控制台。

如果您的浏览器支持调试，你可以使用 console.log() 方法在浏览器中显示 JavaScript 值。

浏览器中使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>javascript输出</title>

 </head>

 <body>

     <h1>这是我的第一个web页面</h1>

     <script type="text/javascript">

        a = 5; 
　　　　　　b = 6; 
　　　　　　c = a + b; 
　　　　　　console.log(c); 

     </script>

 </body>

 </html>

四、javascript注释

　　在JS中也有注释，//表示单行注释，/* ...注释内容...  */表示多行注释，此注释仅在Script块中生效

// 输出标题：

document.getElementById("myH1").innerHTML="欢迎来到我的主页";

// 输出段落：

document.getElementById("myP").innerHTML="这是我的第一个段落。";
/*

下面的这些代码会输出

一个标题和一个段落

并将代表主页的开始

*/

document.getElementById("myH1").innerHTML="欢迎来到我的主页";

document.getElementById("myP").innerHTML="这是我的第一个段落。";

html--前端javascript初识的更多相关文章

  1. 前端-----JavaScript 初识基础

    JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:操作网页上的 ...

  2. 前端JavaScript规范

    前端JavaScript规范 http://www.imooc.com/article/1402 http://greengerong.com/blog/2015/05/09/qian-duan-ja ...

  3. 实例演示 kino.razor （前端 Javascript 模板工具，Razor 风格）的使用

    前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...

  4. 在C#后端处理一些结果然传给前端Javascript或是jQuery

    在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...

  5. 前端javascript模板

    doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...

  6. Web前端-JavaScript基础教程上

    Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...

  7. 前端javascript

    前端 JavaScript   javaScript----数据库jquery $(function(){ 执行代码   });  基本语法:$(selector).action() $(" ...

  8. Fundebug前端JavaScript插件更新至1.2.0

    摘要: Fundebug的前端JavaScript错误监控插件更新至1.2.0:支持监控WebSocket连接错误:修复了监控unhandledrejection错误的BUG,即未用catch处理的P ...

  9. Fundebug前端JavaScript插件更新至1.8.2，修复2个小BUG

    摘要: 修复2个BUG,请大家及时更新. Fundebug前端异常监控服务 Fundebug是专业的程序异常监控平台,我们JavaScript插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各 ...

  10. Web前端-JavaScript基础教程下

    Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...

随机推荐

  1. 初始socket模块和巧解粘包问题

    1.什么是socket? 两个进程如果需要进行通讯最基本的一个前提能够唯一的标示一个进程,在本地进程通讯中我们可以使用PID来唯一标示一个进程,但PID只在本地唯一,网络中的两个进程PID冲突几率很大 ...

  2. 手写Tomcat服务器

    预备知识 编写服务器用到的知识点 1) Socket 编程2) HTML3) HTTP 协议4) 反射5) XML 解析6) 服务器编写 Socket编程 https://www.cnblogs.co ...

  3. Zookeeper原理图

  4. vertica单节点故障恢复 Startup Failed, ASR Required

    测试环境的vertica是单节点的,无法做到故障自动恢复,需要手工处理.案例如下: 发现5433端口连接不上,vertica挂了,手工运行admintools,重新启动vertica,仍然失败,提示: ...

  5. First Step in luogu.

    2019-11-21 21:58:32 在洛谷正式迈出第一步!!

  6. RabbitMQ的构架

    初识rabbitMQ RabbitMQ 是一个由 Erlang 语言开发的 AMQP 的开源实现. AMQP :Advanced Message Queue,高级消息队列协议.它是应用层协议的一个开放 ...

  7. ElasticSearch6.3.2 集群做节点冷(warm) 热(hot) 分离

    拿一个小规模的5节点ES集群做冷热分离尝试,它上面已经有60多个索引,有些索引按月.每月生成一个索引,随着数据的不断写入,历史数据(只需保留三个月数据,三个月之前的数据视为历史数据)越来越占磁盘空间和 ...

  8. vue样式绑定、事件监听、表单输入绑定、响应接口

    1.样式绑定 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错 ...

  9. 《 .NET并发编程实战》阅读指南 - 第9章

    先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.

  10. Vector线程安全，ArrayList非线程安全

    http://baijiahao.baidu.com/s?id=1638844080997170869&wfr=spider&for=pc Vector线程安全,ArrayList非线 ...