JavaScript

为什么要学javascript

js是web开发人员必须掌握的三门语言之一
1）html: 定义了网页的内容
2）css：描述了网页的布局
3）js: 网页的行为

本节课：js简介和如何与html+css一起工作

js: 简介

1. js是互联网上最流行的脚本语言
2. js是一种轻量级的编程语言
3. js是可插入html网页的编程代码，
4. 可以用浏览器执行 js很容易上手
   
   

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200506165426451.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmEyMDIweGlhb3hpYW4=,size_16,color_FFFFFF,t_70

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // 如何通过JavaScript去操作html网页内容
        // 对p标签进行取值和复制
        function t1() {
            // 操作页面中p标签
            //如何找需要操作的对象：选择：id
            //css选择器：id class 标签
            // 当前html文档 文档下的节点
            // 找到标签后复制
            // 找到标签后取值
            var c=document.getElementById("p1").innerHTML;
            alert("取出来的值是："+c)
            document.getElementById("p1").innerHTML="这是改变后的p标签";//.innerHTML属性是改变标签的值
        }
        // 对a标签进行取值和复制
        function t2(){
            // 取值以后改变值
            document.getElementById("a1").innerHTML="恒科技";
        }
        // 对input标签进行取值和复制
        function t3() {
             // 给标签取值
            var d = document.getElementById("inp1").value;
            alert("群出来的值是："+d);
            // 给标签赋值
            document.getElementById("inp1").value="符合咖啡";
        }
        // 注意：
        // 一旦找到了当前文档的对象后，点出来的都是属性，有赋值语句就是给属性重新赋值，没有赋值语句的就是取属性的值
        function h() {
            if(document.getElementById("ul1").style.display=="none"){
                document.getElementById("ul1").style.display="block";
            }else{
                document.getElementById("ul1").style.display="none";
            }
        }
    </script>
</head>
<body>

    <!--测试下拉菜单展开和收起操作-->
    <ul>
        <li onclick="h()">用户管理</li>
        <ul id="ul1" style="display: block">
            <li>登录</li>
            <li>注册</li>
        </ul>
    </ul>


     <p id="p1">这是一个段落标签</p>
     <a href="tt.html" id="a1">这是一个超链接标签</a>
     <div>2020我也加油</div>
     <hr><!--这里代表的是一条线-->
     <input type="text" id="inp1" value="国际货币">
     <hr>
     <input type="button" value="bount1" onclick="t1()">
     <input type="button" value="bount2" onclick="t2()">
     <input type="button" value="bount3" onclick="t3()">
     <input type="button" value="bount4" onclick="t4()">



</body>
</html>

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

        // 函数类型: 需要创造触发去点击该函数才能运行：这里涉及到触发的概念
        function AA() {
            var gg = prompt("请输入","")//输入的默认为字符类型
            // alter:信息提示框
            alert("信息提示框")
            // 从提示框里面输入一个值
            var b = prompt("请输入一个整数：","")
            // for循环显示打印情况
            for (var i = 0; i < b; i++) {
                document.write("当前的元素是："+i)
            }

            // 字符串的连接+
            var a = "10";
            var e = 109;
            var f = parseInt(a)-e
            alert(f)
        }

        function BB(f) {
            // 定义变量 var可以表示所有的变量类型
            var a = "这是一个变量";
            var b = 3;
            // 逻辑控制语句
            if (b<3){
                document.write("b<3")//注意""引号里面可以放任何html标签
            }else if(b==3){
                // 在页面上打印出值
                document.write("b==3")
            }else{
                document.write("b>3")
            }
            // switch(var)开关结构
            switch (b) {
                case 1:
                    document.write("<h1>1</h1>")
                    break;
                case 2:
                    document.write("<h1>2</h1>")
                    break;
                case 3:
                    document.write("<h1>2</h1>")
                    break;
                case 4:
                    document.write("<h1>2</h1>")
                    break;
                default:
                    document.write("<p>其他选项</p>>")
            }
            /**
             *for循环
             * */
            for (var i = 0; i < 10; i++) {
                // 包含字符串连接符
                if(i>7){
                    break
                }else{
                    document.write("<p>"+i+"</p>")//这是一个框，提示框
                    continue
                }
            }

            //while循环
            var a=1
            while(a<5){
                document.write("<br><h4>"+a+"</h4>");
                a++;
            }
        }

    </script>
</head>

<body>
    <!--触发事件-->
    <input type="button" value="触发按钮"  onclick="AA()">
    <input type="button" value="触发按钮"  onclick="BB(prompt('请输入一个数字',''))">
</body>

</html>