day50 java Script 数字和字符串布尔值和数组运算符条件判断和三元运算

上节回顾：

day50

1.前情回顾

    CSS属性:
        float浮动的规则
            1. 浮动规则:
                浮动只控制自己
                如果前面的标签也是浮动的,就挨着放
                如果前面的标签不浮动,则下方摆放
                
        如果把块级标签设置成浮动,他们就能在一行显示(inline-block)
        如果把内联标签设置成浮动,他们就可以设置长和宽
        
        float清除浮动(父标签塌陷)
            clear
                none
                left
                right
                both
            
            .clearfix:after {    ******
                content: "";
                display: "block";
                clear:both;
            }
            
        定位(position)  -- 根据谁来做定位
            static
            relative(相对定位)
            
            absolute(绝对定位)
            
            fixed(固定)
            
                返回顶部
                    .returnTop {
                        position: "fixed";
                        right: 10px;
                        bottom: 10px;
                    }
                模态框(弹出框那个遮罩层)
                    .cover {
                        position: "fixed";
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        background-color: rgba(0, 0, 0, 0.3)
                    }
                
                z-index
                    
                    .modal {
                        width: 800px;
                        height: 400px
                        position: "fixed";  
                        /*固定在屏幕中间*/
                        
                        top:50%;
                        left: 50%;
                        
                        margin-top: -200px;
                        margin-left: -400px;                    
                        }
            
        display
            none         不显示
            block        当成块级标签  独占一行 可以设置长和宽
            inline       当成内联标签 可以放在一行
            inline-block 既能显示在一行又能设置长和宽 
            
        :before和:after
        border-radius   画圆(把值设置成边框的一半)
        list-style-type: none (通过设置CSS属性不显示列表自带样式)

上节回顾课堂笔记

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>抽屉</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            background-color: #eeeeee;
        }
        .head {
            height: 45px;
            width: 100%;
            background-color: #2459a2;
            position: fixed;
            top: 0;
        }
        .head-content {
            width: 1016px;
            height: 45px;
            margin: 0 auto;
        }
        
        .head-content>a {
            width: 121px;
            height: 23px;
            background: url("logo.png") no-repeat 0 0;
            float: left;
            margin-top: 11px;
        }

        .head-content ul>li {
            float: left;
            line-height: 45px;
            margin-left: 10px;
        }

        .head-content ul>li>a {
             padding: 11px;
        }

        a {
            text-decoration: none;
            color: rgb(192, 205, 223);
        }

        .head-content ul>li>a:hover {
            color: white;
            background-color: rgb(57, 107, 179);
        }

        .main {
            margin-top: 45px;
        }
        /*页面主体部分*/
        .main-content {
            width: 960px;
            height: 1000px;
            background-color: white;
            margin: 0 auto;
            padding: 5px 15px;
        }

        .content-left {
            width: 630px;
            height: 1000px;
            float: left;
        }

        .content-right {
            width: 300px;
            height: 1000px;
            background-color: green;
            float: right;
        }
        .top-left {
            padding: 15px 0;
            display: inline-block;
        }

        .top-left > a {
            display: inline-block;
            min-width: 60px;
            height: 26px;
            text-align: center;
            margin-right: 10px;
            color: rgb(51, 102, 178);
            font-weight: 700;
            line-height: 26px;
        }
        .icon {
            background: url("http://dig.chouti.com/images/tip.png?v=2.9") no-repeat 0 0 ;

        }
        .ty {
            background-position: 0 -299px;
        }
        .top {
            border-bottom: 1px solid rgb(204, 220, 239);
        }

        .top-center {
            display: inline-block;
        }
        .new-button {
            float: right;
            padding: 10px 40px;
            background-color: rgb(132, 164, 43);
            color: white;
            border: none;
            margin-top: 10px;
        }
        .new-button:hover {
            background-color: #8eb031;
        }
        .item-img {
            float: right;
            padding-top: 15px;
        }
        .item-img> img {
            width: 60px;
            height: 60px;
        }
        .item-content {
            padding-top: 15px;
        }

        .part2 span {
            display: inline-block;
            height: 18px;
            width: 18px;
            background: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13") no-repeat 0 0;
        }

        .part2 .thumb {
            background-position: 0 -40px;
        }
        .part2 .thumb:hover {
            background-position: 0 -20px;
        }
    </style>
</head>
<body>

<!--页面头部开始-->
<div class="head">
    <div class="head-content">
        <a href=""></a>
        <ul type="none">
            <li><a href="">全部</a></li>
            <li><a href="">随便</a></li>
            <li><a href="">图片</a></li>
            <li><a href="">43区</a></li>
            <li><a href="">挨踢1024</a></li>
            <li><a href="">单子</a></li>
        </ul>
    </div>
</div>
<!--页面头部结束-->

<!--页面主体开始-->
<div class="main">
    <div class="main-content">
        <!--主题内容左侧开始-->
        <div class="content-left">
            <div class="top">
                <div class="top-left">
                    <a href="" class="icon ty">最新</a>
                    <a href="" class="icon ty">最热</a>
                    <a href="" class="">最少儿不宜</a>
                </div>
                <div class="top-center">
                    <a href="">即时排序</a>
                    <a href="">24小时</a>
                    <a href="">3天</a>
                </div>
                <input class="new-button" type="button" value="+发布">
            </div>
            <div class="content-list">
                <div class="item">
                    <div class="item-img">
                        <img src="http://img3.chouti.com/CHOUTI_20171225/9F06C86505F648E6BBACED6900AC4674_W580H346=C120x120.jpg?quality=80" alt="">
                    </div>
                    <div class="item-content">
                        <div class="part1">
                            <a href="">QQ和抖音退出什么玩意儿我也写不出来了</a>
                            <div class="area-summary">
                                <span class="summary">一个大概率会发生的事情是，舞蹈将成为2018年的内容风口。</span>
                            </div>
                        </div>
                        <div class="part2">
                            <a href="">
                                <span class="thumb"></span>
                                <b>6</b>
                            </a>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--主题内容左侧结束-->
        <!--主题内容右侧开始-->
        <div class="content-right"></div>
        <!--主题内容右侧结束-->
    </div>
</div>
<!--页面主体结束-->
</body>
</html>

抽屉作业示例

今日内容：

2. 今日内容

要培养自己的自学能力(看文档的能力)

JS (JavaScript)

    一门编程语言,和 Python\Java\PHP\Go \C++\C# 类似的.
    
    
    网景
    跑在浏览器上的语言  10天
    
    node.js 可以跑在服务器上的JS

        
    ES6(EMCAScript 2016) /ES7 语法
    
    
    JS学习内容: (3天)
        1.JS语言基础:
            1.基本数据类型
            2.变量
            3.流程控制
            4.语法/注释
            
            5.函数
            6.对象
            
        2.DOM和BOM编程
        
        DOM --> Document Object Model
        BOM --> Browser  Object Model
        
        
    JS语法基础:
        语句结束之后要写分号;  *****
        $也可以做变量名
        推荐使用驼峰命名
    
    JS数据类型:
        数字类型
        
        字符串类型
            字符串自带的那些属性和方法
        字符串转数字
        
        布尔类型
        
        数组
            数组的内置属性和方法
            数组的遍历
                
        var i = 0;
        i++;    i= i+1;  --> i+=1(Python);
        
        
        对象(简单的对象)
            对象的遍历
        
        条件判断和循环
            if... else ...
            if... else if...else
            switch
                case 值1: 要做的事儿;break;
                case 值2: 要做的事儿;break;
                default: 条件都不满足默认执行的
                
            for 循环
            for (var i=0;条件;i++){
                循环要做的事儿;
            }
            
            while循环
                while (条件){
                   循环要做的事儿;
                }
                
            三元运算
                条件 ? 值1: 值2

今日内容课堂笔记

一、CSS属性补充

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta  http-equiv="x-ua-compatible" content="IE=edge">
    <title>CSS属性补充</title>
    <style>
        .c1{
            height: 100px;
            width: 100px;
            background-color: wheat;
            overflow: auto;
        }
    </style>
    <script src="02.js"></script>
</head>
<body>
<div class="c1">
     海燕
        在苍茫的大海上,
        狂风卷积着乌云,
        在乌云和大海之间,
        海燕像黑色的闪电,
        在高傲地飞翔!
</div>
<ul type="none">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<ul style="list-style-type: none">
    <li>444</li>
    <li>555</li>
    <li>666</li>
</ul>
</body>
</html>

CSS属性补充

二、JS-DOM-BOM操作示例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>JS-DOM-BOM操作示例</title>
    <!--<link rel="stylesheet" href="">-->
    <!--<script>-->
        <!--alert(123);-->
    <!--</script>-->
    <script src="02.js"></script>
</head>
<body>

</body>
</html>

操作示例

JavaScript引入方式

1、Script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

2、引入额外的JS文件

<script src="myscript.js"></script>

JavaScript语言规范

1、注释（注释是代码之母）

// 这是单行注释

/*
这是
多行注释
*/

2、结束符

JavaScript中的语句要以分号（;）为结束符。

三、js 语法基础

JavaScript语言基础

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>JS语法基础</title>
    <script>
        var name;       //先声明变量
        name='Alex';    //赋值变量
        console.log(name);

        var name2='Egon';
        console.log(name2);

        var n1=1;
        var n2=1234;
        var n3=1234.12;
        var n4=123e-5;
        console.log(n1,n2,n3,n4);

//        字符串常用方法
        var name3="Alex";
        var age=18;
        console.log(name3+age);

//        字符串转数字
        var a="123";
        var ret=parseInt(a);
        console.log(ret);

        var b="123.346";
        ret=parseFloat(b);
        console.log(ret);

        var c="ABC";
        ret=parseInt(c);
        console.log(ret);
    </script>
    <script src="02.js"></script>
</head>
<body>

</body>
</html>

小练习

1、变量声明

JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
声明变量使用 var 变量名; 的格式来进行声明

var name = "Alex";
var age = 18;

注意：

变量名是区分大小写的。

推荐使用驼峰式命名规则。

JavaScript数据类型

1、JavaScript拥有动态类型

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

2、数字类型

JavaScript不区分整型和浮点型，就只有一种数字类型。

var a = 12.34;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

常用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

3、字符串

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

方法	说明
obj.length	返回长度
obj.trim()	移除空白
obj.trimLeft()	移除左边的空白
obj.trimRight()	移除右边的空白
obj.charAt(n)	返回第n个字符
obj.concat(value, ...)	拼接
obj.indexOf(substring, start)	子序列位置
obj.substring(from, to)	根据索引获取子序列
obj.slice(start, end)	切片
obj.toLowerCase()	小写
obj.toUpperCase()	大写
obj.split(delimiter, limit)	分割

拼接字符串一般使用“+”

四、运算符

1、布尔类型

区别于Python，true和false都是小写。

var a = true;
var b = false;

2、数组

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

常用方法：

方法	说明
obj.length	数组的大小
obj.push(ele)	尾部追加元素
obj.pop()	获取尾部的元素
obj.unshift(ele)	头部插入元素
obj.shift()	头部移除元素
obj.slice()	切片
obj.reverse()	反转
obj.join(seq)	将数组元素连接成字符串
obj.concat(val, ...)	连接数组
obj.sort()	排序

遍历数组中的元素：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(i);
}

3、null和undefined

undefined表示的是当声明的变量未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
null表示值不存在

undefined表示声明了变量，但是还没有赋值。null声明了变量并且变量是空值。

4、类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。

运算符

1、算数运算符

+ - * / % ++ --

2、比较运算符

> >= < <= != == === !==

注意：

1 == “1”  // true
1 === "1"  // false

3、逻辑运算符

&& || !

4、赋值运算符

= += -= *= /=

五、流程控制

1、if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

2、if-else if-else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

3、switch

var day = new Date().getDay();
switch (day) {
  case 0:
  console.log("Sunday");
  break;
  case 1:
  console.log("Monday");
  break;
default:
  console.log("...")
}

4、for

for (var i=0;i<10;i++) {
  console.log(i);
}

5、while

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

6、三元运算

var a = 1;
var b = 2;
var c = a > b ? a : b

发表于 2018-01-25 10:58 神勇无敌刘虫虫1 阅读(500) 评论(0) 编辑收藏举报

day50 java Script 数字和字符串 布尔值和数组 运算符 条件判断和三元运算

JavaScript引入方式

JavaScript语言规范

JavaScript语言基础

JavaScript数据类型

运算符