前端入门—js第一天

发表于 | 分类于 |
字数统计: 3,138 字 | 阅读时长 ≈ 13 分钟

0.写在前面

因为上周五临时走的急，没有带电脑，周末两天在家没有更新笔记，今天继续。js是连接前后端的桥梁，在项目开发中至关重要，从今天开始写一些js的入门笔记。

1.体验js

1.1Alert弹框

window.alert(“我是弹框”)；
window窗口对象，一般是可以省略的。alert弹框可以在调试js代码时使用。

1.2console控制台输出

console.log(“输出”)控制台输出，普通输出语句。
console.info(“输出”)控制台输出信息。
console.warn() 控制台警示。
console.error();错误提示。
一般常用console.info()输出到控制台来调试js代码。

1.3document.write()文档打印输出

document文档对象，不可以省略，document.write()可以直接输出信息到页面。比如可以用它来做倒计时，每隔一秒输出新的时间一次。

2.变量

2.1变量的命名

  • 变量命名必须以字母或是下标符号”_”或者”$”为开头。
  • 变量名长度不能超过255个字符。
  • 变量名中不允许使用空格。
  • 不用使用脚本语言中保留的关键字及保留符号作为变量名。

  • 变量名区分大小写。

    2.2作用域

    变量分为局部变量和全局变量。
    全局变量：1.在方法外声明的变量；2.在方法内没有使用var声明，直接使用的变量（这种属于隐式全局变量）。
    局部变量：在方法内声明的变量（作用域是方法内）。
    例如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var a = 10;
    function fun(){ 
       a = "global";
    }
    console.log(a);
     //输出 ？
    var a;
    function fun(){
       a = "global"; 
    }
    fun();
    console.log(a);

    则上面的输出：10，下面的输出global。原因是上面输出的时候并没有调用fun函数，输出的10，下面调用了fun函数，a被覆盖成了global（函数不调用不会执行）。
    看下面一个例子：

    1
    2
    3
    4
    5
    6
    7
    8
      
    var a = 1
    function func() {
       a = b = 2
     }
     func()
     alert(a)
     alert(b)

输出的a.b都是2，而不是a是2，b报错，因为这里a开始等于1后来调用func函数，a被覆盖为2，而2没有用var声明，属于隐式的全局变量，出了func函数照样可以用的，所以不会报错。

3.Js事件

Js事件三要素：事件源，事件，事件处理程序

3.1事件源

事件源是事件的发起者（一般是个名词），谁触发了某次事件，那么谁就是事件源。

3.2事件

事件指触发的操作（一般是个动词）。常见的事件如下：
| 事件名 | 说明 |
| ———– | —————– |
| onclick | 鼠标单击 |
| ondblclick | 鼠标双击 |
| onkeyup | 按下并释放键盘上的一个键时触发 |
| onchange | 文本内容或下拉菜单中的选项发生改变 |
| onfocus | 获得焦点，表示文本框等获得鼠标光标 |
| onblur | 失去焦点，表示文本框等失去鼠标光标 |
| onmouseover | 鼠标经过，即鼠标划过图片等的上方 |
| onmouseout | 鼠标移出，即离开图片等所在的区域 |
| onload | 网页文档加载事件 |
| onunload | 关闭网页时触发 |
| onsubmit | 表单提交事件 |
| onreset | 重置表单事件 |

3.3事件处理程序

事件触发之后的处理操作，一般是函数。结构如下：
事件源.事件 = function(){ //事件处理程序}
例子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #demo{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="demo"></div>
<button id="btn">改变宽度</button>
</body>
<script type="text/javascript">
    var demo = document.getElementById("demo");
    var btn = document.getElementById("btn");
    btn.onclick = function(){
        demo.style.width = "400px";
    }
</script>
目的：点击btn按钮时让demo盒子的宽度变成400px。注意：宽度是通过style标签控制的，如果要改变它也是通过style标签,改变demo.style.width。如果修改背景图片可以用：demo.style.backgroundImage = "url(images/1.jpg)"

4.隐藏显示

1
2
3
4
5
6
7

display:none    隐藏
display:block   显示
visibility:hidden   隐藏
visibility:visible  显示
overflow:hidden     溢出隐藏
注意：display跟visibility的隐藏有区别，dispaly:none隐藏不占位置；visibility:hidden隐藏占有位置（占茅坑不拉屎）

5.入口函数（window.onload）

1
2
3
window.onload = function(){
  //需要执行的js
}

把script标签放在head中时可能会导致页面没有加载完毕就去执行js代码了，结果导致报错，这时就可以使用window.onload函数了，它会等到我们页面加载完毕（页面的结构，样式，节点）之后才去执行function里面的代码。
注意：一个页面中只能有一个window.onload入口函数，如果写多个，则最后一个会覆盖前面的，导致前面的不生效。这点跟jquery里面的$(function(){})是有区别的，后者在一个页面可以写多个。

6.模态框

现在有个需求：当我们浏览京东，淘宝这些网站的时候，细心点就会发现，当点击登录时整个窗口都会变灰色，而且弹出一个模态框让我们输入用户名密码，怎么实现这个效果呢。
实现原理：做一个大的遮罩和一个弹出的模态框，大遮罩定位使用fixed（好处：不会随着滚动条滚动），颜色灰色，不点击登录时隐藏，z-index：999保证它可以覆盖着当前窗口。而弹出这个模态框z-index：1000大于刚才的那个遮罩（会覆盖到遮罩上面）；而关闭按钮使用绝对定位定位在由上角（”字绝父相”）。当点击登录按钮时让这两个弹框显示即可。
效果如图：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

html部分：
<!--遮罩-->
<div id="mask"></div>
<div id="box">
    <span id="close_all">×</span>
</div>
css部分：
/*******遮罩*******/
#mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background:rgba(0,0,0,.5);
    display: none;
    z-index: 999;
}
#box{
    width: 400px;
    height: 250px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -125px 0 0 -200px;
    background-color: #fff;
    z-index: 1000;
    display: none;
}
#close_all{
    position: absolute;
    width: 20px;
    height: 20px;
    font-size: 20px;
    top: 10px;
    right:10px;
    cursor: pointer;
}
js部分：
window.onload = function(){
  var login = document.getElementById("login")
  var mask = document.getElementById("mask");
  var box = document.getElementById("box");
  var closeAll = document.getElementById("close_all");
  login.onclick = function(){
  mask.style.display = "block";
  box.style.display = "block";
  }
  closeAll.onclick = function(){
  mask.style.display = "none";
  box.style.display = "none";
  }
}

7.数据类型

js中有五种基本数据类型（String，Number,Boolean,NUll,Undefined）和混合数据类型（Object）,使用typeof可以检测变量的数据类型（输出的是一个关于数据类型的字符串），返回如下字符串：string,number,boolean,object,undefined,function。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var x = 1;
console.log(typeof x);//number

var a = undefined;
console.log(typeof a);//undefined

var b = null;
console.log(typeof b);//object，（其实这是js最初的错误，后来被ECMAscript沿用了下来，我们可以理解null是空对象引用）。

var c = new Object();
console.log(typeof c);//object

var e = [1,2,3];
console.log(typeof e);//object 

var d = function(){
 // ... 语句块
}
console.log(typeof d);//function

7.1字符型（String）

转换为字符型：

  • 变量后加双引号或单引号（js中字符型双引号和单引号效果一样，java中不一样）。
  • 使用函数String()，即使是null和undefined也可以使用，转换后是null和undefined
  • 使用函数toString(),只能是非空的才能用，null和undefined使用会报错。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var bc = "zhangsan";
    var bd = null;
    var be = undefined;
    console.log(bc.toString());
    //console.log(bd.toString());//error 报错
    //console.log(be.toString());//error 报错
    console.log("------");
    console.log(String(bc));
    console.log(String(bd));
    console.log(String(be));

7.2数值型（Number）

Number类型包含整数和浮点数（浮点数数值必须包含一个小数点，且小数点后面至少有一位数字）两种值。
浮点数将会自动转换为整数。

1
2
var num = 1.00;
console.log(num);//1，自动转换为整数

浮点数的最高精度是17位，看下面的例子，结果不是0.3，其他编程语言，有的也会遇到这种情况（浮点数计算会产生舍入误差问题）。这里也警示我们，如果涉及到金额计算不要用浮点数，同时尽量在后台处理，所有的金额乘以100，即以分为单位进行计算入库，浮点数无法进行金额精确计算，风险极高。

1
2
3
4
5
6
7
8
9
10
11
12
console.log(0.1+0.2);   //0.30000000000000004  解释：js做小数运算会出现错误，一般推荐转为整数在进行计算，比如这里输出就错了
console.log((0.1*10+0.2*10)/10);   0.3
var num=020;
console.log(num);     //16   解释：0开头的是八进制，这里输出八进制20，是十进制的16
var result = "20";
var aa = result-10;
console.log(aa);    //10       解释：js字符串和数值相减时先将字符串转为数值型，在运行减法，结果为number型
console.log(typeof aa);//number

var bb = result+10;
console.log(bb);  //2010
console.log(typeof bb);  //string       解释：js字符串与数值相加值，返回结果为字符串行拼接

NaN:非数字类型（not a num字面意思：不是一个数字）。特点：① 涉及到的 任何关于NaN的操作，都会返回NaN ② NaN不等于自身。

1
2
3
var ab = "a1";
console.log(ab/10);// NaN
console.log(NaN == NaN);// false;

isNaN()函数，用于判断是否是一个非数字类型。如果传入的参数是一个非数字类型，那么返回true；否则返回false;
isNaN()函数，传入一个参数，函数会先将参数转换为数值。
如果参数类型为对象类型，会先调用对象的valueOf()方法， 再确定该方法返回的值是否可以转换为数值类型。如果不能，再调用对象的toString()方法，再确定返回值。
其它类型转化为数值型的方法：

  • 利用 - * / 都可以转换 (+不行，字符串跟数字相加结果是字符串拼接)
  • 利用Number( )
  • parseInt()，将值转换为整型
  • parseFloat()；将值转换为浮点型。
    看下面列子：
    1
    2
    3
    4
    5
    6
    7
    console.log(parseInt(19.11));    //19
    console.log(parseInt(19.99));    //19
    console.log(parseInt("25px"));   //25     解释：只转化数字的那部分
    console.log(parseInt("px25px")); //NaN    解释：parseInt只能将以数字开头的字符串转化为数字
    console.log(parseInt(110,2));    //6      解释：把二进制的110转化为十进制
    var a="15.15abc" , b='10.15' , c='10.0abc';
    console.log(parseInt(a)+Number(b)+parseFloat(c));   //15+10.15+10.0=35.15

7.3布尔型（Boolean）

有两个值：true和false
转换为布尔型的方法：

  • 利用 !!
  • 利用 Boolean() 
    1
    2
    3
    var num =10;
    console.log(typeof !!num);  //boolean
    console.log(!!num);   //true

false、undefined 、null、0、”” 为 false
true、1、”somestring”、[Object] 为 true

7.4NUll

null类型被看做空对象指针，前文说到null类型也是空的对象引用。只有一个值，即null值，所以，在你 用typeof 操作符去检测null类型的值时，结果是object类型。
如果你定义了一个变量，但是想在以后把这个变量当做一个对象来用，那么最好将该对象初始化为null值。
实际上，undefined值是派生自null值的，因此ECMA-262规定对他们的相等测试要返回true。

1
alert(null == undefined)  //true

7.5Undefined

Undefined类型只有一个值undefined,表示“缺少值”，就是此处应该有值，但是未给。
用法如下：

  • 变量被声明了，但没有赋值时，就等于undefined。
  • 调用函数时，应该提供的参数没有提供，该参数等于undefined。
  • 对象没有赋值的属性，该属性的值为undefined。
  • 函数没有返回值时，默认返回undefined。
    1
    2
    3
    4
    5
    6
    7
    var a;
    var b = null;
    console.log(a);  //undefined
    console.log(a==b);  //true
    console.log(a===b);  //false
    console.log(b+10);   //10
    console.log(a+10);   //NaN

7.6Object类型

Object是对象类型（也叫引用类型），创建方法：

  • 使用new操作符后跟Object构造函数

    1
    2
    3
    var person = new Object();    //创建Object引用类型的一个新实例，并且把该实例保存在变量person中。
    person.name = "CC";
    person.age = 23;

  • 使用对象字面量表达式:对象字面量是对象定义的一种简写形式，目的在于简化创建包含大量属性的对象的过程。

    1
    2
    3
    4
    var person = {
        name : "CC",
        age : 23
    };

代码地址：https://git.oschina.net/catchu/web-study

刘俊重 wechat
欢迎关注我的微信公众号
坚持原创技术分享
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多