【测试基础】之04 JS入门基础

目标

• 能够知道JS的定义和作用

• 掌握JS的基本用法

什么是JavaScript

• JavaScript是一种轻量级的编程语言，一种脚本语言

• JavaScript是可插入 HTML 页面的编程代码

• JavaScript可以控制HTML页面的结构和样式

JavaScript的用法

JS脚本的书写位置包括三种：

• JS内嵌式

• JS外链式

• JS行内式

JS内嵌式

• JS内嵌式就是把JS脚本写在HTML文档中，并且JS脚本必须位于 标签之间

• JS脚本可被放置在 HTML 页面的 和 部分中

    
        
        
        
    
    
        Hello World！
    

JS外链式

• 脚本可放置与外部文件中，专门用来存在JS脚本的文件，文件后缀名为 .js

• 外部脚本很实用，相同的脚本可以被许多不同的网页引用

• 外部脚本需要在                 Hello World！    

  JS行内式

  • JS行内式就是把JS脚步写到HTML标签上面

  • 缺点：不方便修改，没有实现代码的分离

  操作HTML元素

  • 使用JavaScript获取某个 HTML 元素，可以使用 document.getElementById(id) 方法

  • 使用innerHTML来获取或插入元素内容

  
  
  
      
      
  
  
      
  我的第一个 Web 页面
      
  第一段内容
  
  
  
  

  JS变量

  • 变量是用于存储信息的"容器"

  • 与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（例如Z=X+Y）

  JS变量的命名规范

  • 变量名应该由字母、数字、下划线、$构成，不建议使用中文（建议刚刚开始就养成一个正确使用变量的好习惯）

  • 变量名不能以数字开头

  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

  • 注意要使用英文输入法，输入，可以在百度上设置输入法输入符号都设置全英。

  var pi = 3.14;
  var name = "zhang san" ;

  创建JavaScript变量

  • 在 JavaScript 中创建变量通常称为"声明"变量

  • 使用 var 关键词来声明变量： var username;

  • 变量声明之后，该变量是空的（它没有值）

  • 为变量赋值需要使用等号： username = "张三";

  
  
  
      
      
  
  
      
  我的第一个 Web 页面
      
  第一段内容
  
  
  
  

  JS函数和事件

  JS函数的定义

  函数是JavaScript 中的基本组件之一。 一个函数是JavaScript 过程— 一组执行任务或计算值的语句。 要使用一个函数，你必须将其定义在你希望调用它的作用域内。 一个JavaScript 函数用 function 关键字定义，后面跟着函数名和圆括号。

  JS函数语法

  • 使用function关键字来定义

  • 代码块放到大括号中

  • 通过使用 函数名() 来调用函数

  • 当函数被调用时，会执行函数内的代码

  function functionName(){
      //执行的代码
  }

  示例：

  
  
  
      
      
  
  
      
  我的第一个 Web 页面
      
  第一段内容
  
  
  
  

  JS事件

  • HTML事件是发生在HTML元素上的事情

  • HTML事件可以是浏览器的行为，也可以是用户的操作行为（例如用户点击，网页加载完成）

  常见的HYML事件

  下面来举例一些比较常见的HTML事件的列表

  事件	事件描述
  onchange	HTML元素改变
  onclick	用户点击HYML元素
  onmouseover	用户在一个HTML元素上移动鼠标
  onmouseout	用户在一个HTML元素上移开鼠标
  onkeydown	用户按下键盘按键
  onload	浏览器完成页面加载

  如何为元素绑定事件

  通过元素属性绑定

  
  
  
      
      
      
  
  
      
  JS事件
      
  这里显示时间
      现在的时间是?
      
  
      
  
  

  通过JS脚本绑定

  事件三要素：事件源，事件类型=function(){触发后执行的代码}