JS 基础学习

最新推荐文章于 2024-09-12 16:05:15 发布

小菜的OnePiece

最新推荐文章于 2024-09-12 16:05:15 发布

阅读量101

点赞数

分类专栏：前端基础文章标签： javascript js css html5 dom

本文链接：https://blog.csdn.net/woshihaizeiwang/article/details/118604913

版权

前端基础专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了JavaScript的基础知识，包括内置函数如警告框、提示框和控制台的使用，以及未定义类型和空对象的特性。还详细阐述了DOM的概念，如何通过DOM操作页面元素，以及如何通过value和innerHTML属性操作文本。最后，展示了如何为标签绑定单击事件改变文本大小的实例。

摘要由CSDN通过智能技术生成

1. JavaScript

概述：JS 写在双闭合标签里面，JS 放置在html文件中，可以放置在任何位置(一般放置在代码最底部)。

2. JS 内置功能函数的使用

2.1 警告框

<script>
    alert("hello world")
</script>

2.2 提示框（prompt)

<script>
    prompt("我是海贼王");
    prompt("我是海贼王","路飞");
    
</script>

2.3 控制台的使用

<script>
    console.log("我是在控制台打印的东西，你看不见我")
    console.log(12306)
</script>

3.JS 未定义类型参数

js中未定义的类型是undefined ,也可以参与数学运算，其值为NaN 。一般计算不出结果的时候，就返回数字NaN(not a number)
所有的数字与NaN 进行数学运算结果当否是NaN

4.空对象(Null)运算

空对象也是有数值的，它的数值是0

5. 字符串

概述：字符串也可以参与数学运算

除了 + 运算符外，其他的运算符运算的时候都会将字符串隐式的转换为数字

6.认识DOM

问题：JS的组成？

ECMAScript:欧洲计算机协会大概每年6月中旬定制语法规则
DOM（document object model)：文档对象模型
BOM (Browser object model):浏览器对象模型

6.1 节点树

节点【element】即是标签
DOM 其实就是内置document对象
DOM 常常用来操作各种标签

6.2 操作标签文本

概述：我们可以通过document对象获取到节点树上的任意节点，除此之外，获取节点通常操作节点中的文本

如果是表单元素，需要通过value属性操作文本
如果是非表单元素，则需要通过innerHTML属性操作文本

<script>
    // console.log(document)
    // console.log(document.head)
    // console.log(document.body)
    // console.log(document.documentElement)
    console.log(document.getElementById("lufei"))
    //操作表单文本，用value属性
    //1.获取表单元素
    var inputDocument = document.getElementById("cur");
    //2. 获取表单元素文本
    console.log(inputDocument.value);
    inputDocument.value ="我是要当海贼王的男人"

    var baidu = document.getElementById("baidu");
    //3.获取非表单元素的文本
    console.log("获取到的非表单元素的文本："+baidu.innerHTML)
    baidu.innerHTML = "修改后的非表单元素文本"
 
    console.log("获取表单元素的值"+inputDocument.value)
</script>

6.3 事件

单击事件：可以给任意标签绑定单击事件

案例:点击box 其中的字体慢慢变大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件测试</title>
    <style>
        * {
           margin: 0px;
           padding: 0px;
        }
        #box {
            width: 200px;
            height: 200px;
            background-color: red;
            text-align: center;
            color: aqua;
            line-height: 100px;
        
        }
    </style>
</head>
<body>
    <div id="box">文字</div>
</body>
</html>

<script>
    var div = document.getElementById("box");
    var fontSize = 16;
    div.onclick = function(){
        console.log("我执行了");
        fontSize ++;
        changeTextSize(fontSize,div);
        
    }

    function changeTextSize(fontSize,div){
        div.style.fontSize = fontSize + "px";
    }
</script>