js初识

<style>
    .box{
        /*弹性布局*/
        display: flex;
        width: 800px;
        height: 600px;
        background-color: purple;
        /*弹性布局,默认所以的子元素都在通一行显示*/
        /*设置子元素的对齐方式 center(居中) flex-end(从右往左排列) space-around(平分父级宽度)*/
        /*space-between 左右顶格,中间平分父级宽度*/
        justify-content: space-between;

        /*设置子元素是否换行*/
        flex-wrap: wrap;
        /*设置子元素在侧轴的对齐方式  单行*/
        /*align-items: center;*/
        
        align-content: center;
    }

    .box div{
        width: 200px;
        height: 200px;
        background-color: blueviolet;
        margin: 10px;

    }
</style>
=================================

<script>
    // dom对象
    //通过标签名字去获取bom 这里获取到的是两个div
    var box = document.getElementsByTagName('div');
    // console.log(box);
    box[0].innerText = '你好世界';
</script>
=================================

<input type="text" name="demo" placeholder="请输入">
/*调用demo前,必须编写demo.js文件*/

<script>
    // 声明变量,获取的方式,获取之后要去做什么
    //getElementById 通过id去获取
    // var id = document.getElementById('box1');
    // console.log(id);
    // id.innerText = '多谢可好提醒';

    // 通过class去获取 class获取到的是多个
    // var class_1 = document.getElementsByClassName('box');
    // console.log(class_1);
    // class_1[1].innerText = '我是第二个';

    // 通过标签名获取  获取到的是多个
    // var tag = document.getElementsByTagName('input');
    // console.log(tag);
    // tag[0].value ='你好';

    //通过name获取 获取的也是多个
    // var myname = document.getElementsByName('demo');
    // console.log(myname);
    // myname[0].value = '我要被修改了';

    //获取第一个 querySelector  id.class,标签名 (只会返回第一个)
    // var a = document.querySelector('#box1');
    // console.log(a);

    // 获取多个(全部)
    var b = document.querySelectorAll('.box');
    console.log(b);

    // 如果是获取到的多个,要去操作标签的时候,一定要指定一下当前操作标签对于的索引
　　
</script>
==============================

<script>
    // 谁触发事件
    // 事件类型
    // 触发之后做什么事情
    var box = document.getElementsByClassName('box');
    // console.log(box)
    box[0].onclick = function (){
        box[0].innerText = '我这个盒子被点击了';
    }
</script>
============================

<script>
    var box = document.getElementsByTagName('div')[0];
    box.ondblclick=function () {
        box.innerText = '我被双击了';
    }
</script>
==========================

<script>
    var box = document.getElementsByClassName('box')[0];
    // 鼠标划入
    box.onmouseenter=function () {
        box.innerText = '划入我';
    }
    // 鼠标划出
    box.onmouseleave=function () {
        box.innerText = '你离开了我';
    }
</script>
=======================

<script>
    var box = document.querySelector('.box');

    window.onresize =function () {
        console.log('窗口发生了变化')
    }
</script>
======================

<script>
    var selector = document.querySelector('')
    // console.log(selector);
    selector.onchange = function () {
        console.log('下拉框发生了改变');
    }

</script>
=====================

<script>
    // 算数运算符 + - * / %
    // - * / % 会将字符串转换为数字类型
    var a ='100';
    // console.log(typeof a)
    var b = 10;
    // var c = a+b
    // 字符串和数字相加,打印显示字符串
    // console.log(typeof c);
    // 字符串减数字,打印显示数字 或 NaN not a number
    // var c = a-b;
    // console.log(c)
    // console.log(typeof c)

    //  var c = a*b;
    // console.log(c)
    // console.log(typeof c)

    //  var c = a/b;
    // console.log(c)
    // console.log(typeof c)

    //  var c = a%b;
    // console.log(c)
    // console.log(typeof c)

    // ++  --
    // ++a 前置递增 先加1 后返回值
    // a++ 后置递增 先返回值, 后加1
    // 只会对运算有影响,对a本身没有影响

    // var num = 20;
    // ++num;
    // console.log(num)
    // console.log(++num + 10);
    // console.log(num++ + 10);

    //赋值运算符 = += -= *= /=

</script>
========================

<script>
    // > < >= <= == ===(全等于)
    // ==值相等
    // ===除了值相等,类型也必须是一样的
    var a = '20';
    var b = 20;
    console.log(a==b);
    console.log(a===b);
</script>
=====================

<script>
    // &&(与)  ||(或)  !(非)
    // && 两边都为true, 结果为true
    // ||  两边有一个为true,结果为true

    // && 碰到假就停,||碰到真就停
    // var a = this&&true;
    // var b = false || true;
    //
    // console.log(a);
    // console.log(b);

    // var aa = true && 0 && true;
    // console.log(aa)

    //显示null 碰到假就停
    // var bb = true && 5 && -10 && ' ' && null;
    // console.log(bb);

    // 显示3  碰到真就停
    var cc = 3 || -20 || '1' || 0;
    console.log(cc);

</script>
=======================

<script>
    // var str1 = 'hello';
       // console.log(typeof str1);

    // number包含了整数,小数
    // var num = 1.2;
       // console.log(typeof num);

    // bool
    // var bool1 = false;
       // console.log(typeof bool1);

    var arry1 = [1,2,3];
    // js当中没有字典
    var dict1 ={'name':'kehao'}
        // console.log(typeof arry1)
        console.log(typeof dict1)
</script>
========================

<script>
    var box = document.querySelector('.box');
    var inp = document.querySelector('input');
    // box.style.width = '150px';
    // box.style.height = '150px';
    // box.style.background ='blue';

    // box.style.cssText = 'width:200px;height:200px;background:gray';


    // box.style['margin-left'] = '300px';
    // var a = 'width';
    // var b = '400px';
    // box.style[a] = b;

    inp.value ='hello'
</script>
========================

<script>
    var box = document.querySelector('.a1');
    // console.log(box)
    // 修改target属性
    // box.target = '_self';


    // 获取类名 className
    box.className ='kehao';

    //修改属性
    // box.setAttribute('xy','777');

    // 添加属性
    // box.setAttribute('name','chuan');


</script>
=======================

<script>
    // // 年龄大于18,可以进入网吧.否则不可以
   // prompt(输入框)
    // var age = prompt('小伙子,今年多少岁了');
    //
    // if (age>=18){
    //     alert('你已经成年,但是上网也要记得节制')
    // }else {
    //     alert('sorr,未成年不允许进入网吧')
    // }
    // var  age = prompt('输入年龄');
    //
    //如果条件是一个范围,那么必须要用逻辑运算符进行连接
    // if(13<=age && age<15){
    //     alert('你是一个初中生')
    // }else if(15<=age && age<=18){
    //     alert('你是一个高中生')
    // }else {
    //     alert('我不晓得你是那个等级')
    // }
    //
    // switch语句 在特定的值的时候,可以去用
    var age = 20;
    switch (age) {
        case 10:{
            alert('对哦,你10岁');
            break
        }
        case 20:{
            alert('你是20岁');
            break
        }
        case 30:{
            alert('你30岁');
            break
        }
        default:
            alert('抱歉,默认值')

    }
</script>
============================

<script>
    // 变量  条件  变量变化
    // for (var a=1;a<=10;a++){
    //     console.log(a)
    // }

    // for 循环写乘法表
    for (var i=1;i<=9;i++){
        for (var j=1;j<=i;j++){
            var c = j*i
            document.write(j+'*'+i+'='+c+'&emsp;')

        }
        document.write('<br>')
    }
    //python 写法
    // for i in range(1,10):
    //     for j in range(1,i+1):
    //         print('{}*{}={}'.format(j,i,j*i),end=' ')
    //     print()
</script>
=============================
案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
　　/*阿里失量图*/　　
    <link rel="stylesheet" href="./font_3518089_tan77sw6bp/iconfont.css">
    <style>
        .box{
            width: 250px;
            height: 80px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="box">
    密码: <input type="password" placeholder="请输入密码">
        <span class="iconfont icon-biyan"></span>
</div>
<script>
    var inp = document.querySelector('input');
    var btn = document.querySelector('span');

    var flag = true;
    // console.log(inp);
    // console.log(btn);

    // 点击眼睛的logo,改变input的一个显示类型
    btn.onclick = function() {
        if (flag) {
            // 修改属性
            inp.type = 'text';
            // 修改类名
            btn.className = 'iconfont icon-jurassic_openeyes';
            flag = !flag;
    }else {
            inp.type = 'password';
            btn.className = 'iconfont icon-biyan';
            flag = !flag;
        }
    }
</script>
</body>
</html>