前端基本功jsday01

最新推荐文章于 2022-02-28 19:59:35 发布

一颗向上的草莓

最新推荐文章于 2022-02-28 19:59:35 发布

阅读量334

点赞数

文章标签：前端 js

本文链接：https://blog.csdn.net/u014532775/article/details/76445511

版权

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声明，直接使用的变量（这种属于隐式全局变量）。

局部变量：在方法内声明的变量（作用域是方法内）。

例如：


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（函数不调用不会执行）。

看下面一个例子：


   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(){ //事件处理程序}
例子：

<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.隐藏显示


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

5.入口函数（window.onload）

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

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

6.模态框

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


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。

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使用会报错。

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

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

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

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不等于自身。

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

isNaN()函数，用于判断是否是一个非数字类型。如果传入的参数是一个非数字类型，那么返回true；否则返回false;
isNaN()函数，传入一个参数，函数会先将参数转换为数值。
如果参数类型为对象类型，会先调用对象的valueOf()方法，再确定该方法返回的值是否可以转换为数值类型。如果不能，再调用对象的toString()方法，再确定返回值。
其它类型转化为数值型的方法：
- 利用 - * / 都可以转换 (+不行，字符串跟数字相加结果是字符串拼接)
- 利用Number( )
- parseInt()，将值转换为整型
- parseFloat()；将值转换为浮点型。
看下面列子：

    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()

    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。

alert(null == undefined)  //true

7.5Undefined

Undefined类型只有一个值undefined,表示“缺少值”，就是此处应该有值，但是未给。
用法如下：
- 变量被声明了，但没有赋值时，就等于undefined。
- 调用函数时，应该提供的参数没有提供，该参数等于undefined。
- 对象没有赋值的属性，该属性的值为undefined。
- 函数没有返回值时，默认返回undefined。

    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构造函数

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

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


var person = {
    name : "CC",
    age : 23
};

一颗向上的草莓

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端基本功jsday01

1.体验js1.1Alert弹框window.alert(“我是弹框”)；window窗口对象，一般是可以省略的。alert弹框可以在调试js代码时使用。1.2console控制台输出console.log(“输出”)控制台输出，普通输出语句。console.info(“输出”)控制台输出信息。console.warn() 控制台警示。 console.error();错误提示。一般常用con
复制链接

扫一扫