js入门

最新推荐文章于 2024-11-13 01:18:00 发布

danchejikafo

最新推荐文章于 2024-11-13 01:18:00 发布

阅读量302

点赞数

分类专栏：前端文章标签： js javascript

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在网页中添加一个script元素，将type属性指定为"text/javascript"，然后写入你的JavaScript代码：
<script type="text/javascript">
....
</script>

第一个程序：
<html>
<head>
<title>Hello World</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
alert("Hello, World");
</script>
</head>
<body>
</body>

</html>

----------------------------------------------------------------------------------------------------------------------------------------

<html>
<head>
<title>My Second script</title>
<script>
window.οnlοad=writeMessage; //Do this when page finishes loding
function writeMessage() {
document.getElementById("helloMessage").innerHTML = "hello world";
}
</script>
</head>
<body>
<div id ="helloMessage"></div>
</body>
</html>

innerHTML属性仅仅是获得等号右边的字符串，并将它放到页面中，就像我们在html中编写了这个字符串一样。

window.οnlοad=writeMessage;而不是写成了window.οnlοad=writeMessage();表示将它赋值给事件处理程序，以便在此事件发生时运行它。

--------------------------------------------------------------------------------------------------------------------------------------------------------

1.发出警告：alert();

2.确认用户的选择，用户选确认或取消。

function confirm1() {
if(confirm("Are you sure you want to do that?")) {
alert("You said yes");
}else {
alert("You said no");
}
}

3.提示用户

不仅希望用户回答Yes/No，而是希望得到更特定的响应。
function prompt1() {
var ans = prompt("Are you sure you want to do that?","");
if(ans) {
alert("You said " + ans);
}else {
alert("You refused to answer");
}
}
ans为提示对话框中输入的文本。
prompt参数，分别为“询问的问题”和“文本框中默认的回答”，
这个方法返回用户的响应或null.

当用户单击cancel按钮，或当没有默认回答而用户点击了Ok按钮，再或当用户清除了默认回答并单击了Ok按钮，就会出现null.
有些浏览器会在提示对话框上显示一个关闭控件，使用这个控件会会返回null结果。

4.用链接对用户进行重定向(redirection)
<head>
<title>My Second script</title>
<script>
window.οnlοad=initAll;
function initAll() {
document.getElementById("redirect").onclick = initRedirect;
}
function initRedirect() {
window.location = "bb.html";
return false;
}
</script>
</head>
<body>
<h4>
<a href="aa.html" id="redirect">Welcome to our site..</a>
</h4>
</body>
将鼠标放在链接上，可以看到提示是跳转到“aa.html”，但点击后，跳转到了“bb.html”.
window.οnlοad=initAll；--当页面完成加载时，它会触发initAll()函数。
initRedirect()--将window.location（即浏览器中显示的页面）设置为一个新页面，return false表示停止对用户单击的处理，这样就不会加载href指向的页面（去掉return false，还是跳转到了aa.html；事件还有submit用到return false都表示不继续处理）。

5.使用javascript改进链接
有时候，在用户单击链接之后，但是在浏览器转到链接的目的地之前，希望执行某种操作。
典型的是，在用户进入站点上的特定页面之前发出警告，或在用户离开站点时给出明确提示。
<head>
<title>My Second script</title>
<script>
window.οnlοad=initAll;
function initAll() {
document.getElementById("redirect").onclick = initRedirect1;
}
function initRedirect1() {
alert("We are not responsible for the content of pages outside our site");
window.location = this;
return false;
}
</script>
</head>
<body>
<h4>
<a href="aa.html" id="redirect">Welcome to our site..</a>
</h4>
</body>
现象：点击链接，弹出提示框，确定后，跳转到“aa.html”页面。
说明：
window.locatioin = this;
这一行将浏览器窗口设置为关键字this指定的位置，this包含这个链接。目前，只需将this看做一个容器。
js关键字this使脚本能够根据使用这个关键字的上下文将值传递给函数。在这个示例中，this是在一个由标签的事件触发的函数中使用的，所以this是一个链接对象。

6.处理错误
<script>
function errortest() {
var ans = prompt("Enter a number","");
try {
if(!ans || isNaN(ans) || ans < 0) {
throw new Error("Not a valid number");
}
alert("The square root of " + ans + " is " + Math.sqrt(ans));//求平方根
}catch(errMsg) { //errMsg为任意值，自己随便定义。
alert(errMsg.message);
}
}
</script>
<input type="button" value="error" οnclick="javascrpit:errortest();"></input>

如果没有输入，输入不是数字，输入为负数，都是无效的。
isNaN()方法检查值是否“不是数字not a number”,如果返回true，则说明非数字，为无效的。