js基础1

最新推荐文章于 2025-02-18 17:52:54 发布

原创最新推荐文章于 2025-02-18 17:52:54 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js

js 专栏收录该内容

4 篇文章

订阅专栏

这篇博客介绍了JavaScript的基础知识，包括两种嵌入JS的方式——HTML内嵌和外部引入，重点讲解了变量的弱类型特性以及预加载的概念。讨论了函数的预先加载和变量预加载的差异，并强调了在涉及HTML元素时使用window.onload的必要性。此外，还涵盖了获取页面元素、操作CSS类、修改标签属性、处理函数参数、返回值和条件语句等内容，适合JavaScript初学者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

pycharm 创建
a.html b.js

js的代码写在标签里面：

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		pass
	</script>
</head>

两种嵌入方式

1.html内嵌js

    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script>
        function f1(a){
                alert(a);
        }

        f1("hello world!!");

    </script>

</head>
<body>

2.外部引入js

1创建js文件夹，
2文件夹创建test.js
里面写入
alert("这是一个外部js文件，需要导入")
3
html文件里面写入

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="./css/test.js">
    </script>

</head>
<body>

变量：弱类型

基本类型 5种
整形，浮点，布尔，未定义undifne，null


    <script >

        function f1(c){
            var a = 32,b = "str";
            alert(a);
            alert(b);
            alert(c);
        }

        f1(24);
    </script>

创建的时候没有赋值，自动定义为undifne

    <script >

        function f1(){
            var c;
            alert(c);
        }
        f1();
    </script>

预加载：

1 函数可以预先加载，（先调用函数，后定义函数）

2 变量预加载，只是先赋值undefined （先调用变量，在赋值，输出结果是undefine）


    <script >
        f1(a);
        function f1(b){
            alert(b);
        }
        var a = "hello";
    </script>

3 js函数涉及到后续的html静态标签，需要预先加载页面，函数放入onload里面

        window.onload = function(){

            pass

        }

获取页面元素

（先执行js，后加载html静态页面。所以js函数里面涉及到后续的静态页面的控件，标签需要 windows.onload）

    <script >
        // js涉及到后续的静态标签 ，需要预加载
        window.onload = function (){

            var element = document.getElementById('div1');
            element.style.color = 'blue';
            element.style.fontSize = '77px';

        }


    </script>

</head>
<body>
<div  style="font-size: 32px; color:red;" id="div1"> 需要js选定</div>

标签直接内嵌入添加css

<div style="font-size: 44px; color: deeppink;" id= "di1">内嵌入css</div>

css类选择器


    <style>
    
    .box1{

        font: bolder;
        color: greenyellow;

    }
    
    </style>

</head>
<body>
    
<div class="box1">类选择器</div>

js操作标签的属性

xxx.style.某个属性的名称 = "22px";

js操作标签的属性

    <script>
    // 预加载
    window.onload = function(){
        //获取
        var div1 = document.getElementById('d1');
        var div2 = document.getElementById('d2');

        div1.className = "box2";  //类名打上引号
        div2.className = "box2";
        div1.style.fontSize = "66px";
        div2.style.fontSize = "88px";
    }
    
    </script>

    <style>
    .box1{
        color:pink;
    }
    .box2{

        color: red;
    }
    </style>


</head>
<body>
    
<div class="box1" id="d1">div1</div>
<div class="box1" id="d2">div2</div>

获取标签的文本。修改标签文本

    <script>
    // 预加载
    window.onload = function(){
        var div1 = document.getElementById('d1');

        var text = div1.innerHTML; //获取标签文本
        alert(text);

        div1.innerHTML = "修改文本";

    }
    
    </script>


</head>
<body>

<div id="d1"> 这是div标签</div>

熟悉函数

点击按钮，文本字体颜色变化

    <script>
    // 预加载
    window.onload = function(){
        var d1 = document.getElementById('d1');
        var bt1 = document.getElementById('bt1');

        bt1.onclick = function(){       //点击标签 执行函数

            d1.style.fontSize = "88px";
            d1.style.color = "red";

        }

    }
    
    </script>


</head>
<body>

<button id="bt1">文字变色</button>
<div id="d1">哈哈哈哈O(∩_∩)O哈哈~</div>

引入外部css


    <link rel="stylesheet" href="css文件地址"  type="text/css">

换肤

 <link rel="stylesheet" href="css/red.css"  id ='link1'> 

    <script> 
        window.onload = function(){

            var bt1 = document.getElementById('bt1');
            bt1.onclick = function(){
                    //点击后执行 
                    var back = document.getElementById('link1');
                    back.href = "css/blue.css";

            }

        }
        
    </script>

</head>
<body>


<button id="bt1" >变化</button>

函数传参：

    <script>

        window.onload = function(){

            function f2(mystyle,value){
                get_d1 = document.getElementById('div1');
                get_d1.style[mystyle] = value;
            }
            f2("fontSize","39px");
            f2("color","red");
            
        }

    </script>

</head>
<body>

<div id="div1"> 需要改变字体</div>

    <script>

        function f1(a){

            alert(a);
        }
        f1("参数123");

return的使用


        function f3(a,b){

            var c = a+b;
            return c;
        }
        d = f3(5,2);
        alert(d);

条件语句

点击按钮隐藏div的块

    <script>
    
        window.onload = function(){
            var bt1 = document.getElementById('bt1');
            var div1  = document.getElementById('div1');

            bt1.onclick = function(){

                if(div1.style.display=='none'){
                    div1.style.display='block';
                }
                else{
                    div1.style.display ='none';
                }
            }
        }
    </script>
    <style>
    
    .box1{
        display: none;
        width: 55px;
        height: 99px;
        background-color: brown;
    }
    
    </style>
</head>
<body>
<button id="bt1">按动</button>
<div id="div1" class="box1"></div>

小案例

网页上输入框输入数字后弹出相加结果。


    <script>
        window.onload = function(){
            var i1 =document.getElementById('i1');
            var i2 =document.getElementById('i2');
            var bt = document.getElementById('bt');
            //点击后执行
            bt.onclick = function(){

                i1  = parseInt(i1.value);  // 强制类型转化
                i2 = parseInt(i2.value);
                c = i1+ i2;
                alert(c);
            }
        }
    </script>
</head>
<input type="text"  id="i1" maxlength="32">
+ <input type="text" id="i2" maxlength="32">
<input type="button" value="相加" id='bt'>