JavaWeb--JavaScript

JavaScript

  • 1 JavaScript简介
  • 2 JavaScript引入方式
    • 2.1 内部脚本
      • 2.2 外部脚本
  • 3 JavaScript基础语法
    • 3.1 书写语法
    • 3.2 输出语句
    • 3.3 变量
    • 3.4 数据类型
    • 3.5 运算符
      • 3.5.1 \\== 和 ===区别
      • 3.5.2 类型转换
    • 3.6 流程控制语句
      • 3.6.1 if 语句
      • 3.6.2 switch 语句
      • 3.6.3 for 循环语句
      • 3.6.4 while 循环语句
      • 3.6.5 dowhile 循环语句
    • 3.7 函数
      • 3.7.1 定义格式
      • 3.7.2 函数调用
  • 4 JavaScript常用对象
    • 4.1 Array对象
      • 4.1.1 定义格式
      • 4.1.2 元素访问
      • 4.1.3 特点
      • 4.1.4 属性
      • 4.1.5 方法
    • 4.2 String对象
    • 4.3 自定义对象
  • 5 BOM
    • 5.1 Window对象
      • 5.1.1 获取window对象
      • 5.1.2 window对象属性
      • 5.1.3 window对象函数
      • 5.1.4 案例
    • 5.2 History对象
    • 5.3 Location对象
      • 5.3.1 获取Location对象
      • 5.3.2 Location对象属性
      • 5.3.3 案例
  • 6 DOM
    • 6.1 概述
    • 6.2 获取 Element对象
    • 6.3 HTML Element对象使用
  • 7 事件监听
    • 7.1 事件绑定
    • 7.2 常见事件
  • 8 表单验证案例
    • 8.1 需求
    • 8.2 环境准备
    • 8.3 验证输入框
    • 8.3 验证表单
  • 9 RegExp对象
    • 9.1 正则对象使用
      • 9.1.1 创建对象
      • 9.1.2 函数
      • 9.2 正则表达式
    • 9.3 改进表单校验案例


目标

  • 掌握 JavaScript 的基础语法
  • 掌握 JavaScript 的常用对象(Array、String)
  • 能根据需求灵活运用定时器及通过 js 代码进行页面跳转
  • 能通过DOM 对象对标签进行常规操作
  • 掌握常用的事件
  • 能独立完成表单校验案例

1 JavaScript简介


JavaScript 是一门跨平台、面向对象的脚本语言,而Java语言也是跨平台的、面向对象的语言,只不过Java是编译语言,是需要编译成字节码文件才能运行的;JavaScript是脚本语言,不需要编译,由浏览器直接解析并执行。

JavaScript 是用来控制网页行为的,它能使网页可交互;那么它可以做什么呢?如改变页面内容、修改指定元素的属性值、对表单进行校验等,下面是这些功能的效果展示:

  • 改变页面内容

    当我点击上面左图的 点击我 按钮,按钮上面的文本就改为上面右图内容,这就是js 改变页面内容的功能。

  • 修改指定元素的属性值

    JavaWeb--JavaScript_第1张图片

    当我们点击上图的 开灯 按钮,效果就是上面右图效果;当我点击 关灯 按钮,效果就是上面左图效果。其他这个功能中有两张灯泡的图片(使用img标签进行展示),通过修改 img 标签的 src 属性值改变展示的图片来实现。

  • 对表单进行校验

    JavaWeb--JavaScript_第2张图片

    在上面左图的输入框输入用户名,如果输入的用户名是不满足规则的就展示右图(上) 的效果;如果输入的用户名是满足规则的就展示右图(下) 的效果。

JavaScript 和 Java 是完全不同的语言,不论是概念还是设计,只是名字比较像而已。但是基础语法类似,所以我们有java的学习经验,再学习JavaScript 语言就相对比较容易些。

JavaScript(简称:JS) 在 1995 年由 Brendan Eich 发明,并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准 就叫 ECMAScript ,所有的客户端校验语言必须遵守这个标准,当然 JavaScript 也遵守了这个标准。ECMAScript 6 (简称ES6) 是最新的 JavaScript 版本(发布于 2015 年),我们的课程就是基于最新的 ES6 进行讲解。


2 JavaScript引入方式

JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有两种:

  • 内部脚本:将 JS代码定义在HTML页面中
  • 外部脚本:将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中

2.1 内部脚本

在 HTML 中,JavaScript 代码必须位于 标签之间

代码如下:

alert(数据) 是 JavaScript 的一个方法,作用是将参数数据以浏览器弹框的形式输出出来。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<script>
    alert("hello js1");
script>
body>
html>

效果如下:

JavaWeb--JavaScript_第3张图片

从结果可以看到 js 代码已经执行了。

提示:

  • 在 HTML 文档中可以在任意地方,放置任意数量的

2.2 外部脚本

第一步:定义外部 js 文件。如定义名为 demo.js的文件

项目结构如下:

JavaWeb--JavaScript_第4张图片

demo.js 文件内容如下:

alert("hello js");

第二步:在页面中引入外部的js文件

在页面使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<script src="../js/demo.js">script>
body>
html>

注意:

  • 外部脚本不能包含

你可能感兴趣的:(JavaWeb基础,javascript,java,前端,html)