尚硅谷hbase笔记尚硅谷javascript

转载

技术领航者之声 2023-06-15 19:34:33

文章标签 javascript写后端 js javascript java 静态注册 文章分类 Hbase 数据库

文章目录

JavaScript

JavaScript中的变量

变量的声明
数组

JavaScript中的运算

逻辑运算
关系运算

JavaScript中的函数

函数的声明
有关注意事项

JavaScript中的对象

方法一：使用new的方式定义对象
方法二：使用大括号建立对象

JavaScript中的事件

注册onload事件
注册onclick事件
注册onblur事件
注册oncharge事件
注册onsubmit事件

JavaScript

JavaScript中的变量

JavaScript是一种动态语言——即其是一种解释性语言，并非编译性语言，不能编译成二进制文件。

JavaScript中存在几种常用的变量类型，用于逻辑判断以及数据存储

数值类型：number
字符串类型：string
对象类型：object
布尔类型：boolean
函数类型：function

几种特殊数值类型

未定义类型：undefined，所有未赋值的的变量默认值都是undefined
空值：null
非数值：NAN

变量的声明

在JavaScript中一般通过var关键字来声明对象

var carName;		//默认为undefine

数组

JavaScript中数组不需要提前声明，可以用的时候直接声明在获取。对于已经声明的元素，获得对应元素，对于没有声明的元素，返回为为定义，JavaScript中的数组会动态扩容。

JavaScript中有两种声明数组的方法

方法一：直接填写对象

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];

方法二：new一个对象

var cars = new Array("Saab", "Volvo", "BMW");

对于数组原色的访问，可以通过for循环进行便利获取

JavaScript中的运算

逻辑运算

在JavaScript中，所有变量都可以作为一个boolean类型的变量去使用，0 、null、 undefined、””(空串) 都认为是 false

另外，&&且运算有两种情况

当表达式全为真时，返回最后一个表达式的值
当表达式有一个为➕，返回第一个为假的表达式的值

其次，||或运算

当表达式全为假时，返回最后一个表达式的值
只要有一个表达式为真，把第一个为真的表达式的值返回

关系运算

两种关系运算

==：比较两者数值是否相同
===：比较两者数值以及类型是否同时相同

JavaScript中的函数

JavaScript函数是被设计为执行特定任务的代码块，其会在某代码调用它时被执行。

函数的声明

第一种定义方式

无参函数

function fun(){
  alert("无参函数fun()被调用了");
}

有参函数构造

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

⚠️ 注意：这里参数数量不一定要与调用它的时候相同；由于JavaScript中不允许函数重载，因此无论输入多少参数，都会找到对应的参数。

第二种定义方式

无参函数

var fun = function () {
            alert("无参函数");
        }

fun();//调用函数

有参函数

var fun2 = function (a,b) {
            alert("有参函数a=" + a + ",b=" + b);
        }
fun2(1,2);//调用函数

有关注意事项

⭐️ JavaScript中不允许函数重载

为什么？

答：首先，定义JavaScript函数bai时，函数名是函du数对象的标识，参数数量只是这个zhi函数的属性。靠定义参数数量不同的函数实现重载是不行的；其次，调用函数时，js通过函数名找到对应的函数对象，然后根据函数按照定义时的参数，和表达式参数列表按顺序匹配，多余的参数舍去，不够的参数按undefined处理，然后执行函数代码。所以，js重载函数需要通过函数代码判断参数值和类型实现。

对于多余的参数，其并没有真正地舍去，而是被隐藏在function参数内部，可以通过arguments[]数组在内部调用；见如下代码：

// 需求：要求 编写 一个函数。用于计算所有参数相加的和并返回
function sum(num1,num2) {
  var result = 0;
  for (var i = 0; i < arguments.length; i++) {
    if (typeof(arguments[i]) == "number") {
      result += arguments[i];
    }
  }
  return result;
}
alert( sum(1,2,3,4,"abc",5,6,7,8,9) );	//45 = 1+2+3...+9

JavaScript中的对象

JavaScript中有两种定义对象的方法

方法一：使用new的方式定义对象

// 对象的定义：
//     var 变量名 = new Object();   // 对象实例（空对象）
//     变量名.属性名 = 值;          // 定义一个属性
//     变量名.函数名 = function(){}  // 定义一个函数

代码：

<script type="text/javascript">

  var obj = new Object();
	
	// 这里关于对象的属性键值可以自定义
  obj.name = "华仔";
  obj.age = 18;

	// 成员方法的定义也是自定义
  obj.fun = function () {
    alert("姓名：" + this.name + " , 年龄：" + this.age);
  }

  // 对象的访问：
  //     变量名.属性 / 函数名();
  // alert( obj.age );
  obj.fun();

</script>

方法二：使用大括号建立对象

// 对象的定义：
// var 变量名 = {       // 空对象
//     属性名：值,        // 定义一个属性
//     属性名：值,        // 定义一个属性
//     函数名：function(){}    // 定义一个函数
// };

代码

var obj = {
  name:"ggs",
  age:18,
  fun : function () {
    alert("姓名：" + this.name + " , 年龄：" + this.age);
  }
};

JavaScript中的事件

什么是事件？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

或者称HTML事件时发生在HTML元素上的事情，当在HTML页面中使用JavaScript时，JavaScript能够“应付”这些事件

常见的事件：

onload加载完成事件：页面加载完成之后，常用语做页面js代码初始化操作
onclick单击事件：常用语按钮的点击响应操作
onblur失去焦点事件：常用于输入框失去焦点后验证其输入内容是否合法
onmouseover：移入事件：用户把鼠标移动到HTML元素上
onmouseout：移出事件：用户把鼠标从HTML元素上移出
onchange内容发生改变事件：常用语下拉列表和输入框内容发生改变后操作
onsubmit提交表单事件：常用语表单提交前，验证所有表单项是否合法

两种事件注册

什么是事件注册（绑定）？其实就是告诉浏览器，当事件响应后要执行那些操作代码，叫事件注册或绑定。

静态注册：通过html标签属性直接赋予响应后的代码，这种方式叫做静态注册

动态注册：是指先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式赋予事件响应后的代码，叫动态注册

基本步骤：

获取标签对象
标签对象.对象名=function(){}

注册onload事件

onload事件时浏览器解析完页面之后就会触发的事件，可以将注册内容写在html以及JavaScript中，在页面完全载入后(包括图片、css文件等等。)执行脚本代码。

在html中的代码：书写在标签中（静态注册）

<script type="text/javascript">
  // onload事件的方法
  function onloadFun() {
    alert('静态注册onload事件，所有代码');
  }
</script>

<body onload="onloadFun();">
  
</body>

因此，如果希望在页面加载完成之后执行某些操作时，可以在body中增加一个onload属性，引入某个功能函数。

在JavaScript中写代码：写在中

<script type="text/javascript">
   
        // onload事件动态注册。是固定写法，不需要在body中写其他内容
        window.onload = function () {
            alert("动态注册的onload事件");
        }
</script>

注册onclick事件

**静态注册：**在中定义函数，直接告诉浏览器，当调用onclickFun()后要执行的代码。

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript">
    function onclickFun() {
    alert("静态注册onclick事件");
  }
  </script>
</head>
<body>
    <!--静态注册onClick事件-->
    <button onclick="onclickFun();">按钮1</button>
    <button id="btn01">按钮2</button>
</body>

动态注册：先通过getElementById，通过id获取对应的DOM对象（标签对象），然后设置该标签的click事件

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">


      window.onload = function () {
      // 1 获取标签对象
      var btnObj = document.getElementById("btn01");

      // 2 通过标签对象.事件名 = function(){}
      btnObj.onclick = function () {
        alert("动态注册的onclick事件");
      }
    }

    </script>
</head>
<body>
    <!--静态注册onClick事件-->
    <button onclick="onclickFun();">按钮1</button>
    <button id="btn01">按钮2</button>
</body>

注册onblur事件

<body>
    用户名:<input type="text" onblur="onblurFun();"><br/>
    密码:<input id="password" type="text" ><br/>
</body>

静态注册

<script type="text/javascript">
  // 静态注册失去焦点事件
  function onblurFun() {
  // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出， 用于测试使用
  // log() 是打印的方法
  console.log("静态注册失去焦点事件");
}
</sript>

动态注册

<script>
  window.onload = function () {
      //1 获取标签对象
     var passwordObj = document.getElementById("password");

      //2 通过标签对象.事件名 = function(){};
      passwordObj.onblur = function () {
          console.log("动态注册失去焦点事件");
      }
  }
</script>

注册oncharge事件

oncharge事件是当某个选项完成了改变执行的操作

</head>
<body>
    请选择你心中的女神：
    <!--静态注册onchange事件-->
    <select onchange="onchangeFun();">
        <option>--女神--</option>
        <option>高佳好</option>
        <option>方圆</option>
        <option>娘娘</option>
    </select>

</body>

静态注册

需要在选择中定义onchange属性，并注册对应的函数，并在中完成对应的注册信息

<script type="text/javascript">
        function onchangeFun() {
            alert("女神已经改变了");
        }
</script>

动态注册

<script>
  window.onload = function () {
  //1 获取标签对象
  var selObj = document.getElementById("sel01");
  // alert( selObj );
  //2 通过标签对象.事件名 = function(){}
  selObj.onchange = function () {
    alert("男神已经改变了");
  }
}
</script>

    <select id="sel01">
        <option>--男神--</option>
        <option>国哥</option>
        <option>华仔</option>
        <option>富城</option>
    </select>

不需要在中完成对应的注册

注册onsubmit事件

onsubmit事件是针对于表单的属性，可以在form表单中静态注册；其中如上文提到的action标签写了目标地址，onsubmit会自动跳转。

一般而言，需要在onsubmit中增加对表单中填写的数据是否合法的判断，如果不合法应当在最后增加一个return fasle，组织页面发生跳转

<body>
    <!--return false 可以阻止 表单提交 -->
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();">
        <input type="submit" value="静态注册"/>
    </form>
</body>

静态注册

注意这里关于阻止提交时的方法，如果是return false就会阻止，如果是return true就会继续提交

// 静态注册表单提交事务
function onsubmitFun(){
  // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
  alert("静态注册表单提交事件----发现不合法");

  return flase;
}

动态注册

<script type="text/javascript" >
  // 静态注册表单提交事务
  function onsubmitFun(){
  // 要验证所有表单项是否合法，如果，有一个不合法就阻止表单提交
  alert("静态注册表单提交事件----发现不合法");

  return flase;
}

</script>
<form action="http://localhost:8080" id="form01">
  <input type="submit" value="动态注册"/>
</form>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：Java R 数据库 java数据库语句

下一篇：linux java 上传附件 java发送附件

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯