JavaScript学习2

1、变量

1）关键字：var

2）声明变量：var a

3）赋值：=

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //定义变量方式一
    var a;
    a = 10;
    //定义变量方式二
    var b = 20;
    //在控制台打印
    console.log(a,b);

    //如果想给已知的声明变量修改值，不需要再次声明
    a = 30;
    console.log(a,b);

    //如果只声明不赋值，默认为undefined(没有定义值)
    var c;
    console.log(c);
</script>
</body>
</html>

2、变量名命名规则

1）不可以数字开头。

2）不可使用关键字和保留字。https://www.runoob.com/js/js-reserved.html

3）字母，数字，下划线(_)，美元符$组合。

不符合变量名命名规范的出现报错信息：

Uncaught SyntaxError: Invalid or unexpected token

语法错误：标记无效或意外

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //变量命名规则
    //1、数字不能开通
//    var 1bianling = 'a';
//    console.log(1bianling);
    //2、不能是关键字和保留字
//    var this = 10;
//    console.log(this);
        // 在JavaScript中区分大小写
    var This = 40;
    console.log(This);
    //3、字母数字下划线混合
    var _this = 20;
    var $var = 30;
    var $_1this = 50
    console.log(_this);
    console.log($var);
    console.log($_1this);
    // 可以使用中文，但是不推荐。
    var 中文 = '变量可以使用中文命名';
    console.log(中文);
</script>
</body>
</html>

结果如下：

3、变量的命名风格

1）见名知义。

2）驼峰命名法：

　　大驼峰：JavaScript 每个单词首字母大写。

　　小驼峰：javaScript 首个单词首字母小写，第二个单词后每个首字母大写。

4、函数

1）什么是函数？

　　可以重复使用的代码块。

2）如何使用函数？

　　使用之前，创建函数

3）函数的声明：function

　　有名函数

　　匿名函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
    * 函数声明
    *   有名函数
    *   匿名函数：不可以直接定义，否则报错：Uncaught SyntaxError: Function statements require a function name
    * */
//    function fn(){
//        //代码块
//    }
    function () {
        //代码块
    }
</script>
</body>
</html>

4）函数的调用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
             200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box" ></div>
<script>
    //定义函数
    function fn(){
     alert(1);
    }
    //调用函数
    fn();
//    console.log(fn())  

    //匿名函数调用-事件调用
    var box = document.getElementById('box');
//    console.log(box);
    box.onclick = function(){
        //放置代码块
        alert(2);
    }
</script>
</body>
</html>

5、标识符

1）变量名和函数名的命名规则相同。

2）标识符分类：变量名、函数名（函数参数）、属性名

6、JS属性操作

两种操作属性的方法：

1）点 .

　　元素.属性

2）方括号[ ]

　　元素['属性'] 方括号中可以填入需要计算的东西，或者不符合标识符规范的！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
             200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div id="box">这是文字</div>
<script>
    var box = document.getElementById('box');
//    //点属性.
//    box.onclick = function () {
//        box.style.width = '300px';
//    };

//    //方括号
//    box['onclick'] = function () {
//        box['style']['height'] = '300px';
//    };
//    //[]刚括号内的运算
//    box['on'+'click'] = function () {
//        box['style']['height'] = '300px';
//    };

//    //点+方括号一起混合使用
//    box.onclick = function () {
//        box['style'].width = '300px';
//    };
    box.onclick = function () {
//         box.style.fontSize = '30px';
         box.style['font-size'] = '30px';
    }
</script>
</body>
</html>

7、JS属性的读与写操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS属性的读与写操作</title>
    <style>
        #box{
             200px;
            height: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div id="box" style=" 600px;">这是文字</div>
<script>
    var box = document.getElementById('box');
    box.style.fontSize = '30px';
    box.style.width = '400';
    console.log(box.style.fontSize);
    console.log(box.style.width);
</script>
</body>
</html>

8、常用属性

id：div

className：class是关键字，改成的className。div

value：form、input

style : 行间属性一般写在<head>里

　　background

　　color

　　width

　　height

　　cssText：会替换掉当前所有的行间属性

innerHTML ：网页内容，可以替换掉行间属性的所有内容。

href：链接：值获取到的时绝对路径。

src：连接图片、文件或者资源：值获取到的时绝对路径。

tagName：当前元素使用的什么标签，获取到的是大写字母。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS属性的读与写操作</title>
    <style>
        #box{
             200px;
            height: 200px;
            background: red;
        }
        a{
            font-size: 20px;
        }
        img{
            display: block;
            400px;
        }
    </style>
</head>
<body>
<div id="box" class="active">这是文字</div>
<input id="input1" type="text" value="请输入密码：" />
<p id="txt">
    这是文字内容
    <span>
        span内置容器
    </span>
</p>
<a id="link" href="D:\project-pycharm\JavaScript\day02\10JS属性读与写操作.html">href常用属性的连接作用</a>
<img id="img" src="img/1.png" alt="">
<script>
    var box = document.getElementById('box');
//    console.log(box.id);
//    console.log(box.className);
    var input1 = document.getElementById('input1');
//    console.log(input1.value)
    box.onclick = function () {
//        box.style.width = '300px';
//        box.style.height = '300px';
//        box.style.background = 'green'
        // 使用cssText解决上面三句话
        box.style.cssText = '300px;height:300px;background: blue';
    }

    var txt = document.getElementById('txt');
    //获取HTML的内容
    console.log(txt.innerHTML);
    //修改HTML内容
    txt.innerHTML = '123456';

    var link = document.getElementById('link');
    console.log(link.href);
    var img = document.getElementById('img');
    console.log(img.src);
//tagName:当前元素使用的标签名称
    console.log(link.tagName);
    console.log(img.tagName);
</script>
</body>
</html>

9、揉捏DIV

代码实现如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        body {
            background: rgb(223, 231, 231);
        }

        .wrap button {
             120px;
            height: 40px;
            font: bold 16px/40px "宋体";
            text-align: center;
            color: #fff;
            background: red;
            border: none;
            padding: 0;
            margin: 0;
            margin-left: 20px;
        }

        #box {
             100px;
            height: 100px;
            background: #fff;
            border: 4px solid #000;
        }

        .mask {
             100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background: rgba(0, 0, 0, .5);
            display: none;
        }

        .select {
             400px;
            height: 260px;
            background: #fff;
            border: 20px solid #999;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -130px;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 10%;
        }

        .setList li {
            height: 30px;
            font: 14px / 30px "宋体";
            margin-top: 10px;
        }

        .setList span {
            float: left;
        }

        .setList span:not(.title) {
             40px;
            height: 30px;
            border: 1px solid #000;
            margin: 0 5px;
            text-align: center;
            background: #e7e2e286;
            color: #333;
        }

        #red {
            background: red;
        }

        #yellow {
            background: orange;
        }

        #blue {
            background: skyblue;
        }

        .setList li:first-of-type span:not(.title) {
            color: #fff;
        }

        .select button {
             80px;
            height: 30px;
            font: 14px / 30px "宋体";
            color: #fff;
            text-align: center;
            background: rgb(63, 47, 153);
            border: none;
        }

        .select button:first-of-type {
            margin-left: 28%;
        }

    </style>
</head>
<body>
<div class="wrap">
    <h2>请为下面的div设置样式:
        <button id="btn">点击设置</button>
    </h2>
    <div id="box">
    </div>
</div>

<div class="mask">
    <div class="select">
        <ul class="setList">
            <li>
                <span class="title">请选择颜色：</span>
                <span id="red">红</span>
                <span id="yellow">黄</span>
                <span id="blue">蓝</span>
            </li>

            <li>
                <span class="title">请选择宽（px）:</span>
                <span id="w200">200</span>
                <span id="w300">300</span>
                <span id="w400">400</span>
            </li>

            <li>
                <span class="title">请选择高（px）:</span>
                <span id="h200">200</span>
                <span id="h300">300</span>
                <span id="h400">400</span>
            </li>

        </ul>
        <button id="reset">恢复</button>
        <button id="sub">确认</button>

    </div>
</div>
<script>
    /*
    功能分析：
        1.点击按钮，然后显示设置页面。
            1)获取按钮：通过id或者选择器
            2)绑定点击事件
            3)显示设置页面：display
        2.弹出层上的按钮添加事件修改div样式。
        3.设置恢复按钮事件，点击之后将div样式变为初始化状态。
        4.点击确定让弹出层消失，div样式保持修改后的状态。
    * */
    //1获取元素
    var btn = document.getElementById('btn');
    var mask = document.querySelector('.mask');
    var box = document.getElementById('box');
    var red = document.getElementById('red');
    var yellow = document.getElementById('yellow');
    var blue = document.getElementById('blue');
    var w200 = document.getElementById('w200');
    var w300 = document.getElementById('w300');
    var w400 = document.getElementById('w400');
    var h200 = document.getElementById('h200');
    var h300 = document.getElementById('h300');
    var h400 = document.getElementById('h400');
    var reset = document.getElementById('reset');
    var sub = document.getElementById('sub');
    //    console.log(red);
    //    console.log(btn);
    //2给元素加事件
    btn.onclick = function () {
        //显示弹出层
        mask.style.display = 'block';
    };
    //选择红后改变背景色
    red.onclick = function () {
        box.style.background = 'red';
    };
    yellow.onclick = function () {
        box.style.background = 'yellow';
    };
    blue.onclick = function () {
        box.style.background = 'blue';
    };
    w200.onclick = function () {
        box.style.width = '200px';
    };
    w300.onclick = function () {
        box.style.width = '300px';
    };
    w400.onclick = function () {
        box.style.width = '400px';
    };
    h200.onclick = function () {
        box.style.height = '200px';
    };
    h300.onclick = function () {
        box.style.height = '300px';
    };
    h400.onclick = function () {
        box.style.height = '400px';
    };
    //恢复
    reset.onclick = function () {
//        box.style.width = '100px';
//        box.style.height = '100px';
//        box.style.background = '#FFF';
        // 上三行代码可以简化如下代码
        box.style.cssText = 'wieth: 100px;height: 100px;background: #FFF'

    };

    //确定
    sub.onclick = function () {
        //隐藏弹出层
        mask.style.display = 'none';
    };
</script>
</body>
</html>

相关阅读:
不走弯路，就是捷径
 小白逆袭之路
 java期末设计（十三周）
java第6次作业
 java第五次作业
 java第四次作业
 第三次作业
 第二次作业
 对异常的看法
 java学习笔记（一）
原文地址：https://www.cnblogs.com/liunaixu/p/16389411.html

热门文章
Java课程“新”得（一）
⑤
④
③
①
JAVA期末设计第十三周
 java第6次作业
 JAVA第4次作业
 JAVA第三次作业
 JAVA 第二次作业