JavaScript基础之布尔值，关系运算符，逻辑运算符，If语句，for循环语句,函数

1.布尔值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var a = true;       //真
        var b = false;      //假
        console.log(a);     //输出
        console.log(b);     //输出
        console.log(typeof a); //输出类型
        console.log(typeof b); //输出类型

        console.log("===================================");

        var c = "true";
        var d = "false";
        console.log(c);
        console.log(d);
        console.log(typeof c);
        console.log(typeof d);
    </script>
</body>
</html>
图片.png

2.关系运算符

== 这个符号不严格！类型不同，也会帮你转为相同的类型，然后比较还可以验证字符串是否相同, console.log("我爱北京天安门" == "我爱北京天安门"); //true
实际上，JS中运算符还有很多，今天我们介绍一种运算符“关系运算符”。
>   大于号
<   小于号
>=  大于或等于
<=  小于或等于
==  等于
=== 全等于
!=  不等于
!== 不全等于

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        //大于号
        // console.log(5 > 6);
        // console.log(55 > 6);
        // console.log(55 > 66);

        //小于号
        // console.log(-6 < 9);
        // console.log(-7 < -5);
        // console.log(5 < 9);
        // console.log(100 < 5);

        //大于等于
        // console.log(16 >= 5);        //true
        // console.log(16 >= 16);       //true
        // console.log(16 >= 32);       //false

        //小于等于号
        // console.log(5 <= 5); //true
        // console.log(6 <= 10);    //true
        // console.log(6 <= 3); //false

        //等于
        // console.log(5 == 5); //true
        // console.log(5 == 6); //false

        //等等这个符号不严格！类型不同，也会帮你转为相同的类型，然后比较
        // console.log("5" == 5);       //true
        // console.log(56 == "56");     //true


        // //全等于
        // console.log("56" === 56);    //false
        // console.log(56 === "56");    //false
        // console.log("56" === "56");  //true
        // console.log(56 === 56);      //true

        // console.log(3 != 8); //true
        // console.log(3 != "3");   //false
        // console.log(3 !== "3");  //true

        console.log("4" == 4);      //true
        console.log("4" != 4);      //false

        console.log("4" === 4);     //false;
        console.log("4" !== 4);     //true
               console.log("我爱北京天安门" == "我爱北京天安门");     //true
    </script>
</body>
</html>

2.逻辑运算符

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // &&表示“且”的意思，都真才真
         console.log(true && true);     //true
         console.log(true && false);        //false
         console.log(false && true);        //false
         console.log(false && false);       //false

        // ||表示“或者”的意思，有真就真
         console.log(true || true);         //true
         console.log(true || false);            //true
         console.log(false || true);            //true
         console.log(false || false);       //false

        console.log(!true);
        console.log(!false);
    </script>
</body>
</html>

3.if语句

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        //第一步，得到用户输入的成绩
        var score = parseFloat(prompt("请输入成绩"));

        //第二步，判断
        if(score >= 85){
            alert("优秀");
        }else if(score >= 70){
            alert("良好");
        }else if(score >= 60){
            alert("及格");
        }else{
            alert("不及格");
        }
    </script>
</body>
</html>
图片.png
图片.png

3.for循环

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        for(var i = 1 ; i <= 100 ; i++){
            console.log(i);
        }
    </script>
</body>
</html>

输出：
1
2
3
......
100

4.函数

4.1.自定义函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
###4.2.
<body>
    <script type="text/javascript">
        console.log("你好");
        sayHello(); //函数的调用
        console.log("么么哒");

        //定义函数
        function sayHello(){
            console.log("欢迎");
            console.log("welcome");
        }
    </script>
</body>
</html>
图片.png

4.2. 函数直接量声明

var fun1 = function(){
    alert("直接量声明")
}
fun1();  也需要调用

4.3. 利用Function 关键字声明

var fun2 = new Function("var a = 10; var b = 20; alert(a+b)");
fun2();

4.5.带参数的函数

a：函数带有参数


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        sayHello("你好啊","吃了吗");  //函数的调用

        //定义函数
        function sayHello(a,b){
            console.log(a);
            console.log(b);
        }
    </script>
</body>
</html>
图片.png

b：函数参数类型匹配

arguments是存储了函数传送过过来实参 ，Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例，arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同，arguments对象的长度是由实参个数而不是形参个数决定的
图片.png
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    var aa=10,bb=20;
    var aa= 10;
    var bb = 20;
    function fn(a,b)
    {
        console.log(fn.length); //得到是 函数的形参的个数
        console.log(arguments);
        console.log(arguments.length); // 得到的是实参的个数
        if(fn.length == arguments.length)
        {
            console.log(a+b);
        }
        else
        {
            console.error("对不起，您的参数不匹配，正确的参数个数为:" + fn.length);
        }
        //console.log(a+b);
    }
    fn(1,2);
    fn(1,2,3);
</script>
</body>
</html>
图片.png

4.4.函数的返回值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        console.log(qiuhe(3,4));

        function qiuhe(a,b){
            return a + b;
        }
    </script>
</body>
</html>
图片.png

5.Js中的this值

指的是本身,This 主要是指事件的调用者 。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function(){
            var txt = document.getElementById("txt");
            var sele = document.getElementById("select");
            txt.focus(); //自动获得焦点
            sele.onmouseover = function(){
                this.select(); //选择
            }
        }
    </script>
</head>
<body>
自动获得焦点:
<input type="text" id="txt"/>

鼠标经过选择表单:
<input type="text" id="select"/>
</body>
</html>
图片.png

6.Js数组

6.1 声明数组

 var arr = [1,3,5,7,9];
 var arr = new Array(1,3,5);

6.2.使用数组

var textArr = ["刘备","诸葛亮","赵云","关羽"];
console.log(textArr[3])

6.3.使用数组

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        var arr = [1,3,5];
        var bb = ["a","b","c"];
        // push()  后面推进去
        arr.push(7);
        console.log(arr.toString());
        arr.unshift(0);
      //  unshift()    从数组的前面放入
        console.log(arr.toString());
        //pop()   删除最后一个元素
        arr.pop();
        console.log(arr.toString())
        //删除第一个元素shift
        arr.shift();
        console.log(arr.toString());
        //concat() 连接2个数组
         var cc=bb.concat(arr)
        console.log(cc.toString())
        //join() 把数组转换为字符串
        var dd=bb.join("-");
         console.log(dd.toString());
        //split 用于把一个字符串分割成字符串数组
        var ee="aa-bb-cc-dd";
        var ff=ee.split("-");
        console.log(ff)
        for(var i=0;i<ff.length;i++){
            console.log(ff[i]);
        }
    </script>
</body>
</html>
图片.png

6.4.保留二位有效数字

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
</html>
<script>
    var PI = 1213.141592653;  //  常量大写
    var str = PI + "";   // 因为数字没法进行字符操作  先转换
    var index = str.indexOf("."); // 我们要返回当前字符的点的位置  indexOf(".")
    console.log(index);
    console.log(str.substr(0,index+3));
    console.log(str.substr(0,str.indexOf(".")+3));
    console.log(parseInt(PI*100) /100);
    //1213.141592653 * 100  =  121314.1592653   取整   121314  /100
    console.log(PI.toFixed(2));


</script>

7.获取日期和时间

获取日期和时间
getDate()                  获取日 1-31
getDay ()                  获取星期 0-6      
getMonth ()                获取月  0-11
getFullYear ()              获取完整年份（浏览器都支持）
getHours ()                获取小时 0-23
getMinutes ()                  获取分钟 0-59
getSeconds ()                  获取秒  0-59
getMilliseconds ()            获取当前的毫秒 
getTime ()         返回累计毫秒数(从1970/1/1午夜)


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .box{
            width: 150px;
            height: 180px;
            background-color: #369;
            margin: 100px auto;
            text-align: center;
        }
        .box p {text-align: center;
            line-height: 60px;
            font-size:12px;
            color: #fff;
        }
        .box span{
            display: block;
            width: 75px;
            height: 75px;
            margin: 0 auto;
            font-size:50px;
            color: #000;
            background-color: yellowgreen;
            line-height: 75px;
        }
    </style>
    <script>
        window.onload = function(){
           var box = document.getElementById("box");
            var boys = box.children;
             //日期函数
            var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
             var date = new Date();   // 声明日期函数
             boys[0].innerHTML = date.getFullYear()+"年"+ (date.getMonth()+1) +
             "月" + date.getDate() + "日" + "  " + arr[date.getDay()];
             boys[1].innerHTML = date.getDate();  // 今天的日子
        }
    </script>
</head>
<body>
<div class="box" id="box">
    <p></p>
    <span></span>
</div>
</body>
</html>
图片.png

8.定时器

每隔1秒钟，就去执行一次 fun 这个函数.  
setInterval(“fun()”,1000)    正确
setInterval( function(){} , 1000 )  正确
setInterval(fun(),1000)  错误的  XXXXXXXXXXXXXXXXXXXXXXX


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<input type="text"/>
<button id="btn">点击发送短信</button>
</body>
</html>
<script>
    var btn = document.getElementById("btn");
    var count = 10;  // 数据的 10
    var timer = null; // 定时器的名字
    btn.onclick = function() {
       clearInterval(timer);  // 先清除掉原来的定时器
        // alert(11);
        this.disabled = false;
         //alert(this);  // this 指向的是 btn
        var that = this;  // 把 btn 对象 给 that  var _this = this;
        timer = setInterval(sendTextMessage,1000);  // 开启定时器 名字  timer
        function sendTextMessage() {
            count--;
            if(count >= 0 )
            {
                that.innerHTML =  "还剩余"+count+"秒";
            }
            else
            {
                that.innerHTML = "重新发送短信";
                that.disabled = false;
                clearInterval(timer);  // 清除定时器
                count = 10;
            }
        }

    }
</script>
图片.png
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,816评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,729评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,300评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,780评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,890评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,084评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,151评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,912评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,355评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,666评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,809评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,504评论 4赞 334
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,150评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,121评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,628评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,724评论 2赞 351

推荐阅读更多精彩内容

  • javascript 中的函数和对象
    函数和对象 1、函数 1.1 函数概述 函数对于任何一门语言来说都是核心的概念。通过函数可以封装任意多条语句，而且...
    道无虚阅读 4,550评论 0赞 5
  • JavaScript程序
    第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行（line），也就是一...
    悟名先生阅读 4,133评论 0赞 13
  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,219评论 0赞 4
  • 梦里的那些人
    闷热的下午 ，头疼的午睡。 本以为过去的一切，真的过去了。 此生见不到的人 ，却像定时闹钟一样在我的梦境里出现，梦...
    请叫我落落先生吧阅读 222评论 3赞 0
  • 世界上最不要脸的一句话就是你真玻璃心
    生活中，总有那么一些自认为很牛X很牛X的人 动不动就喜欢指责这指责那，一幅颐指气使的样子 好像别人不接受TA或是表...
    顺崎自然阅读 1,268评论 0赞 4