浅度理解JS基本知识

来源：互联网发布：unity3d场景模型下载编辑：程序博客网时间：2024/06/03 17:29

第一次起手写博客，写的东西也不多，刚开始接触js，想把每天积累的东西写下来，希望自己以后能常回来看看自己写的东西吧。开始！！！

一、课前补给

1、服务器

a）含义：服务器指的是可以提供特殊服务的电脑，如：FTP/SVN/WEB。网站要开发好，测试好，放到服务器上。

b）服务器模式：B/S：浏览器/服务器模式，通过浏览器打开的就是这种模式。

C/S：客户端/服务器模式，通过下载客户端打开的，还有系统。

2、前端开发：把psd页面转成html静态网页，上面的数据不变，是静态的。（div+css,js,jq,h5,css3,bootstrap,angularjs,nodejs）

3、后台开发：把数据库的数据调出来显示到前端页面，有数据库，数据交互，是动态的。（java,php,.net,c语言,c++,汇编,易语言,sql）

（补：有数据库，数据交互的才叫做动态网站。）

4、 web：php开发的网站；wamp（后台）：Windows下的Apache+Mysql/MariaDB+Perl/PHP/Python，一组常用来搭建动态网站或者服务器的开源软件，本身都是各自独立的程序，但是因为常被放在一起使用，拥有了越来越高的兼容度，共同组成了一个强大的Web应用程序平台。

二、课堂笔录

1、 javascript基本数据类型：number,string,undefined,boolean,null（数字类型，字符串类型，未定义类型，布尔类型，空类型）；复合数据类型：object,function（对象类型，函数类型），如：数组是对象类型，函数是函数类型。

2、强制类型转换：parseInt:强制转换成数字类型，parseFloat:强制转换成浮点型。贴一个详细的例子：

<script type="text/javascript">                    var a='55';                    var b=parseInt(a);    //1、强制地将字符串穿换成数字类型                                       var c='46aa';                    var d=parseInt(c);     //2、提取数字开头的数字                                       var e='69.8';                    var f=parseInt(e);     //3、转成数字类型，并且取整数部分                    var g=parseFloat(e);                                       console.log(f);                    console.log(g);                    console.log(typeof(g));//typeof()  有参函数，显示数据类型                                       var aa=5;                    var bb='-4';       //  -  *  /  %先帮你把两边的数据转换成数字类型，再运算：隐式类转换  ，  + 却不能隐式类型转换，而变成字符串拼接                                                                   if(aa===bb){      // == 等于，先转换后比较                             alert('转成功');                    }                    else{                                // === 全等，恒等，不转换，直接比较                             alert('不会转');                    }                    console.log(aa-bb);                   </script>

3、什么是函数？

//函数就是实现某个功能的代码块。

function show(){

alert(‘恭喜发财’);

}

show(); //函数调用

4、逻辑运算符：|| 或 (满足一个条件即可) && 与 (同时满足多个条件) ! 非 (取反)

5、循环的三个值：初始值、判断值、自增值

6、一个拗口的函数：isNaN: is Not a Nember 不是一个数字。

7、贴上显示隐藏框制作的例子：

<!DOCTYPE html><html>          <head>                   <metacharset="UTF-8">                   <title></title>                   <styletype="text/css">                            #box{                                     width:200px;                                     height:200px;                                     background:#d8d8d8;                                     display:none;                            }                                                       p{                                     width:100px;                                     height:50px;                                     line-height:50px;                                     text-align:center;                                     background:greenyellow;                            }                                                       span{                                     display:inline-block;                                     width:15px;                                     height:15px;                                     margin-left:5px                            }                            /*分别写出两个背景图的样式，用来切换时调用*/                                                       .down{                                     background:url(../img/icon_sprite_2016.png) no-repeat 0px -172px;                            }                                                       .up{                                     background:url(../img/icon_sprite_2016.png) no-repeat -26px -172px;                            }                   </style>                   <scripttype="text/javascript">                            window.onload= function() {                                     varoBtn = document.getElementById('btn');                                     varoBox = document.getElementById('box');                                     varoDown = document.getElementById('_down');                                     oBtn.onclick= function() {                                               if(oBox.style.display == 'block') {                                                        oBox.style.display= 'none';                                                        oDown.className= 'down'; //改变节点的类名实现背景图片切换                                               }else {                                                        oBox.style.display= 'block';                                                        oDown.className= 'up';                                               }                                     }                            }                   </script>         </head>          <body>                   <pid="btn">按钮<span class="down"id="_down"></span></p>                   <divid="box">                    </div>         </body> </html>

5 0