JavaScript入门篇

作者: 魔王哪吒 | 来源:发表于2019-07-28 16:22 被阅读7次

    快速认识JavaScript
    熟悉JavaScript基本语法
    窗口交互方法
    通过DOM进行网页元素的操作
    学会如何编写JS代码
    运用JavaScript去操作HTML元素和CSS样式

    <!DOCTYPE HTML>
    <html> 
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>热身</title>
    </head>
    <body>
      <p id="p1">我是第一段文字</p>
      <p id="p2">我是第二段文字</p>
      
      <script type="text/javascript">
        document.write("hello");
        document.getElementById("p1").style.color="blue"; 
      </script>
    </body>
    </html>
    
    image.png
    <!DOCTYPE HTML>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb18030">
            <title>插入js代码</title>
            <script type="text/javascript">
            document.write("开启JS之旅!");
        </script>
        </head>
        <body>
        </body>
    </html>
    
    image.png
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>引用JS文件</title>
    <script src="script.js"></script>
    </head>
    <body>
    </body>
    </html>
    
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS代码的位置</title>
    <script type="text/javascript">
      document.write("I love");
    </script>
    </head>
    <body>
    <script type="text/javascript">
     document.write("javascript");
    </script>
    </body>
    </html>
    
    image.png
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>认识语句</title>
    <script type="text/javascript">
    document.write("Hello");
     document.write("world");
    </script>
    </head>
    <body>
    </body>
    </html>
    
    image.png
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>隐藏的注释</title>
     <script type="text/javascript">
        document.write("神奇的JS,快把我们隐藏了!"); //  快快把我变成单行注释
        /*知道吗
        JS可以实现很多动态效果
        快来学习吧!*/
     </script>
    </head>
    <body>
    </body>
    </html>
    
    image.png
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>变量</title>
    <script type="text/javascript">
     var mynum = 8;
    </script>
    </head>
    <body>
    </body>
    </html>
    
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>判断语句</title>
      <script type="text/javascript">
        var score =80; //score变量存储成绩,初值为80
          if(score>80)
        {
         document.write("很棒,成绩及格了。");
        }
      else
        {
         document.write("加油,成绩不及格。");
        }
      </script>
    </head>
    <body>
    </body>
    </html>
    
    image.png
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>函数调用</title>
       <script type="text/javascript">
          function contxt() //定义函数
          {
             alert("哈哈,调用函数了!");
          }
       </script>
    </head>
    <body>
       <form>
          <input type="button"  value="点击我" onclick="contxt()" />  
       </form>
    </body>
    </html>
    
    image.png
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>document.write</title>
      <script type="text/javascript">
        var mystr="我是";
        var mychar="JavaScript";
    document.write(mychar+"<br>");
    document.write(mystr+mychar+"的忠实粉丝!")
      </script>
    </head>
    <body>
    </body>
    </html>
    
    image.png
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>alert</title>
      <script type="text/javascript">
      function rec(){
        var mychar="I love JavaScript";
        alert(mychar)
      }
      </script>
    </head>
    <body>
        <input name="button" type="button" onClick="rec()" value="点击我,弹出对话框" />
    </body>
    </html>
    
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>alert</title>
      <script type="text/javascript">
      function rec(){
        var mychar="I love JavaScript";
        alert(mychar)
      }
      </script>
    </head>
    <body>
        <input name="button" type="button" onClick="rec()" value="点击我,弹出对话框" />
    </body>
    </html>
    
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>confirm</title>
      <script type="text/javascript">
      function rec(){
        var mymessage= confirm("你是女士吗?");
        if(mymessage==true)
        {
            document.write("你是女士!");
        }
        else
        {
            document.write("你是男士!");
        }
      }    
      </script>
    </head>
    <body>
        <input name="button" type="button" onClick="rec()" value="点击我,弹出确认对话框" />
    </body>
    </html>
    
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>prompt</title>
      <script type="text/javascript">
      function rec(){
        var score; //score变量,用来存储用户输入的成绩值。
        score =  prompt("你的分数是多少?");
        if(score>=90)
        {
           document.write("你很棒!");
        }
        else if(score>=75)
        {
           document.write("不错吆!");
        }
        else if(score>=60)
        {
           document.write("要加油!");
        }
        else
        {
           document.write("要努力了!");
        }
      }
      </script>
    </head>
    <body>
        <input name="button" type="button" onClick="rec()" value="点击我,对成绩做评价!" />
    </body>
    </html>
    
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>window.open</title>
    <script type="text/javascript">
      function Wopen(){
          window.open('http://www.123.com','_blank','height=600,width=400,top=100,left=0');
    
      } 
    </script>
    </head>
    <body>
        <input name="button" type="button" onClick="Wopen()" value="点击我,打开新窗口!" / >
    </body>
    </html>
    
    image.png

    语法:

    window.open([URL], [窗口名称], [参数字符串])

    _blank:在新窗口显示目标网页
    _self:在当前窗口显示目标网页
    _top:框架网页中在上部窗口中显示目标网页

    window.close(); //关闭本窗口
    <窗口对象>.close(); //关闭指定的窗口

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>close()</title>
      <script type="text/javascript">
         var mywin=window.open("http://www.123.com");
     mywin.close();
      </script>
    </head>
    <body>
    </body>
    </html>
    
    <!DOCTYPE html>
    <html>
     <head>
      <title> new document </title>  
      <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
      <script type="text/javascript">  
        
        // 新窗口打开时弹出确认框,是否打开
    function openWindow(){
    var wep;
    var op;
    wep = confirm("是否打开新网页?");
    if(wep==true)
    {
    op = prompt("默认网址为:","http://www.123.com/");
    if(op!=null)
    window.open(op,'_blank','width=400,height=500,menubar=no,toolbar=no');
    }
    else
    alert("操作结束!!");
    
    }
        // 通过输入对话框,确定打开的网址,默认为 http://www.imooc.com/
    
        //打开的窗口要求,宽400像素,高500像素,无菜单栏、无工具栏。
        
        
      </script> 
     </head> 
     <body> 
          <input type="button" value="新窗口打开网站" onclick="openWindow()" /> 
     </body>
    </html>
    

    HTML代码分解为DOM节点层次图:

    image

    通过ID获取元素
    document.getElementById(“id”)

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>document.getElementById</title>
    </head>
    <body>
    <p id="con">JavaScript</p>
    <script type="text/javascript">
      var mychar=           ;
      document.write("结果:"+mychar); //输出获取的P标签。 
      document.getElementById("con")
    </script>
    </body>
    </html>
    

    innerHTML 属性
    innerHTML 属性用于获取或替换 HTML 元素的内容。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>innerHTML</title>
    </head>
    <body>
    <h2 id="con">javascript</H2>
    <p> JavaScript是一种基于对象、事件驱动的简单脚本语言,嵌入在HTML文档中,由浏览器负责解释和执行,在网页上产生动态的显示效果并实现与用户交互功能。</p>
    <script type="text/javascript">
      var mychar=           ;
      document.write("原标题:"+mychar.innerHTML+"<br>"); //输出原h2标签内容
      document.getElementById("con")
      document.write("修改后的标题:"+mychar.innerHTML); //输出修改后h2标签内容
      mychar.innerHTML="Hello world";
    </script>
    </body>
    </html>
    

    改变 HTML 样式

    语法:
    Object.style.property=new style;

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>style样式</title>
    </head>
    <body>
      <h2 id="con">I love JavaScript</H2>
      <p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
      <script type="text/javascript">
        var mychar= document.getElementById("con");
     mychar.style.color="red";
     mychar.style.backgroundColor ="#ccc";
    mychar.style.width="300px";
      </script>
    </body>
    </html>
    

    显示和隐藏(display属性)

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>display</title>
        <script type="text/javascript"> 
            function hidetext()  
            {  
            var mychar = document.getElementById("con");
            mychar.style.display="none";
            }  
            function showtext()  
            {  
            var mychar = document.getElementById("con");
            mychar.style.display="block";
            }
        </script> 
    </head> 
    <body>  
        <h1>JavaScript</h1>  
        <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p> 
        <form>
           <input type="button" onclick="hidetext()" value="隐藏内容" /> 
           <input type="button" onclick="showtext()" value="显示内容" /> 
        </form>
    </body> 
    </html>
    

    className 属性设置或返回元素的class 属性。

    获取元素的class 属性

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>className属性</title>
    <style>
        body{ font-size:16px;}
        .one{
            border:1px solid #eee;
            width:230px;
            height:50px;
            background:#ccc;
            color:red;
        }
        .two{
            border:1px solid #ccc;
            width:230px;
            height:50px;
            background:#9CF;
            color:blue;
        }
        </style>
    </head>
    <body>
        <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p>
        <input type="button" value="添加样式" onclick="add()"/>
        <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p>
        <input type="button" value="更改外观" onclick="modify()"/>
    
        <script type="text/javascript">
           function add(){
              var p1 = document.getElementById("p1");
              p1.className = "one";
           }
           function modify(){
              var p2 = document.getElementById("p2");
              p2.className = "two";
           }
        </script>
    </body>
    </html>
    
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
    <title>javascript</title>
    <style type="text/css">
    body{font-size:12px;}
    #txt{
        height:400px;
        width:600px;
        border:#333 solid 1px;
        padding:5px;}
    p{
        line-height:18px;
        text-indent:2em;}
    </style>
    </head>
    <body>
      <h2 id="con">JavaScript课程</H2>
      <div id="txt"> 
         <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
            <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>
            <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
            <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
      </div>
      <form>
      <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->
        <input type="button" value="改变颜色" >  
        <input type="button" value="改变宽高" >
        <input type="button" value="隐藏内容" >
        <input type="button" value="显示内容" >
        <input type="button" value="取消设置" >
      </form>
      <script type="text/javascript">
    //定义"改变颜色"的函数
    obj.style.color
    obj.style.backgroundColor 
    
    //定义"改变宽高"的函数
    obj.style.width
    obj.style.height 
    
    //定义"隐藏内容"的函数
    obj.style.display="none";
    
    //定义"显示内容"的函数
    obj.style.display="block";
    
    //定义"取消设置"的函数
    confirm()
    
    
      </script>
    </body>
    </html>
    

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。


    请点赞!因为你们的赞同/鼓励是我写作的最大动力!

    欢迎关注达叔小生的简书!

    这是一个有质量,有态度的博客

    博客

    相关文章

      网友评论

        本文标题:JavaScript入门篇

        本文链接:https://www.haomeiwen.com/subject/somurctx.html