• JavaScript

    一、什么是JavaScript

    二、JS的引入方式

    1.内部脚本

    2.外部脚本

     3.代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7.    
    8. head>
    9. <body>
    11.     
    12.     <script src="JS/JS.demo.js">script>
    13. body>
    14. html>

    三、JS基础语法

    1.书写语法

    2.输出语句

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         // 方式一：弹出警告框
    11.         window.alert("Hello JS")
    12.         // 方式二：写入html 页面中
    13.         document.write("Hello JS")
    14.         // 方式三：控制台输出
    15.         console.log("Hello JS")
    16.  
    17.     script>
    18. body>
    19. html>

    3. 变量定义

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     
    10.     <script>
    11.         // 变量定义
    12.         // var a=13
    13.         // alert(a)
    14.         // a="张三"
    15.         // alert(a)
    16.         // 特点1：作用域比较大，全局变量
    17.         // 特点2：可以重复定义
    18.         // {
    19.         //     var x=666
    20.         //     var x=777
    21.  
    22.         // }
    23.         // alert(x)
    24.         //let:定义局部变量,代码块外无效
    25.         // {
    26.         //     let a=66;//不能重复定义
    27.         //     alert(a);   
    28.         // }
    29.         // const:常量不能被改变 ，否则会报错
    30.         const pi=3.14;
    31.         alert(pi);
    32.     script>
    33. body>
    34. html>

    4.数据类型，运算符，流程控制语句

    1.数据类型

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         alert(typeof 3.14);//number
    11.         alert(typeof 3);//number
    12.         alert(typeof "A");//String
    13.         alert(typeof "Hello");//String
    14.         alert(typeof true);//boolean
    15.         alert(typeof false);//boolean  
    16.         alert(typeof null);//object
    17.         var a;
    18.         alert(typeof a);//undefined
    19.     script>
    20. body>
    21. html>

    2.运算符

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.         // alert(typeof 3.14);//number
    11.         // alert(typeof 3);//number
    12.         // alert(typeof "A");//String
    13.         // alert(typeof "Hello");//String
    14.         // alert(typeof true);//boolean
    15.         // alert(typeof false);//boolean  
    16.         // alert(typeof null);//object
    17.         // var a;
    18.         // alert(typeof a);//undefined
    19.         // 类型转换：其他类型转换为数字类型
    20.         // alert(parseInt ("12"))//12
    21.         // alert(parseInt ("12A12"))//12
    22.         // alert(parseInt ("A45"))//NaN(not a number)
    23.         //类型转换：数字类型转换为boolean类型
    24.         // if(0){//false
    25.         //     alert("0转换为false")
    26.         // }
    27.         // if(NaN){//false
    28.         //     alert("NaN转换为false")
    29.         // }
    30.         // if(-1){//true
    31.         //     alert("初0和NaN其他数字转为True")
    32.         // }
    33.          //类型转换：字符串类型转换为boolean类型
    34.          if(""){
    35.             alert("空字符串为false，其他都是true")
    36.          }
    37.          if(null){
    38.             alert("null转换为false")
    39.          }
    40.          if(undefined){
    41.             alert("undefined转换为false")
    42.          }
    43.         
    44.     script>
    45. body>
    46. html>

    3.流程控制语句

     四、JS函数

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10. //定义函数 方式：1
    11. // function add(a,b){
    12. //     return a+b;
    13. // }
    14. //定义函数 方式：2
    15. var add=function (a,b){
    16.     return a+b;
    17. }
    18. //函数调用
    19. var result=add(10,20);
    20. alert(result);
    21.  
    22.  
    23.     script>
    24. body>
    25. html>

    五、JS中的对象

    1.Array数组

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10. //定义数组方式1
    11. // var arr=new Array(1,2,3,4);
    12. //定义数组方式2
    13. // var arr =[1,2,3,4]
    14. // console.log(arr[0]);
    15. // console.log(arr[1]);
    16. //特点 ：长度可变 类型可变
    17. // var arr =[1,2,3,4]
    18. // arr[10]=50;
    19. // console.log(arr[10]);
    20. // console.log(arr[9]);//undefined
    21. // console.log(arr[8]);//undefined
    22. // arr[9]="A";
    23. // arr[8]=true;
    24. // console.log(arr);
    25. var arr =[1,2,3,4]
    26. // arr[10]=100;
    27. // for (let i = 0; i < arr.length; i++) {
    28. //     console.log(arr[i]);
    29.     
    30. // }
    31. // console.log("====================================");
    32. // //forEach 遍历数组中有值的元素
    33. // arr.forEach(function (e) {
    34. //     console.log(e);
    35. // })
    36. // //箭头函数（...）=>{...}简化
    37. // arr.forEach( (e)=> {
    38. //     console.log(e);
    39. // })
    40. arr.push(7,8,9);
    41. // console.log(arr);
    42. arr.splice(2,2);
    43. console.log(arr);
    44.  
    45.  
    46.     script> 
    47. body>
    48. html>

    2.String对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script> 
    10.     //创建字符串对象
    11.     // var str=new String("Hello String");
    12.     var str=" Hello String ";
    13.     console.log(str);
    14.     //length
    15.     console.log(str.length);
    16.     //charAt
    17.     console.log(str.charAt(3));
    18.     console.log(str.charAt(4));
    19.     //indexof
    20.     console.log(str.indexOf("lo"));
    21.     //trim
    22.  var s=str.trim()
    23.  console.log(s);
    24.     //substring(start,end)---开始索引，结束索引（含头不含尾）
    25.     console.log(s.substring(0,5));
    26.     
    27.     
    28.     script>
    29. body>
    30. html>

    3.JSON对象

    1.自定义对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.     //自定义对象
    11.     var user={
    12.         name:"Tom",
    13.         age:10,
    14.         gender:"male",
    15.         // eat: function(){
    16.         //     alert("用膳");
    17.         // }
    18.         eat(){
    19.             alert("用膳");
    20.         }
    21.     }
    22.     alert(user.name);
    23.     user.eat();
    24.     script>
    25. body>
    26. html>

    2.JSON对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.     // //自定义对象
    11.     // var user={
    12.     //     name:"Tom",
    13.     //     age:10,
    14.     //     gender:"male",
    15.     //     // eat: function(){
    16.     //     //     alert("用膳");
    17.     //     // }
    18.     //     eat(){
    19.     //         alert("用膳");
    20.     //     }
    21.     // }
    22.     // alert(user.name);
    23.     // user.eat();
    24.     //定义JSON
    25.     var jsonstr='{"name":"Tom","age":18,"addr":["北京","上海","西安"]}';
    26.     alert(jsonstr);
    27.     //json字符串--js对象
    28.    var s =JSON.parse(jsonstr);
    29.    alert(s.name);
    30.     //js对象 ---字符串
    31.     var str=JSON.stringify(s);
    32.     alert(str);
    33.     script>
    34. body>
    35. html>

    4.BOM对象

    1.浏览窗口对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.     //获取
    11.     // window.alert("hello BOM");   
    12.     // alert("BOM");    
    13.     //方法  
    14.     //confirm -对话框-确认：true,取消：false  
    15. //  var flag=confirm("您却仍删除该记录吗?");     
    16. //  alert(flag);
    17. // 定时器 -setInterval--周期性的执行某一个函数
    18. // var i=0;
    19. // setInterval(function(){
    20. //     i++;
    21. //     console.log("定时器执行了"+i+"次");
    22. // },2000);
    23. //定时器-setTimeout --延迟指定时间执行一次
    24. setTimeout(function(){
    25.     alert("JS")
    26. },3000);
    27.  
    28.  
    29.  
    30.  
    31.     script>
    32. body>
    33. html>

    2.地址栏对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <script>
    10.     //获取
    11.     // window.alert("hello BOM");   
    12.     // alert("BOM");    
    13.     //方法  
    14.     //confirm -对话框-确认：true,取消：false  
    15. //  var flag=confirm("您却仍删除该记录吗?");     
    16. //  alert(flag);
    17. // 定时器 -setInterval--周期性的执行某一个函数
    18. // var i=0;
    19. // setInterval(function(){
    20. //     i++;
    21. //     console.log("定时器执行了"+i+"次");
    22. // },2000);
    23. //定时器-setTimeout --延迟指定时间执行一次
    24. // setTimeout(function(){
    25. //     alert("JS")
    26. // },3000);
    27. //location
    28.  
    29. alert(location.href);
    30. location.href="https://www.baidu.com";//跳转到百度
    31.  
    32.  
    33.  
    34.  
    35.     script>
    36. body>
    37. html>

    5.DOM对象

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>JS-对象-DOM演示title>
    8. head>
    9.  
    10. <body>
    11.     <div style="font-size: 30px; text-align: center;" id="tb1">课程表div>
    12.     <table width="800px" border="1" cellspacing="0" align="center">
    13.         <tr>
    14.             <th>学号th>
    15.             <th>姓名th>
    16.             <th>分数th>
    17.             <th>评语th>
    18.         tr>
    19.         <tr align="center" class="data">
    20.             <td>001td>
    21.             <td>张三td>
    22.             <td>90td>
    23.             <td>很优秀td>
    24.         tr>
    25.         <tr align="center" class="data">
    26.             <td>002td>
    27.             <td>李四td>
    28.             <td>92td>
    29.             <td>优秀td>
    30.         tr>
    31.         <tr align="center" class="data">
    32.             <td>003td>
    33.             <td>王五td>
    34.             <td>83td>
    35.             <td>很努力,不错td>
    36.         tr>
    37.         <tr align="center" class="data">
    38.             <td>004td>
    39.             <td>赵六td>
    40.             <td>98td>
    41.             <td>666td>
    42.         tr>
    43.     table>
    44.     <br>
    45.     <div style="text-align: center;">
    46.         <input id="b1" type="button" value="改变标题内容" onclick="fn1()">
    47.         <input id="b2" type="button" value="改变标题颜色" onclick="fn2()">
    48.         <input id="b3" type="button" value="删除最后一个" onclick="fn3()">
    49.     div>
    50. body>
    51.  
    52. <script>
    53.     function fn1(){
    54.         document.getElementById('tb1').innerHTML="学员成绩表";
    55.     }
    56.     
    57.     function fn2(){
    58.         document.getElementById('tb1').style="font-size: 30px; text-align: center; color: red;"
    59.     }
    60.  
    61.     function fn3(){
    62.        var trs = document.getElementsByClassName('data');
    63.        trs[trs.length-1].remove();
    64.     }
    65. script>
    66.  
    67. html>

    1.使用DOM获取元素

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <img src="img/off.gif" id="h1"><br><br>
    10.     <div class="cls">船只教育div><br>
    11.     <div class="cls">黑马程序员div><br>
    12.     <input type="checkbox" name="hobby">电影
    13.     <input type="checkbox" name="hobby">旅游
    14.     <input type="checkbox" name="hobby">游戏
    15.  <script>
    16. //1.获取Element元素
    17. //1.1获取元素-根据ID获取
    18. // var img=document.getElementById("h1");
    19. // alert(img);
    20. //1.2获取元素-根据标签获取-div
    21. // var divs =document.getElementsByTagName("div")
    22. // for (let i = 0; i < divs.length; i++) {
    23. //    alert(divs[i]);
    24.     
    25. // }
    26. //1.3获取元素-根据name属性获取
    27. // var ins =document.getElementsByName("hobby");
    28. // for (let i = 0; i < ins.length; i++) {
    29. //     alert(ins[i]);   
    30. // }
    31.  
    32. //1.4获取元素-根据class属性获取
    33. // var divs= document.getElementsByClassName("cls");
    34. // for (let i = 0; i < divs.length; i++) {
    35. //     alert(divs[i]);
    36.     
    37. // }
    38. //2查询参考手册，属性方法
    39. var divs= document.getElementsByClassName("cls");
    40. var d1=divs[0];
    41. d1.innerHTML="我真服辣666";
    42.  
    43.  script>   
    44.     
    45. body>
    46. html>

    2.案例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <img src="img/off.gif" id="h1"><br><br>
    10.     <div class="cls">传智教育div><br>
    11.     <div class="cls">黑马程序员div><br>
    12.     <input type="checkbox" name="hobby">电影
    13.     <input type="checkbox" name="hobby">旅游
    14.     <input type="checkbox" name="hobby">游戏
    15.     <font color="red"> font>
    16. body>
    17. <script>
    18. //1.点亮灯泡：src 属性值
    19. var img =document.getElementById("h1");
    20. img.src="img/on.gif";
    21. //2.将所有div标签的内容加上：very good（红色字体）
    22. var divs=document.getElementsByTagName("div");
    23. for (let i = 0; i < divs.length; i++) {
    24.     const div = divs[i];
    25.     div.innerHTML+="very good ";
    26.     
    27. }
    28. //3.使所有复选框呈现选中状态
    29. var hobbys =document.getElementsByName('hobby');
    30. for (let i = 0; i < hobbys.length; i++) {
    31.     const hobby = hobbys[i];
    32.     hobby.checked=true;
    33.     
    34. }
    35. script>
    36. html>

    查阅：w3school 在线教程

    六、JS事件监听

    1.事件绑定

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    10.     <input type="button" id="btn2" value="事件绑定2">
    11.     
    12. body>
    13. <script>
    14.     function on() {
    15.         alert("按钮1被点击了...");
    16.     }
    17.     document.getElementById('btn2').onclick=function(){
    18.         alert("按钮2被点击了...");
    19.     }
    20. script>
    21. html>

    2.常见的事件

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>JS-事件-常见事件title>
    8. head>
    9.  
    10. <body onload="load()">
    11.  
    12.     <form action="" style="text-align: center;" onsubmit="subfn()">
    13.         <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">
    14.         
    15.         <input id="b1" type="submit" value="提交">
    16.  
    17.         <input id="b1" type="button" value="单击事件" onclick="fn1()">
    18.     form>  
    19.  
    20.     <br><br><br>
    21.  
    22.     <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
    23.         <tr>
    24.             <th>学号th>
    25.             <th>姓名th>
    26.             <th>分数th>
    27.             <th>评语th>
    28.         tr>
    29.         <tr align="center">
    30.             <td>001td>
    31.             <td>张三td>
    32.             <td>90td>
    33.             <td>很优秀td>
    34.         tr>
    35.         <tr align="center">
    36.             <td>002td>
    37.             <td>李四td>
    38.             <td>92td>
    39.             <td>优秀td>
    40.         tr>
    41.     table>
    42.  
    43. body>
    44.  
    45. <script>
    46.     //onload : 页面/元素加载完成后触发
    47.     function load(){
    48.         console.log("页面加载完成...")
    49.     }
    50.  
    51.     //onclick: 鼠标点击事件
    52.     function fn1(){
    53.         console.log("我被点击了...");
    54.     }
    55.  
    56.     //onblur: 失去焦点事件
    57.     function bfn(){
    58.         console.log("失去焦点...");
    59.     }
    60.  
    61.     //onfocus: 元素获得焦点
    62.     function ffn(){
    63.         console.log("获得焦点...");
    64.     }
    65.  
    66.     //onkeydown: 某个键盘的键被按下
    67.     function kfn(){
    68.         console.log("键盘被按下了...");
    69.     }
    70.  
    71.     //onmouseover: 鼠标移动到元素之上
    72.     function over(){
    73.         console.log("鼠标移入了...")
    74.     }
    75.  
    76.     //onmouseout: 鼠标移出某元素
    77.     function out(){
    78.         console.log("鼠标移出了...")
    79.     }
    80.  
    81.     //onsubmit: 提交表单事件
    82.     function subfn(){
    83.         alert("表单被提交了...");
    84.     }
    85.  
    86. script>
    87. html>

    3.案例

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>JS-事件-案例title>
    8. head>
    9. <body>
    10.  
    11.     <img id="light" src="img/off.gif"> <br>
    12.  
    13.     <input type="button" value="点亮"  onclick="on()"> 
    14.     <input type="button"  value="熄灭" onclick="off()">
    15.  
    16.     <br> <br>
    17.  
    18.     <input type="text" id="name" value="ITCAST" onblur="upper()" onfocus="lower()" >
    19.     <br> <br>
    20.  
    21.     <input type="checkbox" name="hobby"> 电影
    22.     <input type="checkbox" name="hobby"> 旅游
    23.     <input type="checkbox" name="hobby"> 游戏
    24.     <br>
    25.  
    26.     <input type="button" value="全选" onclick="checkAll()"> 
    27.     <input type="button" value="反选" onclick="reverse()" >
    28.  
    29. body>
    30.  
    31. <script>
    32.  
    33.     //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; 
    34.  function on(){
    35.  var light= document.getElementById('light');
    36.  light.src="img/on.gif";
    37.  }  
    38.   function off(){
    39.     var light= document.getElementById('light');
    40.     light.src="img/off.gif";
    41.   }
    42.  
    43.     //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; 
    44.    function lower(){
    45.  var name=document.getElementById('name');
    46.  name.value=name.value.toLowerCase();
    47.    } 
    48.    function upper(){
    49.     var name=document.getElementById('name');
    50.     name.value=name.value.toUpperCase();
    51.  
    52.    }
    53.  
    54.  
    55.  
    56.     //3. 点击 "全选" 按钮使所有的复选框呈现选中状态 ; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态 ; -- onclick
    57.     function checkAll(){
    58.         var hobbys=document.getElementsByName('hobby');
    59.         for (let i = 0; i < hobbys.length; i++) {
    60.             const element = hobbys[i];
    61.             element.checked=true;
    62.             
    63.         }
    64.         
    65.     }
    66.     function reverse(){
    67.         var hobbys=document.getElementsByName('hobby');
    68.         for (let i = 0; i < hobbys.length; i++) {
    69.             const element = hobbys[i];
    70.             element.checked=false;
    71.     }
    72. }
    73.  
    74.  
    75.  
    76. script>
    77. html>

  • 相关阅读:
    48、Nio（Io模型（异步（异步和同步）））
    WEB漏洞原理之---【组件安全】
    基于复合粒子群优化的模糊神经预测控制的研究（Matlab代码实现）
    基于C++11的数据库连接池（推荐）
    R3LIVE代码详解（三）
    【Linux学习笔记】调试工具gdb
    【Python】Pandas数据处理教程
    02 Infini-gateway部署实战+ES热备测试
    Docker安装Python3教程
    在 Elasticsearch 中实现自动完成功能 1：Prefix queries
  • 原文地址：https://blog.csdn.net/m0_64703222/article/details/133241817