JavaScript学习笔记
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<h1>我的第一个 Web 页面h1>
<p id="demoElement">我的第一个段落p>
<button onclick="windowAlert()">弹出警告框button>
<p>p>
<button onclick="testInnerHTML()">使用innerHTML写入数据button>
<p>p>
<button onclick="documentWrite()">点击整个HTML页面将被覆盖button>
<p>p>
<button onclick="testConsole()">输出到控制台button>
<script>
function windowAlert()
{
window.alert(3 + 5)
}
function testInnerHTML() {
document.getElementById("demoElement").innerHTML = "段落已修改"
}
function documentWrite() {
// 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖
document.write("test document.write")
}
function testConsole() {
console.log(3 + 5)
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<h1>JavaScript 数据类型h1>
<p id="testDynamicType">我的第一个段落p>
<button onclick="testDynamicType()">testDynamicTypebutton>
<p>p>
<button onclick="testUndeclaredVar()">testUndeclaredVarbutton>
<script>
function testDynamicType() {
// JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
var x; // x 为 undefined
x = 5; // 现在 x 为数字
x = "John"; // 现在 x 为字符串
//创建数组 new Array() 或者 [...] 或者 new Array("Saab","Volvo","BMW")
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Audi";
//JavaScript对象
//对象由花括号分隔。在括号内部，对象的属性以名称和值对(name : value)的形式来定义
var person = {firstname:"John", lastname:"Doe", id:5566};
//对象属性有两种寻址方式：
name = person.lastname;
name = person["lastname"];
//如果把值赋给尚未声明的变量，该变量将被自动作为全局变量声明
undeclaredVar = "undeclaredVar";
document.getElementById("testDynamicType").innerHTML = x;
}
function testUndeclaredVar() {
document.getElementById("testDynamicType").innerHTML = undeclaredVar;
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<script>
cars=["BMW","Volvo","Saab","Ford"];
list:{
document.write(cars[0] + "
");
document.write(cars[1] + "
");
document.write(cars[2] + "
");
break list;
document.write(cars[3] + "
");
document.write(cars[4] + "
");
document.write(cars[5] + "
");
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>变量的值如果不存在则该变量值为 <b>undefinedb>p>
<p id="demo">p>
<script>
var person;
document.getElementById("demo").innerHTML = person + "
" + typeof person;
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>搜索字符串 "w3cSchool", 并显示匹配的起始位置：p>
<p id="demo">p>
<button onclick="searchStr()">搜索字符串位置button>
<p>p>
<script>
function searchStr() {
var patt = /e/;
var isOrNot = patt.test("The best things in life are free!");
//你可以不用设置正则表达式的变量，以上两行代码可以合并为一行：
///e/.test("The best things in life are free!")
var str = "Visit W3cSchool!";
var n = str.search(/w3cSc(.*)l/i);
document.getElementById("demo").innerHTML = n + " " + isOrNot + " "
+ /lif/.exec("The best things in life are free!");
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<script>
function myFunction(){
try{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
document.getElementById("mess").innerHTML = null
}
catch(err){
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
script>
head>
<body>
<h1>JavaScript 错误 - throw、try 和 catchh1>
<p>请输出一个 5 到 10 之间的数字:p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">测试输入button>
<p id="mess">p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p id="demo">p>
<script>
var x = 0.1;
var y = 0.2;
var z = x + y;
//0.30000000000000004
document.getElementById("demo").innerHTML = z;
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJStitle>
head>
<body>
<p id="demo">p>
<script>
for (var i = 0; i < 10; i++) {
// some code
}
document.getElementById("demo").innerHTML = i;
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
script>
head>
<body>
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname" title="name">
<input type="submit" value="提交">
form>
body>
html>
<html>
<head>
<meta charset="utf-8">
head>
<body>
<form action="javascript:void(0)" method="post">
<input type="text" name="fname" required>
<input type="submit" value="提交">
form>
<p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息p>
body>
html>
<html>
<head>
<meta charset="utf-8">
head>
<body>
<p>输入数字并点击验证按钮:p>
<input id="id1" type="number" min="100" max="300" required>
<button onclick="myFunction()">验证button>
<p>如果输入的数字小于 100 或大于300，会提示错误信息。p>
<p id="demo">p>
<script>
function myFunction() {
var inpObj = document.getElementById("id1");
if (inpObj.checkValidity() == false) {
document.getElementById("demo").innerHTML = inpObj.validationMessage;
} else {
document.getElementById("demo").innerHTML = "输入正确";
}
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJStitle>
head>
<body>
<p>点击以下链接查看结果：p>
<a href="javascript:void(0)">单击此处什么也不会发生a>
<p>p>
<a href="#">单击返回顶部a>
<p>p>
<a href="javascript:void(alert('Warning!!!'))">单击显示警告a>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p> arguments.length 属性返回函数接收到参数的个数：p>
<p id="demo">p>
<script>
function myFunction(a, b) {
return arguments.length;
}
//2 function myFunction(a, b) { return arguments.length; } function
document.getElementById("demo").innerHTML = myFunction(3, 4) +
" " + myFunction.toString() + " " + typeof myFunction;
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>设置参数的默认值。p>
<p id="demo">p>
<script>
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
return x * y;
}
document.getElementById("demo").innerHTML = myFunction(4);
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>查找最大的数。p>
<p id="demo">p>
<script>
function findMax() {
var i, max = 0;
for(i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
document.getElementById("demo").innerHTML = findMax(4, 5, 6);
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>局部变量计数p>
<button type="button" onclick="myFunction()">计数!button>
<p id="demo">0p>
<script>
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML = add();
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>你好世界!p>
<div id="main">
<p> DOM 是非常有用的。p>
<p>该实例展示了 <b>getElementsByTagNameb> 方法p>
div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJStitle>
head>
<body>
<p class="intro">你好世界!p>
<p>该实例展示了 <b>getElementsByClassNameb> 方法!p>
<script>
x=document.getElementsByClassName("intro");
document.write("文本来自 class 为 intro 段落: "
+ x[0].innerHTML + "");
script>
<p><b>注意：b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p id="p1">Hello World!p>
<p id="p2">Hello World!p>
<script>
document.getElementById("p2").style.color="purple";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
script>
<p>以上段落通过脚本修改p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<h1 id="id1">我的标题h1>
<button type="button" onclick="document.getElementById('id1').style.color='purple'">
点我!button>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p id="p1">这是一个文本 这是一个文本 这是一个文本p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!h1>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<head>
<script>
function changetext(id) {
id.innerHTML="Ooops!";
}
script>
head>
<body>
<h1 onclick="changetext(this)">点击文本!h1>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>点击按钮执行 <em>displayDate()em> 函数.p>
<button id="myBtn">点这里button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
document.getElementById("demo").innerHTML=new Date();
}
script>
<p id="demo">p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled == true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}
script>
<p>弹窗-提示浏览器 cookie 是否可用p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<head>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
script>
head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母p>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:150px;height:20px;padding:50px;">Mouse Over Mediv>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 p>
<button id="myBtn">点我button>
<p id="demo">p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
document.getElementById("myBtn").addEventListener("click", changeTitle);
function displayDate() {
document.getElementById("demo").innerHTML = new Date();
}
function changeTitle() {
if (document.getElementById("myBtn").innerHTML == "点击") {
document.getElementById("myBtn").innerHTML = "点我"
} else {
document.getElementById("myBtn").innerHTML = "点击"
}
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>实例在 window 对象中使用 addEventListener() 方法。p>
<p>尝试重置浏览器的窗口触发 "resize" 事件句柄。p>
<p id="demo">p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<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>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<div id="div1">
<p id="p1">这是一个段落。p>
<p id="p2">这是另一个段落。p>
div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<script>
function startTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();// 在小于10的数字钱前加一个‘0’
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
setTimeout(function(){startTime()},1000);
}
function checkTime(i){
if (i<10){
i="0" + i;
}
return i;
}
script>
head>
<body onload="startTime()">
<div id="txt">div>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p id="demo">p>
<script>
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x = document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<script>
document.write("可用宽度: " + screen.availWidth);
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<head>
<script>
function newDoc(){
window.location.assign("http://www.baidu.com");
}
script>
head>
<body>
<input type="button" value="加载新文档" onclick="newDoc()">
<p>p>
<h3 onclick="this.innerHTML = location.hostname">获取 web 主机的域名h3>
<p>p>
<h3 onclick="this.innerHTML = location.pathname">获取当前页面的路径和文件名h3>
<p>p>
<h3 onclick="this.innerHTML = location.port">获取 web 主机的端口h3>
<p>p>
<h3 onclick="this.innerHTML = location.protocol">获取所使用的 web 协议h3>
<p>p>
<h3 onclick="this.innerHTML = location.href">获取当前页面的 URLh3>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<div id="example">div>
<script>
txt = "浏览器代号: "
+ navigator.appCodeName + "";
txt+= "浏览器名称: "
+ navigator.appName + "";
txt+= "浏览器版本: "
+ navigator.appVersion + "";
txt+= "启用Cookies: "
+ navigator.cookieEnabled + "";
txt+= "硬件平台: "
+ navigator.platform + "";
txt+= "用户代理: "
+ navigator.userAgent + "";
txt+= "用户代理语言: "
+ navigator.systemLanguage + "";
document.getElementById("example").innerHTML = txt;
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>点击按钮，显示确认框。p>
<button onclick="myFunction()">点我button>
<p id="demo">p>
<script>
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<body>
<p>点击按钮查看输入的对话框。p>
<button onclick="myFunction()">点我button>
<p id="demo">p>
<script>
function myFunction(){
var x;
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
script>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; ivar c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("Welcome again " + user);
}
else {
user = prompt("Please enter your name:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
script>
head>
<body onload="checkCookie()">body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<script src="https://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.min.js">script>
<script>
function myFunction(){
$("#h01").attr("style","color:purple").html("Hello jQuery")
}
$(document).ready(myFunction);
script>
head>
<body>
<h1 id="h01">h1>
body>
html>
<html>
<head>
<meta charset="utf-8">
<title>TestJstitle>
<script src="https://apps.bdimg.com/libs/prototype/1.7.1.0/prototype.js">script>
<script>
function myFunction(){
$("h01").writeAttribute("style","color:purple").insert("Hello Prototype!");
}
Event.observe(window, "load", myFunction);
script>
head>
<body>
<h1 id="h01">h1>
body>
html>