一篇文章带你入门Java Script

概述

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 文档对象模型

就是把文档中的标签，属性，文本，转换成为对象来管理。

总结

本篇文章就到这里了，希望能给你带来帮助，也希望你能够多多关注服务器之家的更多内容!

原文链接：https://blog.csdn.net/qq_39527814/article/details/119080855