一、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. java8 HashTable 原理

    HashTable原理 Hashtable是基于陈旧的Dictionary类的,HashMap是Java 1.2引进的Map接口的一个实现.Hashtable中的方法是同步的,而HashMap方法(在 ...

  2. HTML+css基础 Text文本属性

    Text文本属性: 1.颜色  color color:red 2.文本缩进 text-indent 属性值 数字+px: text-indent:10px: 3.文本修饰 text-decorati ...

  3. GET请求的请求参数最大长度

    在HTTP规范RFC-2616中有这样一段描述: The HTTP protocol does not place any a priori limit on the length of a URI. ...

  4. golang 学习笔记 -- struct interface的使用

    一个 interface 类型定义了一个方法集做接口. 区分goalng的方法和函数 func go() { fmt.Println('go to home') } 这是函数 type car str ...

  5. 【spring】【spring boot】获取系统根路径，根目录，用于存储临时生成的文件在服务器上

    今日份代码: private static final String UPLOAD_TEMP_FILE_NAME = "测试商品数据.xlsx"; /** * 获取临时文件路径 * ...

  6. mosquitto 常用命令

    原文:https://www.cnblogs.com/smartlife/articles/10182136.html 常用命令 订阅主题 mosquitto_sub -h 192.168.0.1 - ...

  7. 初识AspNet Core中的标识Identity

    AspNet Core中的标识Identity,是用于Web应用程序的成员身份验证系统. 最方便的引入办法是在创建MVC或Pages的Web应用时,直接选择相应的身份验证系统.如图: 如果选择的是“个 ...

  8. K8S CoreDNS部署失败，发现的一个问题

    K8S CoreDNS部署失败,查看错误日志,提示如下 root >> kubectl get all --all-namespaces -o wide root >> kub ...

  9. Bootstrap3-导航

    Bootstrap 导航 1. 定义导航组件 基本结构: <!-- 基本导航组件 --> <ul class="nav"> <li class=&qu ...

  10. 数据库xp_cmdshell使用

    首先也开启组件. sp_configure reconfigure go sp_configure reconfigure go 删除本地文件,注意是删除数据库所在的服务器的本地文件. exec ma ...