3C School 学习 js ,html 的最佳网站 http://www.runoob.com/js/js-tutorial.html
js 基础, js HTML DOM 对象的操作
js 高级教程 , js 浏览器 BOM
js 库 jQuery ,Prototype
js 实例
js 对象实例, 浏览器对象实例, HTML DOM 实例
js 函数 包裹在花括号中的代码块
function functionname()
{
执行代码,js 对大小写敏感 , function 必须小写
}
js 作用域 可访问变量的集合
js 中,对象和函数同样是变量
函数作为变量 实现函数式编程;
js 局部变量 和全局变量 , 全局变量有全局作用域,网页中所有脚本和函数均可使用
var carName = “volvo”
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
js 变量声明周期, 在声明时,初始化, 局部变量在函数执行完毕后销毁,全局变量在页面关闭后销毁
在 HTML 中,全局变量 window 对象,所有数据变量都属于 window 对象
window.carName
全局变量, 或者函数 可以覆盖 window 对象的变量或者函数;
局部变量,包括 window 对象可以覆盖全局变量和函数
HTML 事件 是发生在 HTML 元素的事情,
例如: html 页面完成加载, html input 字段改变时, html 按钮被点击
<button onclick = 'getElementById("demo”).innerHTML =Date()’>The time is?</button>
<button οnclick="this.innerHTML=Date()">现在的时间是?</button>
this 关键字 指向自身的这个严肃
用js 写 html 元素 document.write(“<p>” + txt.length + “</p>”);
=== 绝对等于 ,(值,类型均相等)
!== 绝对不等于(值或类型不相等)
js 中像 c 语言
while 循环 作死循环时使用 先判断, 后执行
do/while 先执行一次代码块,后判断
for 循环
js 中的 typeof
null 表示 “什么都没有”
null 是一个只有一个值的特殊类型,表示一个空对象引用
可以设置 null 来清空对象
var person = null;
可以设置 undefined 来清空对象;
var person = undefined // 值为 undefined ,type is undefined
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
类型不同, 值是相同的
typeof undefined // undefinedtypeof null // objectnull === undefined // falsenull == undefined // true
js 中 5 +3+2 中类型
5分别为string , number, boolean, object,function
3中对象类型, Object,Date,Array
2个不包含任何值的数据类型: null ,undefined
用 typeod 操作符 ,来查看 js 变量的数据类型
typeof "John" // 返回 string typeof 3.14 // 返回 numbertypeof NaN // 返回 number not a number 缩写typeof false // 返回 booleantypeof [1,2,3,4] // 返回 objecttypeof {name:'John', age:34} // 返回 objecttypeof new Date() // 返回 objecttypeof function () {} // 返回 functiontypeof myCar // 返回 undefined (if myCar is not declared)typeof null // 返回 object
js 存在内省的机制
js constructor 构造器
constructor 属性返回所有 javaScript 变量的构造函数
function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1;}
“John”.constructor //返回函数 String ()
(3.14).constructor //返回 Number()
false.constructor // 返回函数 Boolean()
[1,2,3,4].constructor //返回函数 Array()
(123).toString()
js 中的正则表达式
var str = "Visit w3cschool";
var n = str.search(/w3cschool/i);
结果为 6
search() 方法使用字符串
<p></p> 标签之间称为 innerHTML
alert 可以有浏览器的设置提供过来
<head>
<script>
var txt="";
function message()
{
try
{
adddlert("Welcome guest!");
}
catch(err)
{
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
</script>
</head>
<body>
<input type="button" value="查看消息" οnclick="message()">
</body>
debugger 关键字
debugger 关键字
debugger 关键字用于停止执行 JavaScript，并调用调试函数。
这个关键字与在调试工具中设置断点的效果是一样的。
如果没有调试可用，debugger 语句将无法工作。
开启 debugger ，代码在第三行前停止执行。
js 表单验证简单实现
function validateForm(){var x=document.forms["myForm"]["fname"].value;if (x==null || x=="") { alert("First name must be filled out"); return false; }}
<form name="myForm" action="demo_form.asp" οnsubmit="return validateForm()" method="post">First name: <input type="text" name="fname"><input type="submit" value="Submit"></form>
js 的保留关键字 和 ES5 版本;
注意避免 js 的对象,属性和方法, java 保留关键字, windows 保留关键字
html 事件句柄
onblur , onclick onkeydown
非标准的 js
const 关键字, 用于定义变量, 一些 ks 引擎 把 const 当作 var 的同义词. 另一些引擎则把 const 只读变量的定义
const 是 javaScript 的扩展, js 支持它用在 firefox 和 chrome 里面 ,建议不要使用
使用 javaScript 内置函数 json.parse() 将字符串转换为 JavaScript 对象
var text = ‘“employees”'
json.parse ()
<a href="javascript:void(0)">单击此处什么也不会发生</a>
href = “#” 与 href = “javascript:void(0)” 的区别
# 包含一个位置信息, 默认的锚# top 也就是网页的上端;
在页面很长的时候会使用#来定位页面的具体位置, 格式:#+ id
如果要定义一个死链接请使用 javascript:void(0).
<a href = “#pos”>点我定位到指定位置</a>
<br><br><br><p id = “pos”>尾部定位点</p>
js 代码规范
1.变量和函数的命名规则
UIfocusEnvironment
我们使用 HTML DOM 来获得 id="header" 的元素
JavaScript 更改此元素的内容 (innerHTML)
<script>
document.getElementById("p2").style.color="blue";
</script>
获取 id = “p2”的元素,获取其属性,并修改 color 的颜色 style.color
获取 id = “id1”的 html 元素样式
<button type="button"
οnclick="document.getElementById('id1').style.color='red'">
Click Me!</button>
js html 的事件实例
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
this 关键字获取标签本身 “this.innerHTML = ‘Ooops!’”
<h1 onclick = “this.innerHTML =‘Ooops!'”>点我</h1>
添加监听回调
document.getElementById(“myBtn’").addEventListener(“clicked”, displaydate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。
你可以使用 removeEventListener() 方法来移除事件的监听。
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
js 控制事件传递的方向 都是从 html 文档里面去读取 正向链表 为捕获capture true 反向链表为冒泡 false
默认值为 false, 即冒泡传递 ,即 和 iOS 一样
浏览器适配:
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}
<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>
向 已存在的元素中添加元素
<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
1208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
