• JavaScript 初步认识


    首先呢 要成为WEB全栈工程师呢 JavaScript 是必须要会的 高级技术看自身兴趣爱好,但是基础必须掌握 因为有良好的基础学习jQuery会比较轻松。

    js是一门轻量的脚本语言 我学它主要目的是针对HTML页面的响应。


     1 JS在什么地方写?

    JS可以在HTML中的head标签内出现,也可以在body标签中出现,或是在body标签下面写,你也可以把它放在一个后缀为 .js 的文件中。最常见的是在body标签后 和 生成js文件后引入。

    1.1 在body后面写js

    <!DOCTYPE html>
    <html>
    <head>
        <title>learn javascript</title>
    </head>
    <body>
    
    </body>
    {{--js--}}
    <script>
        alert("yo man what's up");
    </script>
    </html>

    1.2 外部引入

    新生成一个js文件 在它的内部写你想写的js代码(这里我们就简单写写):

    alert("yo man what's up");

    然后在页面中引用:

    <!DOCTYPE html>
    <html>
    <head>
        <title>learn javascript</title>
    </head>
    <body>
    
    </body>
    {{--js--}}
    <script src="demo.js"></script>
    </html>

    2 输出功能

     js常用的输出数据的方法有四种:

    1. document.write:写入HTML文档中。
    2. window.alert:弹出一个警告窗口。
    3. console.log:写入到浏览器控制台中。
    4. innerHTML:写入到HTML元素中。

    2.1 写入HTML文档

    <script>
        document.write("<h1>hohoho</h1>");
        document.write(Date())
    </script>

    这仅仅是往HTML中写入内容,但是如果在页面已经加载完毕了在执行write的话 页面就会被覆盖。

    2.2 警告窗

    我们可以通过警告窗向用户展示错误信息或是别的,在开发中也可用于测试。

    <script>
        window.alert("alert");
        alert(1 + 1);
    </script>

    2.3 写入浏览器控制台

    <script>
        var number = 5 + 6;
        console.log("write to console:" + number)
    </script>

    这样我们就可以打开浏览器 在开发者工具中的console控制台看见这段话了。很合适调试测试时使用。

    2.4 写入HTML元素

    这是最常用的方法了,它可以改变HTML中元素的内容。

    <!DOCTYPE html>
    <html>
    <head>
        <title>learn javascript</title>
    </head>
    <body>
    <p id="demo" onclick="showDate()">现在几点?</p>
    </body>
    {{--js--}}
    <script>
        function showDate(){
            // 首先通过ID来查找元素 然后用innerHTML来修改内容。
            document.getElementById("demo").innerHTML = Date();
        }
    </script>
    </html>
  • 相关阅读:
    常用的PHP图形处理函数
    PHP常用文件操作函数
    PHP常用正则表达式函数浅析
    PHP类常量的常见访问方法
    使用PDO操作MySQL
    js数组的遍历方法,维持索引?splice与forEach && 孤儿对象形成,造成内存泄漏,置空等待垃圾回收
    [DOM] Input elements should have autocomplete attributes (suggested: "new-password"): (More info: https://goo.gl/9p2vKq)
    $(...).get(...).addClass is not a function
    使用淘宝镜像的命令
    对象、数组与JSON字符串之间的转换
  • 原文地址:https://www.cnblogs.com/sun-kang/p/7469185.html
Copyright © 2020-2023  润新知