javascript笔记

内置对象

• 内置对象：提供我们直接使用的功能（弹出警示框alert()、控制台输出console.log()一般用于测试、文档打印输出document.writte()直接在文档中显示）。例如手机买来之后内置的照相机、短信功能、打电话功能。

js更改样式

<script>
  var box1 = document.getElementById("box1");

  box1.style.width = "200px";
  box1.style.height = "200px";
  box1.style.backgroundColor = "red";
  box1.style.display = "none";/*隐藏*/
  box1.style.backgroundImage = "url(images/02.png)";/*更换背景图片*/

  box1.src = "images/02.png"; /*切换img标签图片 路径*/ 
</script>

变量

• 变量：变量名只能以字母、下划线、$符号开头；变量名不能有空格；严格区分大小写；变量不加引号。
• 全局变量：①在函数外面声明的变量 ②在函数体内部，但是没有var声明。
• 局部变量：在函数体内部声明的变量，只供内部使用。
  局部变量优先级高于全局变量。

事件

• 事件三要素：事件源、事件、事件处理函数
  事件源：事件要处理的对象（手、叉号、盒子）
  事件：点击onclick、鼠标经过onmouseover、鼠标离开onmouseout、获得焦点onfocus、失去焦点onblur
  事件处理函数：发生了什么（盒子变大、颜色改变、关闭某个div）

  事件源.事件 = 事件处理函数

var box1 = document.getElementById("box1");
btn.onclick = function(){
  box1.style.width = "100px";
}

隐藏/显示样式(3种)：

display: none;/*不留坑，隐藏后下面的内容会上来*/
display: block;

visibility: hidden;/*留坑，隐藏后所有位置不变*/
visibility: visible;

overflow: hidden;/*隐藏超出的部分*/

点击a标签 执行空js函数，不闪屏

<a href="javascript: ;">点我不会跳转，不会闪屏</a>
<a href="javascript:void(0);">我也不会跳转，不会闪屏</a>

数据类型

• 数据类型：字符型string、数值型number、布尔型boolean、null、undefined
  字符型：加了引号的都是字符型

• parseInt()转换为整型 、parseFloat()转换为浮点型
  parseInt(110,2);意思是：把110这个2进制转换为10进制（答案为：0*2的0次方+1*2的1次方+1*2的2次方= 6）

parseInt()转换为整型

console.log(parseInt(19.99));  //19
console.log(parseInt("25px")); //25

• 函数：就是可重复使用的代码块

变量提升:

f1();//先执行函数
console.log(c);//9 c是全局变量，没有var来声明
console.log(b);//9 b是全局变量，没有var来声明
console.log(a);//undefined a是局部变量，有var来声明
function f1(){
  var a = b = c = 9; //相当于var a = 9; b = 9; c = 9; a是局部变量，b和c属于全局变量
  console.log(a);//9
  console.log(b);//9
  console.log(c);//9
}
运行结果为:9 9 9   9 9 9 undefined

var num = 10;
fun();
function fun(){
  console.log(num);
  var num = 20;
}

变量提升：在一个函数体内部声明一个变量，会把函数体内部的变量提升到最上面，只提升变量声明但不给值，值还在下面。

var num = 10;
fun();
function fun(){
  console.log(num);
  var num = 20;
}
结果为：undefined

上段代码相当于：

var num = 10;
fun();
function fun(){
  var num;//变量提升  只提升变量名
  console.log(num);//num只有声明没有值，所以结果为：undefined
  num = 20;//值留在这里
}

参数（形参、实参）

• arguments是存储了函数送过来的实参。

function fun(a,b){
  console.log(fun.length);//2     函数的形参个数
  console.log(arguments);//[1, 2, 5]
  console.log(arguments.length);//3    实参的个数  
}
fun(1,2,5);