Html之JavaScript学习笔记01

一、基础概念

JavaScript的导入方式

1. 内嵌方式：

   <div onclick="alert("xxx")">div</div>

2. 内部方式：

   <script type="text/javascript">
    function clickdiv(){
           alert("xxx");
    }
   

3. 外部方式：

   1. 在创建的java.js文件中写如下代码

      function clickdiv(){
             alert("xxx");
      } 

   2. 在.html文件中引入java.ja文件

      <script type="text/javascript" src="java.js"></script>

   3. 在.html文件中使用

      <div onclick="clickdiv()">div</div>

2.JavaScript的基本语法

1. js的数据类型

   1. 原始类型:String Number Boolean Null Undefined
   2. 引用类型:从Object”继承”过来的
      

   js中常用的对象：Boolean String Number Array Math Date RegExp
   js：Boolean String Number 伪对象（可以调用对象方法）

• 2.数据类型转换

  1. 使用js提供的方法进行转换

     1. Number /boolean转换成String ：使用toString()方法;
     2. String转Number ： 使用parseInt();和parseFloat();方法

     String转Number的时候如果字符串第一个字母不是数字，则转换不成功，如果字符串第一个字母是数字，则会取相连的数字

  2. 强制转换 var s = "123.3"; alert(Number(s)) //此处需要纯数字才能转换成功
alert(String(s)); alert(Boolean(s));
//只要s值不为0或者空，转换结果就为true，否则为false

• 3.==和===比较

  ==：比较值相等
  ===：先比较数据类型，再看值

  4.点击a标签不跳转

  //如果使用#，点击a标签会刷新当前页面，自动跳转当前页面的最顶部
  <a href="javascript:void(0)">xxx<div>

  3.1JavaScript的对象:

  三个伪对象：
  1.Number
  常用方法：toString();
  valueOf();

   var n = new Number(value); //创建一个Number对象
   var m = Number(value); //返回一个Number原始值
   var s = n.valueOf(); //返回n对象的原始值

  2.Boolean

  var myBool = new Boolean(value);   //返回一个boolean对象
  var myBool = Boolean (value);       //返回一个boolean原始数值
  alert(myBool.toString());           //转换为字符串
  alert(myBool.valueOf());           //获取myBool对象的原始值

  注：如果省略 value 参数，或者设置为 0、-0、null、”“、false、undefined 或 NaN，则该对象设置为
  false。否则设置为 true（即使 value 参数是字符串 “false”）。

  3.String
  3.1String对象的常用方法

  length 返回字符串长度
  charAt() 获取指定位置的字符
  indexOf()返回指定字符的下表索引
  lastIndexOf() 返回指定字符在字符串中最后一次出现的索引
  split() 分割字符串
  subStr() //有两个参数，第一个是截取起始位置，第二个是截取的长度
  subString()//有两个参数，第一个是截取的起始位置，第二个是截取的结束位置
  toLowerCase()
  toUpperCase()
  toString()
  valueOf()

  在多个字符串进行比较大小的时候，首先会比较这些个字符串的第一个字符，从小到大对字符串进行初步排序。对于第一次比较之后没有得出顺序的字符串，会进行第二次比较(比较的是第二个字符)…..以此类推

  3.2JavaScript的对象:
  Array
  Array对象的常用方法：

  join() 使用指定字符链接数组内容，返回字符串
  pop(); 删除并返回数组中最后一个元素
  push(); 向数组中追加一个元素 reverse(); 将数组反转 shift(); 删除并返回数组中第一个元素
  sort(); 给数组排序
  splice(); 有三个参数:第一个参数 ：起始位置 第二个参数：要替换的元素个数 第三个参数：把前面要替换的元素统一替换为指定内容
  toString();

  sort()方法的排序：
  在多个字符串进行比较大小的时候，首先会比较这些个字符串的第一个字符，从小到大对字符串进行初步排序。对于第一次比较之后没有得出顺序的字符串，会进行第二次比较(比较的是第二个字符)…..以此类推

  3.3JavaScript的对象:

  Date
  常用方法：

  toLocaleString ()
  getFullYear ();
  getMonth ();
  getDate ();
  getTime ();

  3.4JavaScript的对象:

  Math （注意：这个东西不需要new对象，直接使用类名调用方法）
  常用方法：

  abs(x)
  ceil(x)
  floor(x)
  max(x,y)
  min(x,y)
  pow(x,y)
  random()
  round(x) 四舍五入
  sqrt(x)

  JavaScript的对象:

  RegExp 正则
  正则的基本规则

       元字符
      \d   数字字符     0~9
     \D   非数字字符
      \s   空白字符   \r\n 空格
      \S   非空白字符
      \w   单词字符(a~z A~Z 0~9 _)
      \W   非单词字符
      \b   单词边界匹配符
  

  范围词

      [0-9]   当前的字符范围可以是0~9 
      [a-z]
      [A-Z]
       [a-z0-9A-Z]
  

  量词

      s+    至少出现一次
      s*    0次或者多次(包含一次)   
      s?    0次或者1次
     s{2}  正好出现两次
      s{2,} 出现至少两次
      s{2,8} 出现两到八次
  

  js中创建正则的两种方式：

  var reg = new RegExp(patten,attributes);
  var reg = /^patten$/

  举例：验证一个字符串中是否包含数字

  var reg = new RegExp("\\d+");
  var reg = /\d+/;
  reg.test(字符串);

  关于attributes的属性值：

  i 匹配的时候忽略大小写
  g 匹配的时候进行全局匹配

  正则常用的两个方法：

  reg.test(字符串) 检索字符串是否符合指定条件，返回true和false reg.exec(字符串)
  检索字符串符合指定条件的值，返回找到的值

  JavaScript的函数：
  注意点：

  1.javascript 中的函数的参数不需要声明类型
  2.如果函数需要返回值，不需要在方法中声明，可以直接return 返回值
  3.javascript中函数的参数都会存在一个叫做arguments的对象中
  4.javascript中声明一个函数的参数个数可以与调用该函数的时候传入的参数个数不一致

  js内置一些函数
  1.编码的三个方法 encodeURI　encodeURIComponent　　escape

  ２.eval ：将字符串当做js脚本来执行

  var s = "var a=10;alert(a)";
  eval(s);

  JavaScript的事件：
  html中如何写一个事件：
  方式1：直接在标签体里面写

  <div onclick="alert('zz')"></div>

  方式2：把事件写在中
  然后调用

  <script>
    function aa(){
     }
  </script>
  <div onclick="aa()"></div>

  方式3：使用dom分配事件的方式

  <script>
    document.getElementById("id").onclick = function(){
  
    }
  </script>

  注意：使用第三种方式给html元素分配事件的时候，代码尽可能写在html页面的最小面，这样就可以保证能够找到指定id对应的元素

  this：传递的是当前标签对象，一般情况下在使用方式2给html元素绑定事件的时候，需要传入this，用法如下：

  <script>
    function aa(t){
     }
  </script>
  <div onclick="aa(this)"></div>