一、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. matlab实现主成分分析（遥感图像处理）

    数据说明:采用的数据源是从别人那里拷的2012年全年的Sea Surface Temperature(海标温度,SST)数据,一直想找一份比较好的主成分分析数据,也没找到. Matlab自身有主成分分 ...

  2. [原创]浅谈在创业公司对PMF的理解

    [原创]浅谈在创业公司对PMF的理解 在创业时,大多数人都常谈一个词叫"MVP“,但PMF谈的比较少,PMF在创业公司尤为重要,以下谈谈个人一些看法. 1.什么是PMF? 创业公司:一种是找 ...

  3. 第一次实验报告：使用Packet Tracer分析HTTP数据包

    目录 1 实验目的 2 实验内容 3. 实验报告 第一次实验报告:使用Packet Tracer分析HTTP数据包 1 实验目的 熟练使用Packet Tracer工具.分析抓到的HTTP数据包,深入 ...

  4. 大话设计模式Python实现-策略模式

    策略模式(Strategy Pattern):它定义了算法家族,分别封装起来,让他们之间可以相互替换,此模式让算法的变化,不会影响到使用算法的客户. 下面是一个商场活动的实现 #!/usr/bin/e ...

  5. 【已解决】C#导入音频文件

    C#导入音频文件,找到Resources.resx,再进行导入. 直接添加文件到Resources是不能使用的. 解决的具体步骤: 引用音频文件核心代码: //播放背景音乐 SoundPlayer m ...

  6. 第十九节：Asp.Net Core WebApi基础总结和请求方式

    一. 基础总结 1.Restful服务改造 Core下的WebApi默认也是Restful格式服务,即通过请求方式(Get,post,put,delete)来区分请求哪个方法,请求的URL中不需要写方 ...

  7. centos7.x下环境搭建(一)--yum方式安装mysql5.7

    前两天因为数据库被黑客攻击,导致数据被删除,数据库被损坏,系统重新安装了一下,所以环境也需要重新再搭一遍,包括mysql.nodejs.git.nginx和redis的安装.由于之前安装的mysql安 ...

  8. laravel 一些好用的GitHub项目包

    链接地址:好用的GitHub包

  9. 02 .NET CORE 2.2 使用OCELOT -- 路由

    继续学习.NET CORE 2.2 使用OCELOT https://www.jianshu.com/p/05ccf87a3091 https://www.jianshu.com/p/585396dc ...

  10. C#自定义消息函数，需要一个TextBox，一个委托，直接上代码；

    private delegate void de_OutputMessage(string str); public void OutputMessage(string str) { if (text ...