一篇文章带你入门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 文档对象模型

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

总结

本篇文章就到这里了,希望能给你带来帮助,也希望你能够多多关注我们的更多内容!

(0)

相关推荐

  • JavaScript实现网页贪吃蛇游戏

    本文实例为大家分享了JavaScript实现网页贪吃蛇游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head><title>贪吃蛇</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <s

  • JavaScript平铺数组转树形结构的实现示例

    目录 后台丢来了1w条数据 递归方式 非递归方式 总结 后台丢来了1w条数据 千算万算,还是没有逃过,后台真的就上万条数据一次丢给前端了.好吧,好在还不是10w条.如下,后台返回的是这样的结构: const flatArr = [ { id: '001', name: '节点1' }, { id: '0011', parentId: '001', name: '节点1-1' }, { id: '00111', parentId: '0011', name: '节点1-1-1' }, { id:

  • javaScript实现网页版的弹球游戏

    利用javeScript对象以及方法实现的网页弹球游戏,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <tilie>呼呼哈嘿的网页弹球</title> </head> <body> <canvas id="canvas"width="400"height="400"></canvas> <scr

  • JavaScript数据类型转换实例(其他类型转字符串、数值型、布尔类型)

    前言 什么是数据类型转换? 使用表单.prompt 获取过来的数据默认类型是字符串类型的,此时就不能直接进行加减法运算,而需要转换变量的数据类型. 通俗来说,数据类型转换就是将一种数据类型转换成另外一种数据类型. 在平常代码的使用中,我们偶尔会遇到需要进行数据类型转换的时候,比如将数值型转换为字符串,或者将null/undefined转换为布尔类型等等,这篇文章我们主要讲以下三种类型的转换: 其他类型转为字符串 其他类型转为数值型 其他类型转为布尔类型 其他类型转为字符串: 有三种方法 //第一

  • JavaScript实现大文件分片上传处理

    很多时候我们在处理文件上传时,如视频文件,小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题: 1.文件过大,超出服务端的请求大小限制: 2.请求时间过长,请求超时: 3.传输中断,必须重新上传导致前功尽弃 这些问题很影响用户的体验感,所以下面介绍一种基于原生JavaScript进行文件分片处理上传的方案,具体实现过程如下: 1.通过dom获取文件对象,并且对文件进行MD5加密(文件内容+文件标题形式),采用SparkMD5进行文件加密: 2.进行分片设置,文件Fil

  • 一篇文章带你入门Java Script

    目录 概述 特点 和Java的区别 弱类型语言 强类型语言 书写位置 数组 函数 JS中的自定义对象(扩展内容) Object形式的自定义对象 JS中的事件 常用的事件: 动态注册基本步骤: DOM模型 总结 概述 JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码. JS组成部分: 组成部分 作用 ECMA Script 构成了JS核心的语法基础 BOM Browser Object Model 浏览

  • 一篇文章带你入门java面向对象

    目录 一.继承 示例: 二.重载 三.接口 1.接口与类相似点: 2.接口与类的区别: 3.语法 四.枚举 1.定义 2.迭代枚举元素 3.在 switch 中使用枚举类 总结 一.继承 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为 本章就以人.学生.老师作为例子.学生和老师都继承人这个对象,都有人的特征和行为,人就是父类,老师和学生就是子类 示例: 人类: package com.zhouzy.base.t7;

  • 一篇文章带你入门Java修饰符

    目录 定义 分类 访问控制修饰符 非访问控制修饰符 修饰符的使用说明 修饰类 修饰方法 访问控制修饰符 非访问控制修饰符 修饰变量 总结 定义 Java修饰符:修饰符用来定义类.方法或者变量,通常放在语句的最前端. 分类 主要分为2类: 访问控制修饰符 非访问控制修饰符 访问控制修饰符 可以使用访问控制符来保护对类.变量.方法和构造方法的访问.分为以下4中权限:private,default,protected,public. 权限说明: 修饰符 当前类 同包 子类(不同包) 不同包(其他类)

  • 一篇文章带你入门Java字面量和常量

    目录 引言 概念 字面量 字面量的分类 常量 总结 引言 ♀ 小AD:哥,前两天我没有闪现到刺客脸上了吧 ♂ 明世隐:在这方面做的有进步. ♀ 小AD:明哥教的好,通过学习Java关键字,游戏水平也得到了提升,一举两得,舒服. ♂ 明世隐:可是你看到残血还是上头啊,是了多少次,你说? ♀ 小AD:5.6次吧 ♂ 明世隐:岂止5.6,起码10次. ♀ 小AD:这不是看到200金币,经不住诱惑吗 ♂ 明世隐:关爱残血,你学哪里去了,游戏中就不能多一些人间的关爱吗?你就不能关爱一下放暑假的小弟弟小妹妹

  • 一篇文章带你入门Java继承

    目录 Java中继承 什么是继承: 为什么要用继承: 学习总结: 继承关键字:extends 总结 Java中继承 什么是继承: 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. 为什么要用继承: 可以去掉重复代码,方便后期维护 举个列子,大家应该都玩过英雄联盟,每个英雄都是一个类,如果说不用继承的话每次都要重复定义每个英雄的成员属性,如下图我举了一个MF,一个EZ的列子 public class MissFortu

  • 一篇文章带你入门Java封装

    目录 什么是封装 如何实现封装 代码展示 构造方法 注意点: 代码展示 总结 封装的优点 什么是封装 Java中的封装是将数据(变量)和作用于数据(方法)的代码作为一个单元包装在一起的机制. 在封装中,类的变量将从其他类隐藏,并且只能通过当前类的方法访问. 如何实现封装 可以分为两步: 第一步:将类的变量声明为private. 第二步:提供公共set和get方法来修改和获取变量的值. 代码展示 public class User { private String name; private in

  • 一篇文章带你入门Java基本概念

    目录 Java基本概念 一.JRE(Java运行时环境) 二.JDK(Java开发工具) 三.Java源代码文件(.class) 四.Java字节码文件(.java) 五.Java虚拟机(JVM) 六.跨平台运行 七.JDK与JRE.JVM的关系? 八.几个结论 总结 Java基本概念 JDK包含了不少Java开发相关命令.如,javac.java.javap.javaw.javadoc.虽然现在的Java开发都使用IDE完成,基本上不会直接使用这些命令.但是理解这些命令的用法,可以让我们更加扎

  • 一篇文章带你入门Java运算符

    目录 算数运算符(Arithmetic operator) 关系运算符(Relational operator) 逻辑运算符(Logical operator) 赋值运算符(Assignment Operators) 三元运算符(Ternary operator) 运算符优先级 标识符的命名规则和规范 关键字定义和特点 保留字 总结 运算符时一种特殊的符号,用以表示数据的运算,赋值和比较等. 算数运算符 赋值运算符 关系运算符 逻辑运算符 位运算符 三元运算符 算数运算符(Arithmetic

  • 一篇文章带你入门java泛型

    目录 一.什么是泛型 二.语法 三.示例 1.简单示例 2.返回最大值-支持各种数据类型 3.泛型类 4.类型通配符 总结 一.什么是泛型 Java 泛型(generics)是 JDK 5 中引入的一个新特性, 泛型提供了编译时类型安全检测机制,该机制允许程序员在编译时检测到非法的类型. 泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数. 二.语法 你可以写一个泛型方法,该方法在调用时可以接收不同类型的参数.根据传递给泛型方法的参数类型,编译器适当地处理每一个方法调用. 下面是定

  • 一篇文章带你入门java多线程

    目录 一.描述 二.一个线程的生命周期 三.线程的优先级 四.创建线程 五.示例 1.Runnable接口 2.继承Thread 3.Callable 和 Future 创建线程 4.测试 总结 一.描述 Java 给多线程编程提供了内置的支持. 一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. 多线程是多任务的一种特别的形式,但多线程使用了更小的资源开销. 这里定义和线程相关的另一个术语 - 进程:一个进程包括由操作系统分配的内存空间,包含一个

随机推荐