html--前端javascript初识
一、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初识的更多相关文章
- 前端-----JavaScript 初识基础
JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句.for语句等. DOM:操作网页上的 ...
- 前端JavaScript规范
前端JavaScript规范 http://www.imooc.com/article/1402 http://greengerong.com/blog/2015/05/09/qian-duan-ja ...
- 实例演示 kino.razor (前端 Javascript 模板工具,Razor 风格)的使用
前言 对于习惯了 ASP.NET MVC Razor 模板引擎的人来说,比如我,一直在寻找前端 Javascript 端的 Razor 模板工具.这之前,我也了解到很多Javascript 端的模板工 ...
- 在C#后端处理一些结果然传给前端Javascript或是jQuery
在C#后端处理一些结果然传给前端Javascript或是jQuery,以前Insus.NET有做过一个例子<把CS值传给JS使用 >http://www.cnblogs.com/insus ...
- 前端javascript模板
doT.js——前端javascript模板引擎问题备忘录 我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的 ...
- Web前端-JavaScript基础教程上
Web前端-JavaScript基础教程 将放入菜单栏中,便于阅读! JavaScript是web前端开发的编程语言,大多数网站都使用到了JavaScript,所以我们要进行学习,JavaScript ...
- 前端javascript
前端 JavaScript javaScript----数据库jquery $(function(){ 执行代码 }); 基本语法:$(selector).action() $(" ...
- Fundebug前端JavaScript插件更新至1.2.0
摘要: Fundebug的前端JavaScript错误监控插件更新至1.2.0:支持监控WebSocket连接错误:修复了监控unhandledrejection错误的BUG,即未用catch处理的P ...
- Fundebug前端JavaScript插件更新至1.8.2,修复2个小BUG
摘要: 修复2个BUG,请大家及时更新. Fundebug前端异常监控服务 Fundebug是专业的程序异常监控平台,我们JavaScript插件可以提供全方位的异常监控,可以帮助开发者第一时间定位各 ...
- Web前端-JavaScript基础教程下
Web前端-JavaScript基础教程下 <script>有6个属性: async对外部脚本有效,可以用来异步操作,下载东西,不妨碍其他操作. charset为src属性指定字符集. d ...
随机推荐
- 使用Docker构建Jekyll框架网站
使用Docker构建Jekyll框架网站 使用dockerfile构建apache + jekyll 目录 Jekyll基础镜像 构建Jekyll基础镜像 Apache镜像 构建Jekyll Apac ...
- jQuery学习路线&review
学习途径:http://www.w3school.com.cn/jquery/index.asp 路线图 转载自:https://www.cnblogs.com/lanren2017/p/723720 ...
- 2.1:CGPROGRAM
文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 前言 经过前面两个章节的铺垫,我们对渲染以及Unity Shaderlab ...
- Vue.js 源码分析(十四) 基础篇 组件 自定义事件详解
我们在开发组件时有时需要和父组件沟通,此时可以用自定义事件来实现 组件的事件分为自定义事件和原生事件,前者用于子组件给父组件发送消息的,后者用于在组件的根元素上直接监听一个原生事件,区别就是绑定原生事 ...
- Appium+python自动化(七)- 初识琵琶女Appium(千呼万唤始出来,犹抱琵琶半遮面)- 上(超详解)
简介 “千呼万唤始出来,犹抱琵琶半遮面”,经过前边的各项准备工作,终于才把appium这位琵琶女请出来.那么下边就由宏哥给各位看官.小伙伴们和童鞋们来引荐这位美女(帅哥).这一篇主要是对前边的内容做一 ...
- 三、hexo+github搭建个人博客的主题配置
更换博客主题 主题可参考:https://hexo.io/themes/ hexo默认主题:Landscape 示例主题:Next 下载Next主题 进入Blog所在目录,输入下载命令 #进入Blog ...
- Lock+Condition实现机制
前言:大部分多线程同步场景,在功能和性能层面,synchronized可以满足,少部分场景Lock可以满足,dubbo的源码也符合这个比例,需要使用到Condition的场景极少,整个dubbo源码中 ...
- ASP.NET MVC中Log4Net记录错误日志的使用
第一.在管理NuGet程序包 =>下载 Log4Net 第二.在web.config配置Log4Net 1:在<configuration>节点下 <configSection ...
- 检测代码潜在bug和质量之SonarQube
参数使用 项目分析参数可以在多个地方设置,继承关系如下: 全局分析参数,通过Web UI设置,作用于所有项目(配置–>通用–>通用中设置) 项目分析参数,通过WebUI设置,覆盖全局参数( ...
- Flask基于websocket的简单聊天室
1.安装gevent-websocket pip install -i https://pypi.tuna.tsinghua.edu.cn/simple/ gevent-websocket 2.cha ...