JS入门学习笔记-CSDN博客

本文介绍了JavaScript的基本用法，包括如何在HTML中嵌入脚本、响应事件、改变HTML内容等。同时，还详细讲解了如何利用JavaScript操作DOM元素、处理错误、创建动态内容及常见事件的应用。

2019独角兽企业重金招聘Python工程师标准>>>

1.JavaScript 是脚本语言.

2.JavaScript：写入 HTML 输出展示

document.write("<h1>这是一个标题的文字</h1>");

document.write("<p>这是一段段落文字</p>");

</script>

3.JavaScript：对事件作出反应

<!-- 按钮的点击事件 —>

4.JavaScript：改变 HTML 内容

JavaScript 能改变 HTML 元素的内容。{{kkk}}

</p>

function myFunction()

{

x=document.getElementById("demo"); // 找到元素

x.innerHTML="Hello JavaScript!"; // 改变内容

}

</script>

isNaN(x)不是数字

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

调错：

<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通过 id 找到 HTML 元素 var x=document.getElementById("intro");
通过标签名找到 HTML 元素
```
 
```
本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素：

var x=document.getElementById("main”);

var y=x.getElementsByTagName("p”);--
通过类名找到 HTML 元素

根据id改变了 <img> 元素的 src 属性

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

改变元素的样式

document.getElementById(id).style.property=new style

document.getElementById("p2").style.color=“blue”；

onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

onchange 事件

onchange 事件常结合对输入字段的验证来使用。当用户改变输入字段的内容时。

function myFunction()

{

var x=document.getElementById("fname");

x.value=x.value.toUpperCase();

}

</script>

</head>

<body>

请输入英文字符：<input type="text" id="fname" οnchange="myFunction()”> 输入框

<p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

创建新的 HTML 元素

这段代码创建新的 <p> 元素：

var para=document.createElement("p");

如需向 <p> 元素添加文本，您必须首先创建文本节点。这段代码创建了一个文本节点：

var node=document.createTextNode("这是新段落。");

然后您必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

最后您必须向一个已有的元素追加这个新元素。

这段代码找到一个已有的元素：

var element=document.getElementById("div1");

这段代码向这个已有的元素追加新元素：

element.appendChild(para);

使用函数来构造对象：

function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}

如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN，那么对象的值为 false。否则，其值为 true（即使当自变量为字符串 "false" 时）！

Math 对象

Math.round(4.7) 一个数进行四舍五入

Math.random() 返回一个介于 0 和 1 之间的随机数

Math.floor(Math.random()*11) floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数

算数值

JavaScript 提供 8 种可被 Math 对象访问的算数值：

常数
圆周率
2 的平方根
1/2 的平方根
2 的自然对数
10 的自然对数
以 2 为底的 e 的对数
以 10 为底的 e 的对数

这是在 Javascript 中使用这些值的方法：（与上面的算数值一一对应）

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E
Math.LOG10E

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度 document.write("可用宽度：" + screen.availWidth);

location.assign() 方法加载新的文档。

function newDoc()

{

window.location.assign("http://www.w3school.com.cn")

}

</script>

Window History Back

history.back() 方法加载历史列表中的前一个 URL。

警告框：alert("文本”)

确认框：confirm("文本”)

提示框：prompt("文本","默认值")

计时事件:

setTimeout() 未来的某时执行代码

clearTimeout() 取消setTimeout()

t=setTimeout("timedCount()",1000)   clearTimeout(t)

转载于:https://my.oschina.net/yanxue1825/blog/800929