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 ...
随机推荐
- php脚本l导出mysq的blob格式数据-hex和unhex的用法
前言 之前我们介绍过使用PHP脚本导出sql语句到测试服中的流程和注意点, 之前有个问题还没有解决的,就是mysql中blob类型数据是导不成功的. 这次找到了解决方法,这里记录一下. 什么是blob ...
- 下载工具系列——Aria2 (几乎全能的下载神器)
一.介绍 说完了前面一堆BT/PT客户端,现在终于轮到Aria2了,关于这个我就不介绍太多了,自从百度限速以来我觉得这个快变成众所周知的了,我平时也收集了各种和Aria2相关的插件或者是辅助软件之类的 ...
- long 在不同操作系统下所占用的字节数
不同平台下C\C++数值数据类型长度如下: 类型 win32 win64 linux32 linux64 其中long类型和指针类型需要特别注意,编写跨平台的软件时尽量不要使用long类型,或者需要对 ...
- [转帖]linux lsof 用法简介
linux lsof 用法简介 https://www.cnblogs.com/saneri/p/5333333.html 1.简介: lsof(list open files)是一个列出当前系统打开 ...
- sql server获取格式化的当前日期
在SQL Server中获取格式化成yyyy-MM-dd的当前日期: ), ); -- 2019-06-17 首先我们知道getdate()函数是用来获取当前日期的,它返回的类型是datetime类型 ...
- Dart面向对象编程（二）
继承: person.dart: class Person{ String name; int age; String _birthday; bool get isAdult => age &g ...
- WPF程序集资源
WPF会将引用到的资源如图片.BAML文件等编译成二进制数据嵌入到已经编译了的程序集中. 下图是一个反编译后的程序目录结构: 那么,如何向项目中添加资源? 向项目中添加文件 设置生成操作(Build ...
- WebUploader 上传文件 错误总结
近日做文件上传,粗心的问题和技术不精的问题导致了很多的bug,大部分时间都是在找自己写出来的bug,近日总结一下使用 WebUploader 开启分片上传的使用方法以及注意事项 1.上传过程中,后续上 ...
- [世预赛] 中国vs菲律宾，第一场考验，国足力争三连胜，比分预测：3：0， 2：0，4：1
7比0大胜关岛,中国国家男子足球队在冲击2022卡塔尔世界杯的征途上收获两连胜,北京时间10月15日20点,中国男足将奔赴巴科洛德,客场挑战菲律宾男足,本场比赛也是中国男足在本次世预赛四十强赛阶段的第 ...
- windows配置flutter的注意点
参考官网配置:https://flutter.cn/docs/get-started/install/windows 注意点: 1. 配置好环境变量后,必须重启电脑才有效果(后面还有需要重启的,所以到 ...