1.JavaScript介绍
- JavaScript语言的诞生主要是为了完成页面的数据验证。因此它运行在客户端，需要浏览器来解析执行JavaScript代码。
- JavaScript是弱类型语言
- 特点：
2.JavaScript的用法
- HTML 中的脚本必须位于 <script> 与 </script> 标签之间；
- 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>
3.JavaScript的输出
-
JavaScript没有任何打印或者输出的函数
- 但是可以通过以下的方式对数据进行输出
-
window.alert():弹出警告框
-
document.write():将内容写到HTML文档中
-
innerHTML：写到HTML元素
-
console.log()：写到浏览器控制台
4.JS中的数组与对象的创建
// 方式一
var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
// 方式二
var cars = nee Array("Saab","Volvo","BMW");
// 方式三
var cars = ["Saab","Volvo","BMW"];
- 对象的创建
- 对象由花括号分隔。在括号内部，对象的属性以名称和值的键值对定义
var person = {name:"john", age :19 , id:5566}
5.对象
对象属性的访问
// 对象的属性可以通过两种方式访问
var person = { name : "hello", age :18, id : 5566};
person.name;
person["name"];
对象方法
// 对象方法的定义
var person = {
name : "john",
age :18,
id : 5566,
getName : function()
{
return this.name;
}
}
person.fullname; // 输出函数表达式
person.fullname(); // 输出函数执行结果
6.JavaScript作用域
- 这里需要注意的是，在HTML中，全局变量是window对象：所有数据变量都属于window对象
7.JavaScript事件
-
HTML事件是发生在HTML元素上的事情，当在HTML页面中使用JavaScript时，可以触发这些事件。
- 常见的HTML事件
- 当事件触发时，可以使用JavaScript来做一些功能，例如如下代码表示当点击该按钮时，js代码会修改HTML中id="demo"的元素内容
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
8. null与undefined的异同点
-
undefined是所有没有赋值的变量的默认值，自动赋值
-
null主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址
9.JavaScript表单
-
HTML表单验证可以利用JavaScript来完成,例如
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>
</body>
</html>
网友评论