Javascript笔记

2017-04-16

外部调用:

1	<script src="myScript.js"></script>

myScript.js 文件代码如下：

1	function myFunction(){ document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数"; }

注：外部脚本不包含<script> 标签

输出：（4种方式）

1、 window.alert() 弹出警告框

1
2
3

<script>
window.alert(5 + 6);
</script>

2、 document.write() 方法将内容写到 HTML 文档中

1
2
3

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

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

3、使用 innerHTML 写入到 HTML 元素

1	document.getElementById("demo").innerHTML="My First JavaScript";

4、使用 console.log() 写入到浏览器的控制台

1	console.log(“string");

定义变量:

var name="Gates", age=56, job="CEO";
如果重新声明 JavaScript 变量，该变量的值不会丢失：

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
var person={firstname:"Bill", lastname:"Gates", id:5566};
对象属性有两种寻址方式：

1 2	name=person.lastname; name=person["lastname"];

<button type="button" onclick="alert('欢迎!')">点我!</button>

使用 String 对象的 toUpperCase() 方法来把文本转换为大写：

您会经常看到 document.getElementById(“some id”)。这个方法是 HTML DOM 中定义的。
DOM (Document Object Model)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。

<script>
function changeImage()
{
}
</script>
<img id="myimage" onclick="changeImage()"
src="/images/pic_bulboff.gif" width="100" height="180">

改变 HTML 元素的样式:

x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式

获取输入框内容：

1 2	<input id="demo" type="text”> //输入框创建 var x=document.getElementById("demo").value;

注释：

1
2
3

//单行
/*多行
*/

JavaScript 对大小写是敏感的

对代码行进行折行：

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write("你好 \
世界!");
不过，您不能像这样折行：
document.write \
("你好世界!");

常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

基于某些条件对变量进行赋值:

variablename=(condition)?value1:value2
例如：

voteable=(age<18)?"年龄太小":"年龄已达到";
time 当前24小时制整点数字 例如2 15
if (condition1)
{
}
else if (condition2)
{
}
else
{
}

改变HTML内容：

通过id查找 HTML 元素:
var x=document.getElementById("main");
通过标签名查找 HTML 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
通过类名查找 HTML 元素:
x=document.getElementsByClassName("intro");

改变HTML属性：

1	document.getElementById(id).属性标签=新属性值

改变HTML样式：

1
2
3

document.getElementById(id).style.property=新样式
例如：
document.getElementById("p2").style.color="blue";