• JavaScript初步入门,一个小白刚步入JavaScript以及一些简简单单的程序,为初学者提供便利。


        在上一篇博客中,我提到了html,css,JavaScript,在学习JavaScript之前,我们把这三者的概念在进行一次回顾。


    结构层:HTML→从页面结构,语义上描述页面。
    样式层:CSS→从审美的角度来装饰页面。
    行为层:JavaScript→从交互的角度提升页面用户的体验

    交互:网页的元素针对用户的特定行为,产生指定的变化。
    JavaScript是什么?
         JavaScript是用来实现交互的。
         首先,JavaScript是纯文本,用任何的文本编辑器都能够编辑它。同时,它是网页的一部分,
    随着一个html的页面被请求,JavaScript脚本也随之下载到了用户的计算机本地,在用户计算机本地
    渲染运行的。

       同时注意JavaScript的一些特点:
        1 JavaScript脚本可以从网上看到。
        2 JavaScript不是Java!
        3 JavaScript轻量级运行在浏览器中的语言,而Java是跨平台的开发多种语言。
        4 JavaScript是运行在用户的计算机中的,是前台的脚本,用来开发页面效果。
        5 有JavaScript的网页仍然是静态网页。

        6  JavaScript对换行 空格不敏感,不会影响其效果,但是对大小写严格敏感。

    下面就是我学到的几个初级的JavaScript的程序,为了更好的方便直观,我把代码放在了下面,大家在看代码时侧重注意下<div></div>与<script></script>


    单机黑色圆圈,标题改变。
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>123</title>
    <style>
    div{
    100px;
    height: 100px;
    border-radius: 50px 50px;
    background-color: black;
    margin: auto;
    }
    </style>
    <script>
    function gaibian(){
    document.title="ABC";
    }
    </script>
    </head>
    <body>
    <div onclick="gaibian()">

    </div>

    </body>
    </html>


    单机黑色圆圈,弹出警告。
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>123</title>
    <style>
    div{
    100px;
    height: 100px;
    border-radius: 50px 50px;
    background-color: black;
    margin: auto;

    }
    </style>
    <script>
    function jinggao(){
    window.alert("警告");
    }
    </script>
    </head>
    <body>
    <div onclick="jinggao()">

    </div>

    </body>
    </html>


    单机黑色圆圈,页面跳转。
    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="UTF-8">
    <title>123</title>
    <style>
    div{
    100px;
    height: 100px;
    border-radius: 50px 50px;
    background-color: black;
    margin: auto;

    }
    </style>
    <script>
    function tiaozhuan(){
    window.location="www.baidu.com";
    }
    </script>
    </head>
    <body>
    <div onclick="tiaozhuan()">

    </div>

    </body>
    </html>


           可以看到,<div></div>标签中的含义为单机此标签,会指向一个功能。!最后的括号必须添加。!而这个功能的详细指令正是在我们的<script></script>标签中,以此来实现各种功能。

         好的。

    到目前为止,我们认识了三个语句:
    document.title="ABC"; 让页面的标题改变。
    window.alert("ABC"); 弹出警告
    window.location="网址"; 让页面跳转。

    相信大家也发现了,这些语句很复杂并没有相同的结构。这与文字,属性,语法相关,我会继续学习,把这些也呈现
    给大家,谢谢大家对我的支持。

  • 相关阅读:
    小村系列之十八:幸福的桥
    小村系列之十六:改革的石头
    获取<select>,<radio>,<checkbox>中未被选中的value值和被选中的value值
    display:inline-block,block,inline的区别与用法
    Java中List Set Map集合的遍历
    C#自定义List类
    C#获取文件和文件夹大小
    C# winform带进度条的图片下载
    C#委托的详细使用
    asp.net cookie和session的详细使用
  • 原文地址:https://www.cnblogs.com/799875530qq/p/5312230.html
Copyright © 2020-2023  润新知