初识javascript-整理w3c

最新推荐文章于 2023-01-02 11:20:00 发布

yy10992

最新推荐文章于 2023-01-02 11:20:00 发布

阅读量318

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/yy10992/article/details/46707535

版权

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

生成文本
document.write("Hello World!")

生成普通文本和标签
document.write("<h1>Hello World!</h1>")

head 部分
function message()
{alert("该提示框是通过 onload 事件调用的。")}
<body οnlοad="message()">

外部 JavaScript
<script src="/js/example_externaljs.js">
</script>

JavaScript多行注释
/*多行注释*/
//单行注释

声明一个变量，为它赋值，然后显示出来
<script type="text/javascript">
var firstname;
firstname="George";
document.write(firstname);
document.write("<br />");
</script>

向id="demo" 的 HTML 元素输出文本 "Hello World"：
document.getElementById("demo").innerHTML="Hello World";

JavaScript 消息框

警告框
function disp_alert()
{
alert("向您问好！" + '\n' + "如何向警告框添加折行。")
}
<input type="button" οnclick="disp_alert()" value="显示警告框" />

确认框
function show_confirm()
{
var r=confirm("Press a button!");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
<input type="button" οnclick="show_confirm()" value="Show a confirm box" />

提示框
var name=prompt("请输入您的名字","Bill Gates")

JavaScript 函数

带有参数的函数
function myfunction(txt){
alert(txt);
}
<input type="button" οnclick="myfunction('good moring!')" value="早上">
<input type="button" οnclick="myfunction('good night')" value="晚上">

返回值的函数
<html>
<head>
<script type="text/javascript">
function product(a,b)
{
return a*b
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(product(6,5))
</script>
</body>
</html>

JavaScript 错误处理

try...catch 语句
<script type="text/javascript">
var txt=""
function message()
{
try
{
alert(x)
}
catch(err)
{
txt="本页中存在错误。\n\n"
txt+="点击“确定”继续查看本页，\n"
txt+="点击“取消”返回首页。\n\n"
if(!confirm(txt))
{
document.location.href="/index.html"
}
}
}
</script>

throw 声明
<script type="text/javascript">
var x=prompt("请输入 0 至 10 之间的数：","")
try
{
if(x>10)
throw "Err1"
else if(x<0)
throw "Err2"
else if(isNaN(x))
throw "Err3"
}
catch(er)
{
if(er=="Err1")
alert("错误！该值太大！")
if(er == "Err2")
alert("错误！该值太小！")
if(er == "Err3")
alert("错误！该值不是数字！")
}
</script>

onerror 事件
<script type="text/javascript">
οnerrοr=handleErr
var txt=""
function handleErr(msg,url,l)
{
txt="本页中存在错误。\n\n"
txt+="错误：" + msg + "\n"
txt+="URL: " + url + "\n"
txt+="行：" + l + "\n\n"
txt+="点击“确定”继续。\n\n"
alert(txt)
return true
}
function message()
{
allert("Welcome guest!")
}
</script>
<input type="button" value="查看消息" οnclick="message()" />

高级 JavaScript 实例

检测浏览器及版本
<html>
<body>
<div id="example"></div>
<script>
txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
</body>
</html>

根据浏览器类型提醒用户
function detectBrowser()
{
var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)
if ((browser=="Netscape"||browser=="Microsoft Internet Explorer") && (version>=4))
{alert("您的浏览器够先进了！")}
else
{alert("是时候升级您的浏览器了！")}
}

<body οnlοad="detectBrowser()">
</body>

创建一个欢迎 cookie

设置cookie
document.cookie="userId=828; userName=hulk";
document.cookie="str="+escape("I love ajax");
相当于： document.cookie="str=I%20love%20ajax";
获取cookie值:var strCookie=document.cookie;
//设置两个cookie
document.cookie="userId=828";
document.cookie="userName=hulk";
//获取cookie字符串
var strCookie=document.cookie;
//将多cookie切割为多个名/值对
var arrCookie=strCookie.split("; ");