Java Web(四)--JavaScript

介绍

JavaScript 教程

    JavaScript 能改变 HTML 内容,能改变 HTML 属性,能改变 HTML 样式 (CSS),能完成页面的数据验证;
    JS 需要运行浏览器来解析执行JavaScript 代码
    JS 是 Netscape 网景公司的产品,最早取名为 LiveScript,后更名为 JavaScript,和 Java 没有关系;

  •         JavaScript 是一种解释型的脚本语言,C、C++等语言先编译后执行,而 JavaScript 是在程序的运行过程中逐行进行解释。
  •         JavaScript 是一种基于对象的脚本语言,可以创建对象,也可使用现有对象(有对象)。
  •         JavaScript 是弱类型的,对变量的数据类型不做严格的要求,变量的数据类型在运行过程可以变化。
  •         跨平台性(只要是可以解释  JS 的浏览器都可以执行,和平台无关);
  •         使用垃圾回收的编程语言,开发者不需要操心内存分配和回收,主流的垃圾回收算法是标记算法;

说明:

js代码可以写在 script标签中;
type="text/javascript" :表示这个脚本(script)类型是javascript,可以不写,但是建议写上;

js 语句可以不写 ; 建议写上。

使用方式

方式1

script 标签 写 JS 代码;





    
    script 标签中 写 JS 代码

    










 说明:

  • scrpt标签位置可以在 head 和 body 嵌入,执行顺序从上到下;
  • 建议放在head中
  • alert 是 JavaScript 语言提供的一个警告框函数。它可以输出指定的内容, 变量等信息。

方式2

使用script标签引入js文件




    
    使用 script 标签引入 JS文件

    







test.js文件JS代码:
alert("我是 test.js 文件");

两种使用js的方式,是二选一,不能混用。
若都使用,不会报错,但是只有一个生效, 前面引入的js生效。

好处:

  1. 可维护性
  2. 缓存。浏览器会根据特定的设置缓存所有外部链接的JavaScript文件,这意味着如果两个页面都用到同一个JavaScript文件,则该文件只需加载一次,这最终意味着页面加载更快。

内容

JS变量

JavaScript 变量表示存储数据的容器,通过 var 关键词来声明 JavaScript 变量,并以逗号分隔变量。

Java Web(四)--JavaScript_第1张图片

所有 JavaScript 变量必须以唯一的名称标识,这些唯一的名称称为标识符

标识符可以是短名称(比如 x 和 y),或者更具描述性的名称(age、sum、totalVolume)。

构造变量名称(唯一标识符)的通用规则是:

  • 名称可包含字母、数字、下划线和美元符号
  • 名称必须以字母开头
  • 名称也可以 $ 和 _ 开头(但是在本教程中我们不会这么做)
  • 名称对大小写敏感(y 和 Y 是不同的变量)
  • 保留字(比如 JavaScript 的关键词)无法用作变量名称
序号 名称 数据类型 备注
1 数值类型 number
2 字符串类型     string

可以双引号括起来, 也可以单引号括起来;

"a book of JavaScript"、 'abc'、"a"、 "";

3 对象类型 object
4 布尔类型 boolean
5 函数类型 function
6 不带有值的变量 undefined 未赋初始值时,默认 undefined
7 空值 null

ES2015 引入了两个重要的 JavaScript 新关键词:let 和 const

对比var与let、const

  • let不具备声明提升,var具备声明提升
  • let声明的范围是块作用域,而var声明的范围是函数作用域。
  • let是ES6才引入的声明关键字
  • for循环中的let声明
  • const与let很相似,最大的区别是const必须初始化,且不能再次赋值。

结语:

大多数开发者尽量限制自己只使用let和const,有助于提升代码质量,因为变量有了明确的作用域、声明位置、以及不变的值。
const优先,let次之。使用const声明可以让浏览器运行时强制保持变量不变,也可以让静态代码分析工具提前发现不合法的赋值操作。




    
    数据类型-特殊值




变量的特点:

  1. 原始值大小固定,保存在栈内存中
  2. 从一个变量到另一个变量复制原始值,会创建该值得第二个副本
  3. 引用值是对象,存储在堆内存中
  4. 包含引用值的变量实际上只包含指向相应对象的一个指针,而不是对象本身
  5. 从一个变量到另一个变量复制引用值,只会复制指针,因此结果是两个变量都指向同一个对象
  6.  typeof操作符可以确定值的原始类型,instanceof操作符用于确保值的引用类型(针对数组变量时候,注意使用instanceof的前提是只有一个全局执行上下文);

变量的执行:任何变量都存在于某个执行上下文中(也称为作用域)。这个上下文(作用域)决定了变量的生命周期,以及它们可以访问代码的哪些部分。

  1. 执行上下文分为 ① 全局上下文、② 函数上下文、③ 块级上下文
  2. 代码执行流每进入一个新上下文,都会创建一个作用域链,用于搜索变量和函数
  3. 函数或块的局部上下文不仅可以访问自己作用域内的变量,也可以访问任何包含上下文乃至全局上下文的变量
  4. 全局上下文只能访问全局上下文中的变量和函数,不能直接访问局部上下文中的任何数据
  5. 变量的执行上下文用于确定什么时候释放内存;

JS数组

Java Web(四)--JavaScript_第2张图片




    
    数组定义

    





JS函数

函数是由事件驱动的,或者当它被调用时,执行的可重复使用的代码块;

执行函数的方式:1、主动调用;2、事件触发。

Java Web(四)--JavaScript_第3张图片




    
    使用函数方式1
    







    
    使用函数的第二种方式
    






    
    函数使用注意事项和细节

    





说明: 

  • 如果不调用函数,那么该函数时不会执行;
  • JS中函数的重载会覆盖掉上一次的定义;
  • 函数的arguments隐形参数(作用域在 function  函数内),在function函数中不需要定义,可以直接用来获取所有参数的变量,跟 java  的可变参数一样。操作类似数组 public void fun( int ... args );
  • 实参、形参的类型、数量无需保持一致

JS自定义对象

Java Web(四)--JavaScript_第4张图片




    
    自定义对象
    








    
    自定义对象方式2:{} 形式
    






事件

事件是电脑输入设备与页面进行交互的响应;事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行;

事件的注册(绑定):    当事件响应(触发)后要浏览器执行哪些操作代码,叫事件注册或事件绑定;

静态注册事件:     通过 html 标签的事件属性直接赋于事件响应后的代码;

动态注册事件:   

  •           通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function(){} 形式;
  •           步骤:1. 获取标签<--->dom 对象; 2. dom 对象.事件名 = fucntion(){}

 常用事件

onload加载完成事件

  •     onload : 某个页面或图像被完成加载
  •     页面加载完成之后, 常用于做页面 js 代码初始化操作

onclick单击事件

  •     常用于按钮的点击响应操作

onblur失去焦点事件

  •     常用用于输入框失去焦点后验证其输入内容是否合法

onchange内容发生改变事件

  •     常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件

  •     常用于表单提交前, 验证所有表单项是否合法
  •     邮箱的正则表达式:        var emailPatt = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;



    
    onclick 单击事件
    












    
    onblur 失去焦点事件
    



输入英文单词:

输入英文单词:



    
    onchange 内容发生改变事件
    


你当前工资水平: 
 
你当前女友是谁:



    
    onsubmit 表单提交事件
    


注册用户1

u:
p:

注册用户2

u:
p:

运算符

算术运算符

用于执行变量与/或值之间的算术运算;

Java Web(四)--JavaScript_第5张图片

赋值运算符

用于给 JavaScript 变量赋值;

Java Web(四)--JavaScript_第6张图片

关系运算符

在逻辑语句中使用,以测定变量或值是否相等;

Java Web(四)--JavaScript_第7张图片

注意事项:
    等于: ==  是简单的做字面值的比较
    全等于:  === 除了做字面值的比较之外,还会比较两个变量的数据类型

逻辑运算符

用于测定变量或值之间的逻辑;

Java Web(四)--JavaScript_第8张图片

注意事项
    在 JavaScript  语言中,所有的变量,都可以做为一个 boolean 类型的变量去使用
    0  、null、  undefined、""(空串)  都认为是 false
    &&  且运算,有两种情况  =>  (即  && 返回值是遵守短路与的机制)
    ||  或运算,  有两种情况  => (即||  返回值是遵守短路或的机制)
    短路现象:当&&和||有确定结果后,后面的表达式不再执行;

条件运算符

类似 Java 的三元运算符。

    条件运算符
    

你可能感兴趣的:(web,java,前端)