js初步用法

Posted 2020-09-25 终难遇

js
 js引入方式:
  1.方式一
   通过script标签引入

  2.方式二
   通过script标签引入 ,src属性 引入一个外部的js文件

 注意: 如果你使用了script标签的src属性 那么在其标签体内的js代码不起作用了
语法:
 1.ECMAScript语法规范
  livescript
 2.BOM浏览器对象模型
  
 3.DOM文档对象模型
  
 1.变量定义:
  var i=1;
  var m;
  js中也有注释一说:
   单行注释//
   多行注释 /**/
  语句结束分号结尾 可以不写 建议写上

 2.数据类型
  原始类型:
   Undefined:变量初始值 如果函数没有返回值 你却接收了
   String:用""引起来
   Number:数值
   Boolean:true|false
   Null:null 一个对象的占位符
   typeof运算符 它会判断当前变量的数据类型 如果它是原始类型 会返回数据类型的类型值(小写) 如果不是返回一个object

  引用类型:
   new 对象();
 3.控制语句
  跟java基本一致
  if for
 4.运算符
  跟java基本一致
  关系运算符
   > >= < <=
   1.比较双方 如果都是number类型  跟java一致
   2.比较双方 都是普通字符串 它会比较两者的ascci码
   3.比较双方 一方是number 一方是可以转换成number累性 隐式转换再比较
   4.比较双方 一方是number 一方是不可转化字符串 直接返回false

 

 

 

  等性运算符
   ==
   ===
   == 比较两个变量字面值相同即可返回true
   === 在比较字面值相同的基础之上 判断类型是否相同

 5.函数
  定义
   方式一
    function 函数名(参数列表){
     js代码块
    }
   方式二 匿名函数
    var f=function (参数列表 ){
    }
   注意:
    调用函数
     函数名(参数列表);
    参数声明过程 参数列表不写类型
    如果你想要有返回值 只需要在函数结束结束用return 关键字 返回结果即可

 6.事件
  表单提交事件
  单击事件 onclick
  页面加载成功事件 onload
  事件绑定
   方式一
    通过标签的事件属性来绑定
   方式二
    派发机制
     元素.事件名=function(){
     
     }
   
    var obj=document.getElementById("ID");   
   
定时器:
 定义:
  方式一
   setInterval(函数名,周期性的间隔的毫秒值);
  方式二
   setInterval("函数名()",周期性的间隔的毫秒值);
  方式三
   setInterval(function(){
    js代码块
   },周期性的间隔的毫秒值);
两种定时器

  定时器定义的函数会有一个返回值 返回值就是它的id

  1.周期性定时器
    var intervalId=setInterval(函数名,周期性的间隔毫秒值)
  2.一次性定时器
    var timeoutId=setTimeout(函数名,延迟的毫秒值);
  
 清除定时器:

  1.清除周期性定时器
   clearInterval(周期性定时器的id);
  2.清除一次性定时器
   clearTimeoout(一次性定时器的id);

BOM 浏览器对象模型
 Window:
  //如果是你要获取的是window的属性 或方法 window可以不写

  常用属性:
   用它获取其他几个常用属性
   var history=window.history;
   history===window.history
  常用方法:
   弹出框类:
    alert("信息");//弹出警告框
    confirm("你确认删除吗");//弹出一个确认框
    prompt("输入信息的提示信息",默认值);//弹出一个输入框 如果你确定 返回你输入值 如果取消 null
   定时器:
   打开和关闭:
    open(url);
    close();

 History:
  forward:前进一个页面
  back:后退一个页面
  go(1);
   1:前进一个页面
   -1:后退一个页面

 Location:
  href:设置值 跳转
dom操作
 获取元素
 var obj=document.getElementById("");
 //获取值
  obj.value
 //设置值
  obj.value=值
 //获取标签体内容
  obj.innerhtml;
 //设置
  obj.innerHtml=值
 使用正则表达式校验数据
  1.编写正则表达式
   1.用户名的正则:var reg=/^[a-z0-9_-]{3,16}$/
   2.密码：/^[a-z0-9_-]{6,18}$/
   3.电子邮箱：/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
   4.空字符串: /^\s*$/
  2.使用正则表达式的test()方法
    reg.test(value);
事件总结:
 必须掌握:
  onsubmit:表单提交事件
  onclick:单击事件
  onload:页面加载成功事件
  onfocus:获取焦点
  onblur:丢失焦点
 需要了解:
  跟鼠标相关:
   onmouseup:鼠标弹起
   onmousedown:鼠标按下
   onmouseover:鼠标悬停
   onmouseout:鼠标离开
   onmousemove:鼠标移动
   
   ondblclick:鼠标双击
  跟键盘相关:
   onkeyup:按键弹起
   onkeydown:按键按下
   onkeypress:按键按下并弹起
  跟表单相关:
   onreset:重置表单事件
   onchange:改变事件
DOM
 文档对象模型
  document节点
  元素节点:
  属性节点:
  文本节点
 查询操作:
  获取元素:
  1.document.getElementById("x");//获取标签的iD属性值为x的一个标签
  2.document.getElementsByTagName("y");//获取标签名为y的一组标签(多个)
  3.document.getElementsByName("z");//获取标签的name属性为z的一组标签
  4.document.getElementsByClassName("w");//获取标签的class属性为w的一组标签(多个)
  //获取值:
   obj.value
  //设置值:
   obj.value=值
  //获取标签体的内容
   obj.innerHtml;
  //设置标签体:
   obj.innerHtml="<a href=‘#‘>点我试试</a>";
  //获取样式
   obj.style.css属性名:如果有- 去掉 驼峰式命名
  //设置
   obj.style.css属性名=css属性值
 扩展-其他的api:
  document: 
   createAttribute(name):创建一个属性节点
   createElement():创建一个元素节点
   createTextNode(data):创建一个文本节点
  element:
   appendChild():添加子节点
数组:
 语法:
  var arr1=new Array();//创建一个空数组
  var arr2=new Array(size);//创建一个指定长度的数组
  var arr3=new Array(ele1,ele2,ele3...);//创建一个数组 并且初始化数据
 注意:
  js的数组中没有长度可变
  js数组中可以存放不同类型

 属性:
  length:长度
  arr.length
 常用方法:
  join();//用指定的风格符 拼接字符串

  往数组头部添加数据
   unshift();
  从数组头部删除数据
   shift();

  往数组尾部添加数据
   push()
  从数组尾部删除数据
   pop()

  会改变数组的结构
   sort();
   reverse();
js的引用类型
 1.Array:数组
  
  在js中 原始类型 string boolean number
  引用类型中  string  boolean number  
  称之为原始类型的包装类 原始类型.方法();
 2.String:
  new String(s);//object typeof运算符 object
  String(s);//它是原始类型
  常用属性:
   length:长度
  常用方法:
   substring(startindex,endindex);[)
   slice(startindex,endindex);
    endindex:取值可以为负数
     -1:倒数第一个
   split();切割字符串
   replace(正则表达式)
   match(正则表达式);

 3.Number
  new Number();//object
  Number();//原始类型
 4.Boolean
  new Boolean();//object
  Boolean();//原始类型
 5.RegExp:
  /直接量写法/
  test()
 6.Math:
  Math.PI
  Math.random();
  Math.round();
 7.Date
  var date=new Date();
  常用方法:
   getTime();
   toLocaleString()
 8.全局函数
  尝试转换为int整形数值
   parseInt();
  尝试转换为float浮点数
   parseFloat();
  
  强制转换数值类型
   Number();
  强制转换成字符串
   String();

  encodeURI():编码
  decodeURI():解码

  eval()//计算 javascript 字符串，并把它作为脚本代码来执行。