JavaScript特性
- 脚本语言。JavaScript是一种解释型的脚本语言,在程序的运行过程中逐行进行解释。
- 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也 能使用现有的对象。
- 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做 出严格的要求,是基于Java基本语句和控制的脚本语言。
- 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务 器就可以对用户的输入做出响应。
- 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。
JavaScript语法
1. 变量
在JavaScript中通过var关键字来声明一个变量，在使用的过程中可以赋任意值。 严格区分大小写。
<script type="text/javascript">
//1.变量声明
//JS是一门弱类型的语言，声明变量只需要使用一个var关键字即可
var a;
//2.变量赋值
//JS还是一门动态类型的语言，在使用变量的过程中可以赋任意值
a=123;
a="hello";
a='world';
a=true;
//3.变量严格区分大写小写
var num = 666;
alert(Num);
</script>
2. 函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
-
函数声明
在JavaScript中通过function关键字来声明一个函数，在声明函数数不需要指定返回值类型和参数的类型
声明函数有以下两种方式：
//方式一： function fun(){ //函数体 } //方式二： var fun2 = function(var1,var2){ //函数体 return a * b; } -
函数调用
调用JavaScript函数时系统不检查传入参数的个数和类型。
var result = fun2(1,"hello","JS"); alert(result);
3. 对象
JavaScript 对象是拥有属性和方法的数据。在 JavaScript中，几乎所有的事物都是对象。
-
对象的创建
//第一种，使用new Object()创建 var obj = new Object(); //第二种，使用{}创建 var obj = {};
-
为对象添加属性
//第一种，通过 对象.属性名 = “属性值” 添加 obj.name = "zhangsan"; obj.age = 12; obj.sum = function(a,b){ return a+b; } //第二种，使用{}创建对象时，直接向对象中添加属性 var obj = {"name" : "zhangsan","age" : 21, "sum" : function(a,b){ return a+b;} }; -
函数也是对象
在JavaScript中，函数也作为一种数据类型存在，而且是引用数据类型，函数名就是指向其内存空间地址的引用。
var a = function() { alert("A"); }; var b = a; a.fname = "tom"; alert(b.fname); //结果为tom alert(b);//alert a 的整体内容：function(){...} b();//A函数执行
函数名 + ( )
<p id="demo">段落</p> <script> function myFunction(a,b){ return a*b; }; //将p内容“段落”修改为“20” document.getElementById("demo").innerHTML=myFunction(2, 10); </script>
4. this关键字
-
在JavaScript函数中，this关键字指向的是调用当前函数的对象。
var obj01 = { name : "obj01 name", getName : showName }; var obj02 = { name : "obj02 name", getName : showName }; function showName() { alert(this.name); } obj01.getName();//结果为 obj01 name obj02.getName();//结果为 obj02 name
Javascript输出
JavaScript 可以通过不同的方式来输出数据：
window.alert()
使用 window.alert() 弹出警告框。
<script>
window.alert(5 + 6);
</script>
document.write()
使用 document.write() 方法将内容写到 HTML 文档中。
如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
document.write(Date());
}
</script>
innerHTML
使用 innerHTML 写入到 HTML 元素。
使用 document.getElementById(id) 来访问 HTML 元素。 并 innerHTML 来获取或插入元素内容：
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
//document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
//innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。
console.log()
使用 console.log() 写入到浏览器的控制台。
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
JavaScript事件驱动
事件
用户事件：用户操作，例如单击、鼠标移入、鼠标移出等。
系统事件：由系统触发的事件，例如文档加载完成。
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
自定义事件响应函数
-
从文档对象模型中获取控件对象[借助DOM API实现]
-
声明一个事件响应函数
-
将事件响应函数的引用赋值给控件对象的事件属性
例如：window.onload = function(){}
事件执行过程
-
声明一个函数：不执行
-
将函数绑定到指定元素的事件上：函数也不执行
-
触发元素的事件：函数执行
window 对象：代表当前游览器窗口；
onload事件：将整个文档加载后触发；
<script type="text/javascript"> //借助window.onload事件,在这个页面加载完成后执行程序代码 window.onload = function(){ //1.声明一个函数 function dL(){ alert("我爆炸了……"); } //2.获取事件对象 var btnEle = document.getElementById("btnId"); //3.将函数绑定到元素的单击事件上 btnEle.onclick = dL; //注意：赋给element的单击事件的是函数整体，不是函数的执行结果 }; </script> <body> //4.当触发btnId的单击事件时函数才执行 <button id="btnId">SayHello</button> </body>取消控件默认行为
-
默认行为
[1]超链接跳转页面
[2]submit按钮提交表单
-
取消方式：return false
<head> <script type="text/javascript"> window.onload = function(){ //获取提交按钮并给它绑定单击事件 var subEle = document.getElementById("sub"); subEle.onclick = function(){ //获取文本框对象 var inputEle = document.getElementById("username"); //获取用户输入的用户名 var inputValue = inputEle.value; //判断用户输入的值是否为空 if(inputValue == ""){ alert("用户名不能为空！"); //取消默认行为 return false; } }; //给超链接绑定单击事件 document.getElementById("aEle").onclick = function(){ //取消超链接的默认行为 return false; }; }; </script> </head> <body> <form action="dom查询.html"> 用户名：<input type="text" name="username" id="username"><br><br> <input type="submit" id="sub"> </form> <a href="dom查询.html" id="aEle">去dom查询页面</a> </body>
-
JavaScript嵌入方式
游览器加载顺序：按从上到下的顺序加载，遇到script标签先执行脚本程序，执行完成后再继续加载
-
写在标签的事件属性中，结构与行为相耦合，不建议使用
<button id="btnId" onclick="alert('Hello JS')">SayHello</button> -
写在script标签中，script标签放到head标签中
<script type="text/javascript"> var btnEle = document.getElementById("btn"); btnEle.onclick = function() { alert("hello"); }; </script> </head> <body> <button id="btn">点我</button> </body>无法获取body标签中的节点，使用window.onload=function(){}，在页面加载完成后执行程序代码。
<script type="text/javascript"> window.onload = function(){ //获取按钮对象 var btnEle = document.getElementById("btnId"); //给按钮对象绑定单击事件 btnEle.onclick = function(){ alert("Hello"); }; }; </script>
-
写在script标签中，script标签放到body标签后面，可以获取节点，但是不符合我们的习惯
<script type="text/javascript"> //获取按钮对象 var btnEle = document.getElementById("btnId"); //给按钮对象绑定单击事件 btnEle.onclick = function(){ alert("Hello"); }; </script>
-
引入外部js文件，script标签放到head标签中
<script type="text/javascript" src="javascript.js"></script>
网友评论