zoukankan      html  css  js  c++  java

  • JavaScript

    现在基本上所有浏览器都支持JavaScript

    它是一种轻量级的编程语言，可以给网页添加各种动态效果，使网页更加美观

    可放在<head></head>和body></body>，一般放在<head></head>中

    放在<head></head>中浏览器解析head时就会执行

    放在<body></body>中页面读取到该语句时就会执行

    javascript是一种区分大小写的编程语言

    javascript的注释有

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. //单选注释  
    2. /*多选注释*/  

    使用javascript我们可以使用<script></script>在Html页面中插入javascript代码

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <script type="text/javascript">这里是javascript内容</script>  

    type="text/javascript"是告诉浏览器，<script>中的文本内容(text)是javascript语言
    也可以使用外部文件来引用，当用外部文件写js时，js文件不需要添加script标签

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <script src="myjs.js"></script>  

    javascript中每个语句用";"分隔开，";"可以不写，建议写上

    变量：

    声明变量用关键字：var

    如：

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. var myVar;  
    2. var myVar="javascript";  
    3. var myNum=6;  
    4. var myChar="name", age="20";  
    5. var arr=[1, 2, 3, 4];  
    6. var arr=["wu", "xiao", "cheng"];  
    7. var arr=new Array("wu", "xiao", "cheng");  
    8.   
    9. var arr=new Array();  
    10. arr[0]=20;  
    11. arr[1]="Hello World"'  

    当声明一个变量，但没有赋值时，其值为“undefined”

    如：

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. var str;  

    当然，变量可以不声明，直接使用，但这样做并不规范，建议声明后再使用

    变量名的命名：

    必须以字母、下划线(_)或美元符($)开始，可以使用多个字母、数字、下划线(_)或美元符($)

    但不能使用javascript关键词和javascript保留字

    当声明多个变量时，用","隔开

    局部变量和成员变量

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title></title>  
    6.     </head>  
    7.     <body>  
    8.     <script>  
    9.         var n=1;    //全局变量，任何地方都可用  
    10.         m=2;        //全局变量，任何地方都可用  
    11.         function fun(){  
    12.             var x = 1;      //局部变量，当前函数可用  
    13.             y = 2;          //全局变量，任何地方都可用，但要调用本函数才会成为全局变量  
    14.         }  
    15.         fun();  
    16.         alert(x)  
    17.     </script>  
    18.     </body>  
    19. </html>  

    函数：

    javascript中定义函数的方法：

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. function 函数名(){  
    2.     函数代码;  
    3. }  

    function是定义函数的关键字

    函数名为给该函数起的名字

    ()括号里可以传递参数，也可以不传递参数，参数可以传递任意多个，当有多个参数时，用","分隔开

    函数代码是要完成特定功能的代码

    函数的调用：

    函数定义好后要调用才会执行

    调用方法：<script>标签内调用，Html文件内调用

    在<script>中调用

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <script>  
    2.     function demo(){  
    3.         代码内容;  
    4.     }  
    5.     demo();     //调用函数  
    6. </script>  

    在html中调用

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <script>  
    2.     function demo(){  
    3.         代码内容;  
    4.     }  
    5. </script>  
    6. //这里使用按钮来调用函数  
    7. <input type="button" onclick="demo()" value="按钮">  

    输出：

    可以使用document.write()向Html直接输出内容，输出多项内容用"+"连接

    如：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title></title>  
    6.         <script type="text/javascript">  
    7.             var mystr="world"  
    8.             document.write("Hello"+"<br/>"+mystr);  
    9.         </script>  
    10.     </head>  
    11.     <body>  
    12.     </body>  
    13. </html>  


    确定：

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. function con(){  
    2.     var showMessage=confirm("点击确定还是取消？");  
    3.     if(showMessage==true){  
    4.         document.write("你点击了确定");  
    5.     }else{  
    6.         document.write("你点击了取消");  
    7.     }  
    8. }  
    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title></title>  
    6.         <script type="text/javascript">  
    7.             function con(){  
    8.                 var showMessage=confirm("点击确定还是取消？");  
    9.                 if(showMessage==true){  
    10.                     document.write("你点击了确定");  
    11.                 }else{  
    12.                     document.write("你点击了取消");  
    13.                 }  
    14.             }  
    15.         </script>  
    16.     </head>  
    17.     <body>  
    18.     <input type="button" onClick="con()" value="按钮" />  
    19.     </body>  
    20. </html>  

    点击按钮后会在页面打印出相应的内容

    提问：

    带文本输入框的消息对话框

    prompt(str1,str2);

    str1为提示的内容，不可修改

    str2为输入框中提示的内容，可修改

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. function pro(){  
    2.     var showMessage=prompt("显示内容","输入内容");  
    3.     if(showMessage>100){  
    4.         document.write("你输入的内容大于100");  
    5.     }else{  
    6.         document.write("你输入的内容小于100");  
    7.     }  
    8. }  
    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title></title>  
    6.         <script type="text/javascript">  
    7.             function pro(){  
    8.                 var showMessage=prompt("显示内容","输入内容");  
    9.                 if(showMessage>100){  
    10.                     document.write("你输入的内容大于100");  
    11.                 }else{  
    12.                     document.write("你输入的内容小于100");  
    13.                 }  
    14.             }  
    15.         </script>  
    16.     </head>  
    17.     <body>  
    18.     <input type="button" onClick="pro()" value="按钮" />  
    19.     </body>  
    20. </html>  


    警告：
    alert(字符串或变量);

    如

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. alert("Hello World");  

    异常处理：

    如下，

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <script>  
    2.     function demo(){  
    3.         alert(message)  
    4.     }  
    5.     demo();  
    6. </script>  

    message是没有声明的，所以运行该函数时会有错误，但没胡任何提示，这时可以用try catch来捕获异常

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. function demo(){  
    2.     try{  
    3.         //执行的语句  
    4.         alert(message);  
    5.     }catch(err){  
    6.         //对错误的处理，弹出提示  
    7.         alert(err)  
    8.     }  
    9. }  
    10. demo();  

    也可以用throw来捕获异常，它可以用来自定义一个错误，可以与try，catch一起使用

    throw的使用

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. throw "输出的内容";  


    Javascript-DOM

    DOM是文档对象模型(Document Object Model)

    当页面加载时，用来访问和处理Html文档的标准方法，DOM以树结构呈现html文档中的元素属性等

    通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 Html

    JavaScript 能够改变页面中的所有 HTML 元素

    JavaScript 能够改变页面中的所有 HTML 属性

    JavaScript 能够改变页面中的所有 CSS 样式

    JavaScript 能够对页面中的所有事件做出反应

    DOM操作Html

    [javascript] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. document.write();  

    要注意的是不要在加载完文档后用例document.write();，这样会覆盖掉该文档

    寻找元素：
    通过ID找到Html元素

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <p id="pid">原来内容</p>  
    2. <script>  
    3.     function demo(){  
    4.         var n=document.getElementById("pid").innerHTML="新内容";  
    5.     }  
    6. </script>  
    7. <button onclick="demo()">按钮</button>  

    通过标签名找到Html元素，当有多个同样的标签名时，只会执行第一个

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <script>  
    2.     function demo(){  
    3.             document.getElementsByTagName("button");  
    4.             alert("通过标签名找到")  
    5.     }  
    6. </script>  
    7. <button onclick="demo()">按钮</button>  

    attribute，用来获得标签的属性值

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <a id="aid" href="http://www.google.com">谷歌</a>  
    2. <button onclick="demo()">下次点击"谷歌时将跳转到www.wuxiaocheng.cn"</button>  
    3. <script>  
    4.     function demo(){  
    5.         document.getElementById("aid").href="http://www.wuxiaocheng.cn";  
    6.     }  
    7. </script>  

    DOM操作CSS：

    [html] view plain copy
     
     在CODE上查看代码片派生到我的代码片
    1. <!DOCTYPE html>  
    2. <html>  
    3.     <head>  
    4.         <meta charset="utf-8" />  
    5.         <title></title>  
    6.         <style >  
    7.             .c{  
    8.                 background: red;  
    9.             }  
    10.         </style>  
    11.     </head>  
    12.     <body>  
    13.     <div id="divid" class="c">Html</div>  
    14.     <button onclick="demo()">按钮</button>  
    15.         <script>  
    16.             function demo(){  
    17.                 /* 通过ID用javascript修改CSS样式*/  
    18.                 document.getElementById("divid").style.background="blue";  
    19.             }  
    20.         </script>  
    21.     </body>  
    22. </html>  
  • 相关阅读:
    【测试平台学习1】 vue使用与启动
    【Devops】 发布一个Python项目(Flask服务后端)到K8S环境
    Spring5源码分析(024)——IoC篇之bean加载：parentBeanFactory和依赖处理
    Spring5源码分析(023)——IoC篇之bean加载：从缓存中获取单例 bean
    Java基础(018)：Class.forName和ClassLoader的区别
    Spring5源码分析(022)——IoC篇之bean加载：FactoryBean的用法
    Spring5源码分析(021)——IoC篇之bean加载
    Java基础(017)：反射初探
    Java基础(015)：泛型
    Java基础(001)：关于 short i = 1; i += 1;
  • 原文地址：https://www.cnblogs.com/lidong94/p/5789642.html
Copyright © 2011-2022 走看看