DAY08_JavaScript

目录

  • 1 JavaScript简介
  • 2 JavaScript引入方式
    • 2.1 内联脚本
    • 2.2 内部脚本
    • 2.3 外部脚本
  • 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 do while 循环语句
    • 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 自定义对象
    • 4.4 日期相关
  • 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对象使用
    • 6.4 小结
  • 7 事件监听
    • 7.1 事件绑定
    • 7.2 事件传递(事件冒泡)
    • 7.3 常见事件
    • 7.4 事件对象event
    • 7.5 事件取消
    • 7.6 隐藏元素和三目法则
  • 8 表单验证案例
    • 8.1 需求
    • 8.2 环境准备
    • 8.3 验证输入框
    • 8.4 验证表单
  • 9 RegExp对象
    • 9.1 正则对象使用
      • 9.1.1 创建对象
      • 9.1.2 函数
    • 9.2 正则表达式
    • 9.3 改进表单校验案例
  • 10 ES标准化

1 JavaScript简介

JavaScript 是一门跨平台、面向对象的脚本语言,而Java语言也是跨平台的、面向对象的语言,只不过Java是编译语言,是需要编译成字节码文件才能运行的;JavaScript是脚本语言,不需要编译,由浏览器直接解析并执行。
JavaScript 是用来控制网页行为的,它能使网页可交互;那么它可以做什么呢?如改变页面内容、修改指定元素的属性值、对表单进行校验等,下面是这些功能的效果展示:

  • 改变页面内容
    请添加图片描述
    当我点击上面左图的 点击我 按钮,按钮上面的文本就改为上面右图内容,这就是js 改变页面内容的功能。
  • 修改指定元素的属性值
    DAY08_JavaScript_第1张图片
    当我们点击上图的 开灯 按钮,效果就是上面右图效果;当我点击 关灯 按钮,效果就是上面左图效果。其他这个功能中有两张灯泡的图片(使用img标签进行展示),通过修改 img 标签的 src 属性值改变展示的图片来实现。
  • 对表单进行校验
    DAY08_JavaScript_第2张图片
    在上面左图的输入框输入用户名,如果输入的用户名是不满足规则的就展示右图(上) 的效果;如果输入的用户名是满足规则的就展示右图(下) 的效果。
  • JavaScript 和 Java 是完全不同的语言,不论是概念还是设计,只是名字比较像而已。但是基础语法类似,所以我们有java的学习经验,再学习JavaScript 语言就相对比较容易些。
  • JavaScript(简称:JS) 在 1995 年由 Brendan Eich 发明,并于 1997 年成为一部 ECMA 标准。ECMA 规定了一套标准 就叫 ECMAScript ,所有的客户端校验语言必须遵守这个标准,当然 JavaScript 也遵守了这个标准。ECMAScript 6 (简称ES6) 是最新的 JavaScript 版本(发布于 2015 年)
  • JavaScript小结:
    • 属于脚本语言,不需要编译,由浏览器解析执行
    • 属于弱语言类型
    • 基于面向对象
    • 安全性高:
      • JS只能访问浏览器内部数据
    • 交互性高:
      • JS语言可以直接镶嵌到html中,可直接在页面中和用户进行交互
    • 跨平台性:
      • 有浏览器的地方就可以执行JS

2 JavaScript引入方式

  • JavaScript 引入方式就是 HTML 和 JavaScript 的结合方式。JavaScript引入方式有三种:
    • 内联脚本:将JS代码定义在标签的属性中
    • 内部脚本:将 JS代码定义在HTML页面中
    • 外部脚本:将 JS代码定义在外部 JS文件中,然后引入到 HTML页面中

2.1 内联脚本

  • 触发时执行
<input type="button" value="内联" onclick="alert('hello js')">

效果如下:
DAY08_JavaScript_第3张图片

2.2 内部脚本

  • 加载页面时执行
    • 在 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>

效果如下:
DAY08_JavaScript_第4张图片
从结果可以看到 js 代码已经执行了。

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

你可能感兴趣的:(JavaWeb,javascript)