JS 基础

javascript

• 面向对象，跨平台
• 用于控制网页的行为，可以与网页交互
• 与 java 完全不同，但语法相似

引入方式

内部脚本

• 直接在 HTML 文件内部通过 <script> 标签引入

  <script>
      alert("hello js");
  </script>

• 位置可任意，一般放于 body 底部

外部脚本

• 定义于外部 .js 文件中
• 在 HTML 中使用 <script> 标签引入

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

基础语法

书写语法

• 区分大小写
• 语句结尾分号可省略
• 大括号代表代码块

输出语句

• 使用 window.alert() 弹出警告框

• 使用document.write() 写入 HTML

• 使用 console.log() 写入浏览器控制台

  <script>
      window.alert("hello js~");//写入警告框
  
      document.write("hello js 2~");//写入html页面
  
      console.log("hello js 3");//写入浏览器的控制台
  </script>

变量

• 变量名由字母，_，数字，$ 组成，不能以数字开头，建议使用驼峰命名

• Js 为弱类型语言，变量可存放不同类型的值

• 使用 var 定义变量，var 定义变量全局有效，可重复定义

  <script>
    {
      var age = 18
      var age = 20//正确
    }
    window.alert(age)//20
  </script>

• ECMAScript6 新增 let 关键字，let 定义变量只带代码块中有效，不可重复定义

  <script>
    {
      let age = 18
      let age = 20//错误，不可重复定义
    }
    window.alert(age)//无法访问
  </script>

• const 声明常量，声明后值不可改变

  <script>
  	const pi = 3.14
    pi = 3//错误
  </script>

数据类型

原始类型

• number：数字（整数，小数，NaN(Not a Number)
• string: 字符和字符串，使用单引号和双引号均可
• boolean：布尔型， true false
• null: 对象为空
• undefined：当声明变量未赋初值，该变量默认值为 undefined
• 使用 typeof 获取数据类型

<script>
     number
     var age = 20;
     var price = 99.8;
     alert(typeof age);
     alert(typeof price);

    string
     var ch = 'a';
     var name = '张三';
     var addr = "北京";
    
     alert(typeof ch);
     alert(typeof name);
     alert(typeof addr);
    
     //boolean
     var flag = true;
     var flag2 = false;
    
     alert(typeof flag);
     alert(typeof flag2);
    
     //null
     var obj = null;
    
     alert(typeof obj);//Object
    
     //undefined
    var a ;
    alert(typeof a);

</script>

引用类型

运算符

• 与 java 相似
• ==
  1. 判断类型是否相同，不相同进行类型转换
  2. 比较转换后的值是否相同
• ===
  1. 判断类型是否相同，不相同返回 false
  2. 类型相同比较值

<script>
  var age1 = 20;
  var age2 = "20";
  age1 == age2;//true
  age1 === age2;//false
</script>

类型转换

• 其他类型转为 number
  • string：按照字符串的字面值转为数字，若部位数字则转为 NaN
  • boolean: true 转为1，false 转为0
• 其他类型转为 boolean
  • number: 0和 NaN 转为 false, 其他转为1
  • string: 空字符串转为 false, 其他转为 true
  • null&undifined: 转为 false

流程控制语句

• 与 java 相同

函数

• 定义：通过 function 关键字定义函数

  function functionName(参数1，参数2...){
  	//要执行的代码
  }

• 形式参数不用写类型，不用写返回值类型

• 传参个数大于形参个数也可正常调用，多余的参数被丢弃

• 传参数量少于形参个数也可正常调用，剩余参数用默认值代替（number 默认为 NaN)

JS 对象

Array

• 定义

  var arr = new Array(1,2,3);//方式1
  var arr = [1,2,3];//方式2

• 访问

  arr[0]=1

• 相当于 java 中的集合，变长变类型

  arr = [1,2,3];
  //变长
  arr[10] = 10;//可访问
  arr[10]//10
  arr[9]//undefined
  //变类型
  arr[5]="hello"
  arr[5];//"hello"

• 属性

  arr.length;//数组长度

• 方法

  arr.push(10);//将元素添加到数组末尾
  //arr.splice(起始位置，删除元素个数);
  arr.splice(0,1);//删除第0个元素

String

• 定义

  var str1 = new Strint("abc");
  var str2 = "abc";
  var str3 = 'abc';

• 属性

  str1.length 

• 方法

  str.charAt(0);//第0个字符
  str.indexOf('a');//'a'的下标
  str.trim();去除字符串两端空白字符

自定义对象

• 格式

  var 对象名称 = {
  	属性名称: 属性值1,
  	属性名称: 属性值2,
  	...
  	函数名称: function(形参列表){}
  	...
  };

• 示例

  var person = {
  	name: "zhangsan",
  	age = 23,
  	eat:function(){
  	alert("干饭～");
  	}
  }
  alert(person.name);
  alert(person.age);
  person.eat();

BOM

Window

• 浏览器窗口对象

• 获取： 直接使用 window ,其中 window. 可以省略

  window.alert("abc");

• 属性： 获取其他 BOM 对象 history, navigator, screen, location

• 方法

  • alert() 显示带有一段消息和一个确认按钮的警告框
  • confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
  • setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
  • setTimeout() 在指定的毫秒数后调用函数或计算表达式，只执行一次。

  //alert
  window.alert("abc");
  alert("abc");
  //confirm
  var flag = confirm("确认删除吗")；//点击确定返回 true, 点击取消返回 false；
  //setTimeout
  setTimeout(function(){
    alert("hello");
  }, 3000)//三秒后弹出 "hello" 窗口
  //setInterval
  setInterval(function(){
    alert("hello");
  }, 3000)//每隔三秒弹出 "hello" 窗口

History

• History: 历史记录

• 获取： 使用 window.history 获取，其中window.可以省略

  window.history.function();
  history.fuction();

• 方法

  • back() 加载 history 列表中的前一个 URL
  • forward() 加载 history 列表中的下一个 URL

Location

• Location: 地址栏对象

• 获取： 使用 window.location 获取，其中 window. 可以省略

• 属性

  href //设置或返回完整的 URL
  loaction.href = "https://www.baidu.com";//跳转到百度
  var href = location.href;//获取当前地址

DOM

• Document Object Model 文档对象模型

• 将标记语言的各个组成部分封装成对象

  • Document: 整个文档对象
  • Element: 元素对象
  • Attribute: 属性对象
  • Text： 文本对象
  • Comment：注释对象

  

• js 通过 DOM 对 HTML 进行操作

  • 改变 HTML 元素的内容
  • 改变 HTML 元素的样式（CSS）
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素

获取 Element

• Element：元素对象（标签）

• 获取：使用 Document 对象的方法获取

  document.getElementById();//根据 id 属性值获取，放返回一个 Element 对象
  document.getElementsByTagName();//根据标签名称获取，返回 Element 对象数组
  document.getElementsByName();//根据 name 属性值获取， 返回 Element 对象数组
  document.getElementsByClassName();//根据 class 属性值获取，返回 Element 对象数组

使用 Element

• 通过 style 设置标签样式

• 通过 innerHTML 设置文本内容

• <img> 标签

  var img = document.getElementById("light");获取图像
  img.src = "1.png";//改变图像内容

• 具体使用查看文档

事件监听

• 事件：HTML 事件是发生在元素上的”事情“，例如
  • 按钮被点击
  • 鼠标移动到元素之上
  • 按下键盘按键
• 事件监听： javascript 可以在事件被侦测到时执行代码

事件绑定

• 方式一：通过 HTML 标签中的事件属性进行绑定

  <input type="button" onclick='on()'>
  
  function on(){
  alert("按钮被点击");
  }

• 方式二：通过 DOM 元素绑定(推荐)

  <input type="button" id="btn">
  document.getElementById("btn").onclick = function() {
  	alert("按钮被点击")
  }

常见事件

• unblur: 元素失去焦点
• unfocus: 元素获得焦点
• onchange: 文本内容改变
• onclick: 按钮被点击
• onmouseover: 鼠标移到某元素上
• onmouseup: 鼠标按键被松开
• onsubmit: 表单中的确认按钮被点击

正则表达式

• 概念： 正则表达式定义了字符串组成的规则

定义

1. 直接量：注意不要加引号

   var reg = /^\w{6,12}$/;

2. 创建 RegExp 对象

   var reg = new RegExp("^\w{6,12}$");

方法

• test(str) :判断指定字符串是否符合规则，返回 true 或 false

语法

• ^ ：表示开始
• $ ：表示结束
• [] ：代表每个范围内的单个字符，比如[0-9]单个数字字符
• . :代表任意单个字符，除了换行符和行结束符
• \w : 代表单词字符：字母，数字，下划线，相当于[A-Za-Z0-9]
• \d ：代表数字字符，相当于[0-9]
• + ：至少一个
• * ：零个或多个
• ? ：零个或一个
• {x} ：x 个
• {m,} ：至少m个
• {m,n} ：至少 m 个，最多 n 个