一篇文章带你入门Java Script
目录
- 概述
- 特点
- 和Java的区别
- 弱类型语言
- 强类型语言
- 书写位置
- 数组
- 函数
- JS中的自定义对象(扩展内容)
- Object形式的自定义对象
- JS中的事件
- 常用的事件:
- 动态注册基本步骤:
- DOM模型
- 总结
概述
JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。
JS组成部分:
组成部分 | 作用 |
---|---|
ECMA Script | 构成了JS核心的语法基础 |
BOM | Browser Object Model 浏览器对象模型,用来操作浏览器上的对象 |
Dom | Document Object 文档对象模型,用来操作网页中的元素 |
特点
1.交互性(它可以做的就是信息的动态交互)
2.安全性(不允许直接访问本地硬盘)
3。跨平台性(只要可以解析js的浏览器都可以执行,和平台无关)
和Java的区别
JavaScript | Java |
---|---|
Netscape公司的产品,最初叫Livescript | Sun公司的产品,现在是Oracle公司的产品 |
直译式脚本语言 | 需要先编译成字节码文件,在执行 |
弱类型语言 | 强类型语言 |
弱类型语言
弱类型语言是一种弱类型定义的原,某一个变量被定义类型,该变量可以根据环境变化自动进行转换,不需要经过显性强制转换
强类型语言
强类型语言是一种强制类型定义的语言,一旦某一个变量被定义类型,如果不经过强制转换,则它永远就是该数据类型了
书写位置
1.内嵌式:
<script type="text/javascript"> //alert是Javascript语言提供的一个警告框函数 //它可以接受任意类型的参数,这个参数就是警告框的提示信息 alert("内嵌式") <script>
2.外联式:
首先新建一个文件类型为.js的文件,然后再该文件中写js语句,通过script标签对引入到html页面中。
<script src="js文件路径地址">这里不能写js语句</script>
3.行内式:
直接写在标签身上,是一个简写的时间,所以又称之为事件属性。 onclick单机事件
<input type="button" value="点我呀" onclick="alert(点我干啥!);"> <button onlick = "alert("test");>点我呀!<button>
数据类型
变量是可以存放某些之的内存的命名。
定义:存放数据,内存可以存储任意数据
JavaScript的变量类型
未定义的类型:undefined
数值类型: number (凡是数字都是数值型,不区分和小数)
字符换类型:string(凡是引号包裹起来的内容全部都是字符串)
对象类型:object(特殊数值null)
布尔类型:boolean (true,false)
函数类型:function
JavaScript里特殊的值:
undefined 未定义,所有js变量未赋予初始值的时候,默认值都是unde空值
null 空值
关系(比较)运算
等于: == 等于是简单的做字面值的比较
全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型
逻辑运算
且运算:&&
第一种 :当表达式全为真的时候,返回最后一个表达式的值
第二种:当表达式中,有一个为假的时候。返回第一个为假的表达式的值
var a = "abc"; var b = true; var d = false; var c = null; alert(a && b); // true alert(b && a); // true alert(a && d); // false alert(a && c); // null
或运算:| |
第一种:当表达式全为假时,返回最后一个表达式的值
第二种:只要有一个表达式为真,就会把返回第一个为真的表达式的值
alert(a || c); // null alert(c || d); // false alert(a || c); // abc alert(b || c); //abc
并且&&与预算和| |或运算有短路。
短路就是说当这个&&或| |运算有结果了之后。后面的表达式不在执行
在Javascript语言中,所有的变量,都可以作为一个boolean类型的变量去使用
数组
1,数组定义方式
js中数组的定义
格式:
var 数组名 = []; //创建空数组 var 数组名 = [1,'abc',true]; //定义数组同时赋值元素 alert(arr.length); // 遍历数组
注意:使用最大下标值就会自动的给数组做扩容操作
函数
可以使用function关键字来定义函数
// 第一种 var function 函数名(函数体){ //(函数体) } // 调用函数:函数名(实际参数); //第二种 var 函数名 = function(函数体){ //(函数体) } // 调用函数:函数名(实际参数);
1,函数只有被调用后才会执行
2,如果函数需要返回值,直接使用return返回,不会像Java一样要考虑返回值的类型
在JavaScript语言中,如何定义带有返回值的函数?
只需要在函数体内直接使用return语句返回值即可!
注:再Java中函数允许重载,但是再JS中函数的重载会直接覆盖掉上一次的定义
函数的 arguments 隐形参数(只放在function函数内)
就是再function函数中不需要定义,但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。
隐形参数特别像Java基础的可变长参数一样。
可变长参数其他是一个数组。
那么js中的隐形参数也跟Java的可变长参数一样。操作类似数组。
在js中万物皆对象,甚至数组字符串函数都是对象。所以这个叫做arguments的东西也是个对象,而且是一个特殊的对象,它的属性名是按照传入参数的顺序来的,第一个参数的属性名是'0',第二个参数的属性名是'1',以此类推,并且它还有个length属性,存储的是当前传入函数参数的个数,很多时候我们把这种对象叫做类数组对象。
JS中的自定义对象(扩展内容)
Object形式的自定义对象
对象的定义:
var 变量名 = new Object(); //对象实例(空对象) 变量名.属性名 = 值; // 定义一个属性 变量名.函数名 = function(){} // 定义一个函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // 对象的定义 // var 变量名 = new Object(); //对象实例(空对象) // 变量名.属性名 = 值; // 定义一个属性 // 变量名.函数名 = function(){} // 定义一个函数 var obj = new Object(); obj.name = "111"; obj.age = 18; obj.fun = function (){ alert("姓名:" + this.name + ",年龄:" + this.age); } // 对象的访问: // 变量名.属性 / 函数名(); alert(obj.age) </script> </head> <body> </body> </html>
花括号形式的自定义对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // 花括号形式对象的定义: // var 变量名 = { // 空对象 // 属性名:值, // 定义一个属性 // 属性名:值, // 定义一个属性 // 函数名:function(){} // 定义一个函数 // }; var obj = { name:"刘德华", age:19, fun : function(){ alert("姓名:" + this.name + ",年龄:" + this.age); } }; // 对象的访问: // 变量名.属性 / 函数名(); alert(obj.name); // 访问var内的局部变量 obj.fun(); // 访问var内的fun方法 </script> </head> <body> </body> </html>
JS中的事件
什么是事件?事件是电脑输入设备与网页进行交互的相应。我们称之为事件。
常用的事件:
onload:加载完成事件 页面加载完成之后,常用于做页面js代码初始化操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // onload事件的方法 function onloadFun(){ alert("静态注册onload事件,所有代码"); } // onload 事件动态注册是固定写法 window.onload = function (){ alert("动态注册的onload事件") } </script> </head> <!--静态注册事件onload事件 <body onload="alert('静态注册onload事件')"> --> <body> </body> </html>
onclick:单击事件 常用于按钮的点击相应操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onclickFun(){ alert("静态注册onclick事件"); } // 动态注册onclick事件 window.onload = function (){ // 1 获取标签对象 /* * document 是JavaScript语言提供的一个对象(文档) * get 获取 * Element 元素(就是标签) * * getElementById通过ID属性获取标签对象 */ var btnObj = document.getElementById("btn01"); // alert(btnObj); // 2 通过标签对象.事件名 = function(){} btnObj.onclick = function (){ alert("动态注册的onClick事件") } } </script> </head> <body> <!--静态注册onClick事件--> <button onclick="onclickFun();">静态注册</button> <!--动态注册onClick事件--> <button id="btn01">动态注册</button> </body> </html>
onblur:失去焦点事件 常用于输入框失去焦点后验证其输入内容是否合法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // onblur事件会在对象失去焦点时发生 // 静态注册失去焦点事件 function onblurFun(){ // console是控制台对象,是由JavaScript语言提供,专门用来向浏览器的控制器打印输出,用于测试使用 // log()是打印的方法 console.log("静态注册失去焦点事件"); } // 动态注册 onblur事件 window.onload = function (){ // 1.获取标签对象 var passwordObj = document.getElementById("password"); // alert(passwordObj); // 2.通过标签对象.事件名 = funcion(){}; passwordObj.onblur = function (){ console.log("静态注册失去焦点事件"); } } </script> </head> <body> 用户名:<input type="text" onblur="onblurFun();"><br/> 密码: <input id="password" type="text"><br/> </body> </html>
onchange:内容发生改变事件 常用于下拉列表和输入框内容发生改变后操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> function onchangeFun(){ alert("您的男神改变了") } </script> </head> <body> 请选择你心目中的男神: <select onchange="onchangeFun()"> <option>你自己</option> <option>洋洋</option> <option>羊羊</option> <option>阳阳</option> </select> </body> </html>
onsubmit:表单条件事件 常用于表单提交前,验证所有表单项是否合法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript"> // 静态注册表单提交事件 function onsubmitFun(){ // 要验证所有表单项是否合法,如果有一个不合法就阻止表单提交 alert("静态注册表单提交时间-----发现不合法") return false; } window.onload = function (){ // 1 获取标签对象 var fromObj = document.getElementById("form01"); // 2 通过标签对象.事件名 = function(){} fromObj.onsubmit = function (){ // 要验证所有表单项是否合法,如果有一个不合法就阻止表单提交 alert("动态注册表单提交事件-----发现不合法"); return false; } } </script> </head> <body> <from action = "http://localhost:8080" method = "get" onsubmit="return false"> <input type="submit" value="静态注册"/> </from> <from action = "http://localhost:8080" id="form01"> <input type="submit" value="动态注册"/> </from> </body> </html>
事件的注册又分为静态注册和动态注册两种
事件的注册(绑定)?
其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。
静态注册事件:通过html标签的事件属性直接赋值于事件响应后的代码,这种方式我们叫静态注册。
动态注册事件:是指先通过js代码得到的标签dom对象,然后再通过dom对象.事件名 = function(){}这种形式赋于事件响应后的代码,叫动态注册。
动态注册基本步骤:
1,获取标签对象
2,标签对象.事件名 = funcion(){}
DOM模型
DOM全程是Document Object Model 文档对象模型
就是把文档中的标签,属性,文本,转换成为对象来管理。
总结
本篇文章就到这里了,希望能给你带来帮助,也希望你能够多多关注我们的更多内容!