浅度理解JS基本知识

最新推荐文章于 2024-10-02 05:39:15 发布

liujian_laohan

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量352

点赞数 5

文章标签： javascript

本文链接：https://blog.csdn.net/liujian573281/article/details/54023337

版权

第一次起手写博客，写的东西也不多，刚开始接触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.οnlοad= function() {

                                     varoBtn = document.getElementById('btn');

                                     varoBox = document.getElementById('box');

                                     varoDown = document.getElementById('_down');

                                     oBtn.οnclick= 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>