• JS学习笔记(一) 概述


      参考资料:

      1. http://www.w3school.com.cn/js/

      2. http://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

      3. http://www.javascriptcn.com/

     

       ☂ 简介

      ☞ Javascript是一种轻量级的解释型脚本语言。

       HTML中的脚本必须位于<script>与</script>标签之间。

      ☞ 脚本可被放置在HTML页面的<body>和<head>部分中。

      ☞ 引用外部.js文件的方式:

    <script src="myScript.js"></script>

     Javascript对大小写敏感。

     可在文本字符串中使用反斜杠“”对代码进行换行。

     Javascript拥有动态类型。

     未初始化的变量的值为undefined。

    ☞ 重新申明变量,该变量的值不会丢失。

       

    • 写入HTML输出
    <script>
    document.write("<h1>This is a heading</h1>");
    document.write("<p>This is a paragraph.</p>");
    </script>

    效果:

    • 对事件作出反应
    <button type="button" onclick="alert('Welcome!')">Click me</button>

    效果:

    • 改变HTML内容
    <p id="demo">JavaScript 能改变 HTML 元素的内容。</p>
    
    <script>
    function myFunction()
    {
      x=document.getElementById("demo");  // 找到元素
      x.innerHTML="Hello JavaScript!";    // 改变内容
    }
    </script>
    
    <button type="button" onclick="myFunction()">Click me</button>

    点击前:

    点击后:

     

    • 改变HTML图像
    <script>
    function changeImage()
    {
      element=document.getElementById('myimage');
      
    if (element.src.match("bulbon"))  {   element.src="bulboff.gif";  }   else {   element.src="bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="bulboff.gif">

    点击前:

    点击后:

    • 改变HTML图像
    <p id="demo">JavaScript 能改变 HTML 元素的样式。</p>
    
    <script>
    function myFunction()
    {
      x=document.getElementById("demo") // 找到元素
      x.style.color="#ff0000";          // 改变样式
    }
    </script>
    
    <button type="button" onclick="myFunction()">Click me</button>

    点击前:

    点击后:

    • 验证输入
    <input id="demo" type="text">
    
    <script>
    function myFunction()
    {
      var x=document.getElementById("demo").value;
      
    if(x==""||isNaN(x))   {     alert("Not Numeric");   } } </script> <button type="button" onclick="myFunction()">Click me</button>
  • 相关阅读:
    Linux strace命令
    Xilinx实习一年总结
    Red Hat Linux 挂载外部资源
    4.6、Libgdx线程介绍
    Xshell中文乱码怎么处理?
    C++之指针指向二维数组
    POJ 2996 Help Me with the Game
    UVa 10377
    你们都满足下面的工作考核吗
    使用Python编写简单网络爬虫抓取视频下载资源
  • 原文地址:https://www.cnblogs.com/AmitX-moten/p/4781958.html
Copyright © 2020-2023  润新知