javaScript-CSDN博客

本文链接：https://blog.csdn.net/m0_71185372/article/details/139709920

1.概述
JavaScript一种直译式脚本语言，用来为网页添加各式各样的动态功能

（javaScript可以操作网页内容），不需要编译可直接通过浏览器解释运

行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的

JavaScript与html,css关系：

JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的

就是增强Web客户交互。弥补了HTML的缺陷。

2.基本语法
javaScript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        /*导入外部的脚本  一旦标签中导入其他的js文件，就不能写其他脚本了，写了也没用*/
        <script src="js/text.js"></script>
        <script>
            //调用对话框库函数
            //alert("大家好");
            
            //创建函数调用对话框库中的函数
            function text(){
                alert("大家好")
            }
        </script>
    </head>
    <body>
        <input type="button" value="测试" onclick="text()"/>
    </body>
</html>

变量_数据类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            //java是强类型语言  数据类型 值
            
            /*javaScript弱类型,变量是没有类型的,你给他赋什么类型的值,它的类型就是什么
            使用var关键字声明
            */
           
        /* var a;
        a=10;//数值
        alert(a);
        a="abc";//字符串
        alert(a);
         var b;
         b=true;
         */
        
        /* 数据类型 */
        
        //1.数值类型  包含整数和浮点数
        var a=10;
        var b=10.5;
        /* alert(typeof(b));number  typeof(b)返回变量的数据类型 */
        
        //2.布尔类型
        var c=true;
        var d=false;
        /* alert(c==d);返回c与d是否相等 */
        
        //3.字符串，单引号和双引号都表示字符串
        var e="abc";
        var f='abc';
        /* alert(typeof(e));
         alert(typeof(f));  typeof(f)返回变量的数据类型 */
         
         //4.undefined类型  声明了变量，却没有赋值
         var g;
        /* alert(g==undefined);返回是否进行了赋值,赋值返回true,反之false */
        
        //5.对象类型
        var date=new Date();
        alert(date.getFullYear());
        alert(date.getMonth()+1);
        alert(date.getDate());
        </script>
    </head>
    <body>
    </body>
</html>

运算符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            /* 算术运算符 + - * % / ++ -- */
            var a="10";
            var b=5;
            var c=10;
            var d="a";
            /* alert(a+b);//字符串连接
            alert(b+c);//加法
             */
            
            /* alert(c-b);//5 减法
            alert(a-b);//5 字符串-数值=数值
            alert(c-d);//NaN : not a number */
            
            
            /* alert(b*c);//50
            alert(b*d);//NaN */
            
            /* alert(a==c);//true 等于  只比较值
            alert(a===c);//false  全等  比较值和类型 */
            
            /* if(c>b){
                alert(c);
            }*/
            
            /* for (var i = 0; i <5; i++) {
                alert(i)
            } */
        </script>
    </head>
    <body>
    </body>
</html>

函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            /* 定义函数 */
            //alert("你好");函数调用
            
            /* function test(){
                alert("你好");
            } */
            
            /* function test(a,b,c){
                alert(a+":"+b+":"+c);
            }
              test(true,"abc",new Date());
               */
            
            /* function test(a,b){
                return a+b;
            }
            var c=test(10,5);
            alert(c); */
            
            //函数调用
            //test();
            
            //在系统中的全局函数  在系统中已经定义好的,直接调用
            //alert(输入内容);返回弹窗
             var a=10.5;
             var b="10";
             var c=5;
             
            /* parseInt(a);  //把浮点数转为整数
            alert(parseInt(b)+c); //把字符串转为整数，字符串不能字母开头，只能将开头的数字部分转换 */
            
            /* parseFloat(c); 
            alert(parseFloat(c)); */
            
            /* typeof(b); //获取变量的数据类型*/
        
            /* var s="2*5*1";
            alert(eval(s));//把传进来的字符串当作js脚本执行 */
            
        </script>
    </head>
    <body>
    </body>
</html>

事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function test(){
                console.log("事件被触发了");
            }
            
        </script>
    </head>
    <body onload="test()">
        <!-- 
        onclick：鼠标点击事件时触发
        onblur：当标签失去鼠标焦点时触发
        onfocus：当标点获得鼠标焦点时触发
        onmouseover：当鼠标移入标签上时触发
        onmouseout：当鼠标从标签上移走时触发
        onload：当网页加载完毕后触发
        onchange：当内容改变，且失去鼠标焦点时触发
         -->
        
        <input type="button" value="单击事件" onclick="test()"/>
        <div onclick="test()">
            单击事件
        </div>
        <input onblur="test()"/><br />
        <input onfocus="test()"/>
        
        <div style="background-color:aqua;" onmouseover="test()" onmouseout="test()">aaaa</div>
        <input onchange="test()"/><br />
    </body>
</html>

HTML_DOM对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            /* 
            如何在javaScript中操作网页中的标签 
            javaScript认为网页中的每一个标签都是一个对象，在js中把这一类标签对象成为html dom对象
            
            如何在javaScript中获得网页中的标签对象？
            在网页加载完毕后，在js中生成一个document对象（表示整个html文档）
            里面提供了一个方法 getElementById();
            */
           
           function test(){
            var tobj1 = document.getElementById("txt1");//通过标签id获得网页中的标签对象
            var tobj2 = document.getElementById("txt2");
            tobj2.value=tobj1.value;
            tobj1.value="";
           }
        </script>
    </head>
    <body>
        <input type="text" id="txt1" value=""/>
        <input type="text" id="txt2" value=""/>
        <input type="button" onclick="test()" value="测试"/>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            /* 
            如何在javaScript中操作网页中的标签 
            javaScript认为网页中的每一个标签都是一个对象，在js中把这一类标签对象成为html dom对象
            
            如何在javaScript中获得网页中的标签对象？
            在网页加载完毕后，在js中生成一个document对象（表示整个html文档）
            里面提供了一个方法 getElementById();
            */
           
           function test(){
            var divobj1 =document.getElementById("box1");
            var divobj2 =document.getElementById("box2");
            //alert(divobj1.innerText)//获得标签体中的文本内容
            //innerHTML  可以获得标签内所有的内容（包括子标签和文本）
            //divobj2.innerText=divobj1.innerText;
            divobj2.innerHTML=divobj1.innerHTML;
            
           }
        </script>
    </head>
    <body>
        <p>qqqqq</p>
        <div id="box1"><b>html dom对象</b></div>
        <div id="box2"></div>
        <input type="button" onclick="test()" value="测试"/>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            /* 
            如何在javaScript中操作网页中的标签 
            javaScript认为网页中的每一个标签都是一个对象，在js中把这一类标签对象成为html dom对象
            
            如何在javaScript中获得网页中的标签对象？
            在网页加载完毕后，在js中生成一个document对象（表示整个html文档）
            里面提供了一个方法 getElementById();
            */
           
           function test(){
            var divobj=document.getElementById("box1");
            //通过dom对象操作标签的css属性
            divobj.style.backgroundColor='green';
            divobj.style.width='200px';
            divobj.style.height='200px';
           }
        </script>
    </head>
    <body>
        <div id="box1" style="background-color: aqua;">aaa</div>
        <input type="button" onclick="test()" value="测试"/>
    </body>
</html>