000 在什么位置写js代码
一：介绍
1.DOM
2.节点分类
节点及其类型:
1). 元素节点
2). 属性节点: 元素的属性, 可以直接通过属性的方式来操作.
3). 文本节点: 是元素节点的子节点, 其内容为文本.
二：JS的位置
0.新建静态web项目
1.第一种方式
在 body 节点之前编写 js 代码, 但需要利用 window.onload 事件,
该事件在当前文档完全加载之后被触发, 所以其中的代码可以获取到当前文档的任何节点.
2.程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//onload的使用方式
window.onload=function(){
var bt=document.getElementsByTagName("button")[0];
bt.onclick=function(){
alert("have click on");
}
}
</script>
</head>
<body>
<button>click on me</button>
</body>
</html>
3.运行效果
4.第二种方式
直接在html代码程序里写js。
缺点:
①. js 和 html 强耦合, 不利用代码的维护
②. 若 click 相应函数是比较复杂的, 则需要先定义一个函数, 然后再在 onclick 属性中完成对函数的引用, 比较麻烦
5.程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button onclick="alert('hello JS 2')"></button>
</body>
</html>
6.运行结果
7.第三种方式
将js直接放在html文档的后部分，这样在html文档加载完成后再加载js。
但是，不符合习惯。
8.程序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button>click on me</button>
<script type="text/javascript">
var bts=document.getElementsByTagName("button");
bts[0].onclick=function(){
alert("hello js 3");
}
</script>
</body>
</html>
9.运行结果
三：问题
1.这里缺少的第四种方式
将js与html代码分开的第四种方式，有空将补充完整。
000 在什么位置写js代码的更多相关文章
- html文件在head标签中引入js地址和直接写js代码，所用时间是不同的，因为引入js地址，文件加载的时候需要通过通讯协议去解析地址，读取外部文件
html文件在head标签中引入js地址和直接写js代码,所用时间是不同的,因为引入js地址,文件加载的时候需要通过通讯协议去解析地址,读取外部文件
- Asp.net mvc怎么在razor里写js代码
我试图在Razor里写JS代码,但是不行 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 3 ...
- 在wxml中直接写js代码(wxs)
我们在h5开发中,很多时候要在html中写到js代码,这个很容易实现.但是在微信小程序开发中,是不能直接在wxml中写js代码的,因此就有了wxs.在wxml中用wxs代码,有以下几种方式(在小程序文 ...
- 手写js代码（一）javascript数组循环遍历之forEach
注:原文地址http://blog.csdn.net/oscar999/article/details/8671546 我这里是仿照学习! 1.js的数组循环遍历 ①数组的遍历首先想到的是for()循 ...
- 在HTML标签的事件后面直接写JS代码
<input type="button" onclick="document.getElementdByTagName('div')[0].innrtHTML='S ...
- 找到你的位置（JS在页面中的位置）最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分
找到你的位置(JS在页面中的位置) 我们可以将JavaScript代码放在html文件中任何位置,但是我们一般放在网页的head或者body部分. 放在<head>部分 最常用的方式是在页 ...
- 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！【转载+整理】
原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...
- 最新的JavaScript核心语言标准——ES6，彻底改变你编写JS代码的方式！
原文地址 迁移到:http://www.bdata-cap.com/newsinfo/1741515.html 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和f ...
- 也谈谈规范JS代码的几个注意点
也谈谈规范JS代码的几个注意点 写JS代码差不多也有两年了吧,从刚开始的“初生牛犊不怕虎”乱写一通到后来也慢慢知道去规范一下自己写的代码.这种感觉就像是代码是你的作品,你希望它保持一份不仅干净而且也优 ...
随机推荐
- 【BZOJ1081】[SCOI2005]超级格雷码（搜索）
[BZOJ1081][SCOI2005]超级格雷码(搜索) 题面 BZOJ 洛谷 题解 找个规律吧,自己随便手玩一下,就按照正常的顺序枚举一下,发现分奇偶位考虑正序还是逆序就好了. #include& ...
- svn:重命名文件之后,不允许提交
1.错误代码 org.apache.subversion.javahl.ClientException: Illegal target for the requested operation svn: ...
- Apache POI - Excel
基于模板的EXCEL报表组件ExcelUtils:http://blog.csdn.net/hanqunfeng/article/details/4834875 http://blog.csdn.ne ...
- JeeSite 4.x 树形结构的表设计和用法
有些同仁对于 JeeSite 4 中的树表设计不太了解,本应简单的方法就可实现,却写了很多复杂的语句和代码,所以有了这篇文章. 在 JeeSite 4 中的树表设计我还是相对满意的,这种设计比较容易理 ...
- bzoj千题计划181：bzoj1878: [SDOI2009]HH的项链
http://www.lydsy.com/JudgeOnline/problem.php?id=1878 之前用莫队做的,现在用树状数组 把每种数的第一个出现位置在树状数组中+1 nxt[i] 记录i ...
- Codeforces Round #477 (rated, Div. 2, based on VK Cup 2018 Round 3) E 贪心
http://codeforces.com/contest/967/problem/E 题目大意: 给你一个数组a,a的长度为n 定义:b(i) = a(1)^a(2)^......^a(i), 问, ...
- Linux命令（二）关机重启
- ASP.NET MVC学习笔记-----Filter(2)
接上篇ASP.NET MVC学习笔记-----Filter(1) Action Filter Action Filter可以基于任何目的使用,它需要实现IActionFilter接口: public ...
- js调试系列: 源码定位与调试[基础篇]
js调试系列目录: - 如果看了1, 2两篇,你对控制台应该有一个初步了解了,今天我们来个简单的调试.昨天留的三个课后练习,差不多就是今天要讲的内容.我们先来处理第一个问题:1. 查看文章下方 推荐 ...
- ASP.NET私有构造函数作用
一.私有构造函数的特性 1.一般构造函数不是私有或者保护成员,但构造函数可以使私有成员函数,在一些特殊的场合,会把构造函数定义为私有或者保护成员. 2.私有构造函数是一种特殊的实例构造函数.它通常用在 ...