js入门笔记

JavaScript基础语法

• 书写语法
• 输出语句
• 变量
• 数据类型
• 运算符
• 流程控制语句
• 函数

书写语法

1. 区分大小写
2. 行结尾的分号可有可无
3. 大括号内包含代码块

输出语句

window.alert();//弹出警告框

doucument.write();//写入HTML

console.log();//写入控制台

变量

• JavaScript中使用var关键字来声明变量

  var test=20;
  test="张三";

• JavaScript是一门弱类型的语言，变量可以存放不同类型的值

• 变量名需要遵循以下的规则：

  1. 组成字符可以是任何字母，数字，下划线或美元符号
  2. 数字不能开头
  3. 建议使用驼峰命名

• var所声明的变量都是全局变量

  并且变量可以重复定义，效果是直接进行覆盖的

• let关键字，来定义变量，用法类似var，但定义的变量是局部变量，并且不允许重复定义

• const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能进行改变了（类似final关键字声明的变量）

数据类型

JavaScript的数据类型分为：原始类型和引用类型

5种原始类型

• number：数字

• string：字符

• boolean：布尔类型

• null：对象为空

• undefined：当变量未初始化时，该变量的默认值是undefined

  使用typeof运算符可以获取数据类型

  alert(typeof age);

运算符

• 一元运算符

• 算术运算符

• 赋值运算符

• 关系运算符（与java相比，多了一个===）

  ==判断方法：

  1. 判断类型是否一致，如果不一样，则进行类型转换
  2. 再去比较

  ===判断方法：

  1. 判断类型是否一样，不一样直接返回false
  2. 如果一样，比较值是否一样

  var age1=20;
  var age2="20";
  
  alert(ag1==age2);//true
  alert(ag1===age2);//false

• 逻辑运算符

• 三元运算符 条件表达式?true_value : false_value

类型转换

其他类型转为number:

• string :按照字符串的字面值，转为数字，如果不是数字，则转为NaN。一般使用parseInt进行转换

• boolean：按照true转为1， false转为0

其他类型转为boolean:

• number：0和NaN转为false，其他的数字转为true

• string：字符串有内容转换为true，没有内容转换为false

  //因此可以直接对str进行健壮性判断
  if(str){
  alert("true");
  }

• null 转换为false

• undefined 转换为false

流程控制语句

• if
• switch
• for
• while
• do…while

函数

js中的函数是通过function进行定义的，语法为

function functionName(参数){
执行的代码
}

var functionName= function(参数){
执行的代码
}

JavaScript对象

Array数组对象

• 定义

var 变量名=new Array(元素列表);

var 变量名=[元素列表]；

• 访问

arr[index] =值;
arr[0] =1;

• 特点

  该数组其实相当于java中的集合pro，是变长，变类型的，没有定义长度和放入元素的类型

• 属性

  //length：数组中的元素个数
  var arr=[1,2,3];
  
  for(let i=0;i<arr.length;i++){
  alert(arr[i]);
  }

• 方法

  //push：添加方法
  var arr=[1,2,3];
  arr.push(10);
  alert(arr);//输出1，2，3，10
  //splice:删除元素
  arr.splice(0,1);
  //spice方法的第一个参数是从第几个开始删除数据，第二个参数是从删除几个的参数
  alert(arr);//输出2,3

String字符串对象

• 定义

var 变量名=new String(s);

var 变量名=s;

• 属性

  //length属性
  var str="aaa";
  alert(str.length);
  //输出3

• 方法

  //trim()
  var str="   aaa    ";
  alert(1+str+1);
  //输出1   aaa    1
  alert(1+str.trim()+1);
  //输出1aaa1

自定义对象

• 自定义格式

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

• 举例

  var person ={
  name:"zhangsan",
  age:23,
  eat: function(){
  alert(干饭！！);
  }
  }
  
  alert(person.name);
  //输出zhangsan
  alert(person.age);
  //输出23
  perspm.eat();
  //输出干饭！！

BOM对象 浏览器对象模型

BOM对象全称 Browser Object Model

JavaScript将浏览器的各个组成部分封装为对象

组成：

• Window：浏览器对象
• Navigator：浏览器对象
• Screen：屏幕对象
• History：历史记录对象
• Location：地址栏对象

window对象

直接使用window，并且其中的window.可以省略

属性：

可以获取其他四个对象

方法：

alert(内容);
//警告框
confirm(内容);
//对话框
setInterval(function(){},毫秒值);
//重复执行的定时器
setTimout(function(){},毫秒值);
//只执行一次的定时器

history对象

• 获取

  history.方法();

• 方法

  back();
  //加载history列表的前一个URL
  forward();
  //加载history列表的下一个URL

location对象

• 获取

  location.方法();

• 属性

  href 设置或返回完整的URL

DOM对象 文档对象模型

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

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

js可以通过DOM来对HTML进行操作

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

W3C DOM标准被分为了3个不同的部分：

1. 核心DOM：针对任何结构化文档的标准模型
2. XML DOM：针对XML文档的标准模型
3. HTML DOM：针对HTML文档的标准模型

获取Element元素对象

• Element元素对象
• 使用Document对象的方法来获取

getElementsById
//根据id属性值获取，返回一个Element对象
getElementsByTagName
//根据标签名称获取，返回Element对象数组
getElementsByName
//根据name属性值获取，返回Element对象数组
getElementsByClassName
//根据class属性值获取，返回Element对象数组

其他详细的使用去查看官方文档

事件监听

事件是指发生在HTML元素上的“事情” 比如

• 按钮被点击
• 鼠标移动到元素之上
• 按下键盘按键

事件监听是指js可以在事件被侦测到时执行代码

事件绑定

1. 通过HTML标签中的事件属性进行绑定

   <input type="button" onclike='on()'>
   
   function on(){
   alert("点击");
   }

2. 通过DOM元素属性进行绑定

   <input type="button" id="button">
   doucment.getElementById("button").onclick= function(){
       alert("点击");
   }