javascript--Note
一、JavaScript能做什么？
1、直接写入HTML输出流：
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
2、对事件得反应
<button type="button" onclick="alert('欢迎！')">点我</button>
3、改变HTML内容
x=document.getElementById("dome"); //查找元素
x.innerHTML="Hello Javascript"; //改变内容
4、改变HTML图像
5、改变HTML样式
x=document.getElementById("dome"); //找到元素
x.style.color="#ff0000"; //改变样式
6、验证输入
if isNaN(x) {alert("不是数字")};
=============================================================================================================================
二、JavaScript用法：
HTML 中的脚本必须位于 <script> 与 </script> 标签之间。 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
如需在 HTML 页面中插入 JavaScript，请使用 <script> </script>标签之间。
1、HTML内部的JavaScript一般存在得形式： <body>JavaScript函数</body>
<head>事件调用JavaScript函数</head>
2、外部JavaScript
也可以把脚本保存到外部文件中，外部文件通常包含被多个网页使用的代码。
外部JavaScript文件的扩展名是 .js
如需使用外部文件，请在<script>标签的“src”属性中设置该.js文件
=============================================================================================================================
三、JavaScript的输出：
1、使用window.alert（）弹出警告框
2、使用document.write（）方法将内容写到HTML文档中
3、使用innerHTML写入到HTML元素
4、使用console.log（）写入到浏览器的控制台
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<p id="demo">我的第一个段落</p>
<button onclick="myFunction()">点我</button>
<script>
window.alert(5 + 6);
document.getElementById("demo").innerHTML = "段落已修改。";
document.write(Date());
function myFunction() {
document.write(Date());
}
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
=============================================================================================================================四、JavaScript变量---JavaScript数据类型
var关键字来声明变量
数据类型：
字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）
1、JavaScript对象属性的两种寻址方式：
name=person.lastname;
name=person["lastname"];
2、Undefined和null
Undefined这个值表示变量不含有值，
可以通过将变量的值设置为null来清空变量。
3、声明新变量时，使用“new”关键字来声明其类型
var carname=new String;
4、JavaScript对象方法：
对象的方法定义了一个函数，对象方法通过添加()调用（作为一个函数）。该实例访问person对象的fullname()方法。
name=person.fullname();
访问对象方法：
创建对象方法：methodName : funcation() { code lines}
访问对象方法：objectName.methodName();
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁.";
</script>
var person = {
firstName : "John",
lastName : "Doe",
age : 50,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁。";
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>
有两种方式可以访问对象属性：
</p>
<p>
你可以使用 .property 或 ["property"].
</p>
<p id="demo"></p>
<script>
var person = {
firstName : "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<p>创建和使用对象方法。</p>
<p>对象方法是一个函数定义,并作为一个属性值存储。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo1").innerHTML = "不加括号输出函数表达式：" + person.fullName;
document.getElementById("demo2").innerHTML = "加括号输出函数执行结果：" + person.fullName();
</script>
</body>
</html>
5、JavaScript函数：han'shu是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
函数就是包裹在花括号中的代码块，前面使用了关键词 function：
function functionname() {执行代码}
浙公网安备 33010602011771号