一、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. 推荐一款来电秀App 最来电

    推荐一款来电秀App 最来电 1 介绍 最来电app,本款软件是一款集合来电视频秀.动态壁纸.个性铃声等主题美化工具类软件. 2 特色功能介绍 来电视频秀:旨在丰富用户来电后接通前的等待过程,增强通话 ...

  2. Visual Studio 2017 无法启动，进程中却有devenv.exe运行的解决办法

    双击Visual Studio 2017,系统没有响应,在任务管理器中却发现devenv.exe 已经在运行. 解决办法:启动services.msc.找到Visual Studio Standard ...

  3. Beta冲刺(4/7)——2019.5.26

    作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Beta冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 队 ...

  4. AspNet Core结合Quartz使用定时任务且通过注入缓存或者配置参数

    一.经常在项目会用到定时任务同步数据或更新缓存等操作,在很久以前我们可能经常会用一个多线程或timer来做定时任务,这样能实现比较简单轻量级的任务:对于任务多且都调用频率不一样的任务,我们都会用到Qu ...

  5. DjangoDRF总结

    思维导图xmind文件:https://files-cdn.cnblogs.com/files/benjieming/DRF%E6%A8%A1%E5%9D%97.zip

  6. Logstash——multiline 插件，匹配多行日志

    本文内容 测试数据 字段属性 按多行解析运行时日志 把多行日志解析到字段 参考资料 在处理日志时,除了访问日志外,还要处理运行时日志,该日志大都用程序写的,比如 log4j.运行时日志跟访问日志最大的 ...

  7. 简单实现Shiro单点登录（自定义Token令牌）

    1. MVC Controller 映射 sso 方法. /** * 单点登录(如已经登录,则直接跳转) * @param userCode 登录用户编码 * @param token 登录令牌,令牌 ...

  8. git的clone

    在使用git来进行版本控制时,为了得一个项目的拷贝(copy),我们需要知道这个项目仓库的地址(Git URL). Git能在许多协议下使用,所以Git URL可能以ssh://, http(s):/ ...

  9. 【转】Git使用教程之基础篇

    Git使用教程 一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是 ...

  10. kubernetes部署spring cloud注册中心 Eureka

    系统环境 java JDK 1.8 Docker 18.09.6 kubernetes 1.16 创建Eureka Server 1.Maven引入相应的jar 引入 SpringBoot 做基础框架 ...