一、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. [转载]3.3 UiPath鼠标操作图像的介绍和使用

    一.鼠标(mouse)操作的介绍 模拟用户使用鼠标操作的一种行为,例如单击,双击,悬浮.根据作用对象的不同我们可以分为对元素的操作.对文本的操作和对图像的操作 二.鼠标对图像的操作在UiPath中的使 ...

  2. git合并不同仓库下的分支

    1.把lib合并到pro $ git remote -v origin git@192.168.1.1:lib.git (fetch) origin git@192.168.1.1:lib.git ( ...

  3. C# HTTP系列10 form表单的enctype属性

    系列目录     [已更新最新开发文章,点击查看详细] 在ASP.NET编程中经常遇到下面的代码片段,将人员信息以表单方式提交到后台程序并保存到服务器与数据库中. <form action=&q ...

  4. 企业应用向ASP.NET Core迁移

    有人说.NET在国内的氛围越来越不行了,看博客园文章的浏览量也起不来.是不是要转Java呢? 没有必要扯起语言的纷争,Java也好C#都只是语言是工具,各有各的使用场景.以前是C#非开源以及不能在Li ...

  5. 基于Laravel框架下使用守护进程supervisor实现定时任务（毫秒）

    本篇文章给大家带来的内容是关于基于Laravel框架下使用守护进程supervisor实现定时任务(毫秒),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 公司需要实现X分钟内每隔Y秒 ...

  6. jdk1.8 Stream 特性总结

    不是数据结构 它没有内部存储,它只是用操作管道从 source(数据结构.数组.generator function.IO channel)抓取数据. 它也绝不修改自己所封装的底层数据结构的数据.例如 ...

  7. Scala 系列（五）—— 集合类型综述

    一.集合简介 Scala中拥有多种集合类型,主要分为可变的和不可变的集合两大类: 可变集合: 可以被修改.即可以更改,添加,删除集合中的元素: 不可变集合类:不能被修改.对集合执行更改,添加或删除操作 ...

  8. C#工作常用关键字

    1.throw //抛出throw new Exception("获取数据失败") //抛出异常 2.Ticks //long类型的数,表示时间,一个以0.1纳秒为单位的时间戳,/ ...

  9. Python: 截屏

    最近项目中想实现截屏功能,使用的笔记本是高清屏,实际屏幕设置成了150%,所以在截屏的时候遇到个各种问题. 最开始使用PIL ImageGrab来截取屏幕,如果本来是100%的设置没有问题,能截取到全 ...

  10. Markdown温故知新(4)：更多扩展语法及HTML

    1.强调(删除 & 高亮) 2.脚注(注脚) 3.数学公式 4.更多扩展语法 5.终极扩展之内嵌 HTML 5.1.文本修饰类标签 5.2.内容排版类标签 5.3.图片及多媒体标签 5.4.锚 ...