JavaScript的基础知识

最新推荐文章于 2024-06-16 16:43:26 发布
最新推荐文章于 2024-06-16 16:43:26 发布
阅读量3.8k 收藏 9
点赞数 2
分类专栏： Python的web开发 文章标签： javascript 前端 html 开发语言 python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58585940/article/details/128748501
版权

目录

一、初识JavaScript

二、JavaScript的基础

1、初步了解

 2、代码位置

 3、注释

4、变量

①字符串

②数组

③对象

④条件语句

⑤函数 

三、DOM模块

一、初识JavaScript

  • JavaScript，是一门编程语言。浏览器就是JavaScript语言的解释器。
  • DOM和BOM 相当于编程语言内置的模块。
  • JQuery 相当于是编程语言的第三方模块。
  • JavaScript让程序实现一些动态效果。

二、JavaScript的基础

1、初步了解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: gold;
            padding: 20px 10px;
        }
    </style>
</head>
<body>
<div class="menus">
    <div class="header" onclick="myFunc()">大标题</div>
    <div class="item">内容</div>
    <script type="text/javascript">
        function myFunc(){
            alert("你好呀")
            confirm("是否要继续？")
        }
    </script>
</div>
</body>
</html>

前端三大组件：

  • HTML，裸体
  • CSS，好看的衣服
  • JavaScript，动态

 2、代码位置

js代码的存在形式：

  • 当前的HTML文件中

head中：CSS代码的下面

body中：（推荐）

注意: 如果写在了head中,body的html代码不会执行,会先执行head中的javascript之后,才会显示html代码

  •  在其他js文件中，导入使用

<body>
	<script src="static/js/my.js"></script>
</body>

 3、注释

  • HTML的注释
<!-- 注释内容 -->
  • CSS的注释，style代码块
/* 注释内容 */
  • JavaScript的注释，script代码块
// 注释内容

/* 注释内容 */

4、变量

python，编程语言

name = "派大星"
print(name)

JavaScript，编程语言

定义变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
  var name = "派大星";
  console.log(name);
</script>
</body>
</html>

①字符串

//声明
var name = "派大星";
var name = String("派大星");

 常见功能

var name = "中国联通"
var v1 = name.length;           //获取字符长度
var v2 = name[0];               //获取数据
var v3 = name.trim();			//去除空白
var v4 = name.substring(0,2)	//切片, 前取后不取

 案例：跑马灯

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <div id="txt">欢迎中国联通领导莅临指导</div>

    <script type="text/javascript">

        function show() {
            //1.去HTML中找到某个标签并获取他的内容 (DOM)
            var tag = document.getElementById("txt");
            var dataString = tag.innerText;

            //2.动态起来,把文本中的第一个字符放在字符串的最后面
            var firstChar = dataString[0];
            var otherString = dataString.substring(1, dataString.length);
            var newText = otherString + firstChar;

            //3.在HTML标签中更新内容
            tag.innerText = newText;
        }

        //Javascript中的定时器
        //每秒钟执行这个show函数
        setInterval(show, 1000);    //毫秒
    </script>
</body>
</html>

②数组

//定义
var v1 = [11,22,33,44];
var v2 = Array([11,22,33,44]);

//操作
var v1 = [11,22,33,44];

v1[1]
v1[0] = "派大星"

//追加
v1.push("联通");			//尾部追加 [11,22,33,44,"联通"]
v1.unshift("联通");		//头部追加 ["联通",11,22,33,44]
v1.splice(索引,0,元素);
v1.splice(1,0,"中国");	//指定位置追加 [11,"中国",22,33,44]

//删除
v1.pop();				//尾部删除
v1.shift();				//头部删除
v1.splice(索引位置,1);
v1.splice(2,1);			//索引为 2 的元素删除 [11,22,44]



//循环
var v1 = [11,22,33,44];
//循环的是索引
for(var index in v1){
	//data=v1[index]
	...
}


for(var i=0; i<v1.length; i++){
	...
}

案例：动态数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <ul id="city">
        <!-- <li>北京</li>
        <li>天津</li>
        <li>西安</li> -->
    </ul>

    <script type="text/javascript">
        var cityList = ["北京","上海","深圳"];
        for(var idx in cityList) {
            var text = cityList[idx];

            //创建 <li></li> 标签
            var tag = document.createElement("li");
            //在 li 标签中写入内容
            tag.innerText = text;

            //添加到 id=city 那个标签的里面 DOM
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>
</html>

③对象

info = {
	"name":"派大星",
	"age":18,
}

info = {
	name:"派大星",
	age:18
}

info.age;
info.name = "海绵宝宝"

info["age"]
info["name"] = "海绵宝宝";

delete info["age"]

//循环
for(var key in info){
	//key值 data=info[key]
	...
}

案例：动态表格

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody id="body">
            <tr>
                <!-- <td>1</td>
                <td>poker</td>
                <td>25</td> -->
            </tr>
        </tbody>
    </table>

    <script type="text/javascript">

        var dataList = [
            { id: 1, name: "派大星", age: 23 },
            { id: 1, name: "派大星", age: 23 },
            { id: 1, name: "派大星", age: 23 },
            { id: 1, name: "派大星", age: 23 },
            { id: 1, name: "派大星", age: 23 },
            { id: 1, name: "派大星", age: 23 },
        ];

        for (var idx in dataList) {
            var info = dataList[idx]
            //1.创建 tr 标签
            var tr = document.createElement("tr")
            for (var key in info) {
                var text = info[key];
                //2.创建 td 标签
                var td = document.createElement("td");
                td.innerText = text;
                tr.appendChild(td);
            }
            //3. 追加数据
            var bodyTag = document.getElementById("body");
            bodyTag.appendChild(tr);
        }
    </script>
</body>
</html>

④条件语句

if (条件) {
	...
}else{
	...
}

if (条件) {
	...
else if (条件){
	...
}else{
	...
}

⑤函数 

function func(){
	...
}

//执行
func()

三、DOM模块

DOM 是一个模块,模块可以对HTML页面中的标签进行操作

//根据 ID 获取标签
var tag = doucment.getElementById("xx");

//获取标签中的文本
tag.innerText

//修改标签中的文本
tag.innerText = "111111fff";

案例：

<body>
    
    <ul id="city">
        <!-- <li>北京</li>
        <li>天津</li>
        <li>上海</li> -->
    </ul>

    <script type="text/javascript">
        var cityList = ["北京","天津","上海"];
        for(var idx in cityList) {
            var text = cityList[idx];

            //创建 <li></li> 标签
            var tag = document.createElement("li");
            //在 li 标签中写入内容
            tag.innerText = text;

            //添加到 id=city 那个标签的里面 DOM
            var parentTag = document.getElementById("city");
            parentTag.appendChild(tag);
        }
    </script>
</body>

事件的绑定 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <input type="text" placeholder="请输入内容" id="content">
    <input type="button" value="点击添加" onclick="addCityInfo()">

    <ul id="city">
    </ul>

    <script type="text/javascript">
        function addCityInfo() {
            //1.找到标签
            var userContent = document.getElementById("content");
            //2.获取input中用户输入的内容
            var newString = userContent.value;
            //判断用户输入是否为空
            if (newString.length > 0) {
                //3.创建 li 标签,传入用户输入的内容
                var newTag = document.createElement("li");
                newTag.innerText = newString;
                //4.标签添加到 ul 中
                var parentTag = document.getElementById("city");
                parentTag.appendChild(newTag);
                //5.将 input text 内容清空
                userContent.value = "";
            }else{
                alert("输入不能为空!")
            }
        }
    </script>
</body>
</html>

派大星先生c
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最新Javascript 基础知识全总结(持续更新)
weixin_66092620的博客
04-17 8267
本人目前在黑马程序员培训,现将所学的知识整理出来,希望能帮到零基础的初学者,后续会持续更新~~~ 一,JavaScript 是什么 1, JavaScript 是什么 JavaScript 是一种运行在客户端（浏览器）的编程语言，实现人机交互效果 2, 作用 网页特效 (监听用户的一些行为让网页作出对应的反馈) 表单验证 (针对表单数据的合法性进行判断) 数据交互 (获取后台的数据, 渲染到前端) 服务端编程 (node.js) 3, JavaScript的组成 E...
JavaScript基础知识
qq_43751465的博客
06-26 908
计算机基础 计算机组成 数据存储 数据存储单位 程序运行 解释型语言和编译型语言 标识符、关键字、保留字 初识JavaScript JavaScript是什么 js的作用 浏览器执行js js的组成 js输入输出语句 变量声明特殊情况 变量命名规范 变量的数据类型 简单数据类型（基本数据类型） 数字型Number 是数字返回false，不是返回true 字符串型String 获取数据变量类型 数据类型转换 转换为字符串类型 转换为数字型 布
Javascript 基础知识学习
岳来的博客
11-23 6604
javascript 基础学习
JavaScript基础知识点
qq_40046544的博客
08-06 1934
JavaScript是一门完备的动态编程语言。当应用于HTML文档时，可为网站提供动态交互特性。由布莱登布兰登·艾克发明。字面量是用于表达源代码中的一个固定值的表示法字面量有数字字面量、字符串字面量、数组字面量、对象字面量等变量是计算机中用来存储数据的容器，简单理解是一个盒子。未定义是比较特殊的类型，只有一个值undefined只声明变量未赋值的情况下，变量的默认值为undefined简介：数组是一种可以按顺序保存数据的数据类型元素：数组中保存的每一个数据都叫做数组元素下标：数组中数据的编号。...
javascript基础知识
04-03
js基础知识和知识点代码练习。学习javascript基础知识的代码笔记。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 550
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1264
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
vue格网图
南北粉面馆
06-16 140
【代码】vue格网图。
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 279
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
？和？？的用法 ---Javascript
weixin_45705239的博客
06-13 196
当你在JavaScript中看到问号（?）和双问号（??）时，它们通常是用于条件处理和空值合并的操作符。
react-day1
最新发布
Jason_yuxuan的博客
06-16 78
react是由Meta公司开发，是一个用于构建web和原生交互界面的库。1.入口文件：index.js。2.根组件：App.js。
使用nodejs/exceljs读取、操作、写入excel文件
qiuzen的博客
06-12 326
【代码】使用nodejs/exceljs读取、操作、写入excel文件。
Python私教张大鹏 Vue3整合AntDesignVue之Menu 导航菜单
Python私教
06-11 505
何时使用 导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。 更多布局和导航的使用可以参考：通用布局。 开发者注意事项 Menu 元素为 ul，因而仅支持 li 以及 script-supporting 子元素。因而你的子节点元素应该都在 Menu.Item 内使用。 Menu 需要计算节点结构，因而其子元素仅支持 Menu.* 以及对此进行封装的 HOC 组件。 必须为 SubMenu 设置唯
07_第七章 前端工程化
weixin_65644655的博客
06-13 763
第七章 前端工程化 一、前端工程化开篇 1.1 什么是前端工程化 前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。 1.2 前端工程化实现技术栈 前端工程化实现的技术栈有很多,我们采用ES6+nodejs+npm+Vite+VUE3+router+pinia+axios+Element-plus组合来实现 ECMAScript6 VUE3中大量使用ES6语法 Nodejs 前端
vue-router的导入和使用
codemami的博客
06-11 491
在你的 Vue 组件中，你可以使用 <router-link> 来创建链接，当用户点击这些链接时，视图会自动更新为对应路由所映射的组件。现在，当你点击 "Home" 或 "About" 链接时，<router-view> 的内容会自动更新为对应的组件。在你的主文件（通常是 main.js 或 main.ts）中，你需要导入 Vue 和 vue-router。然后，你可以使用 routes 配置来创建一个 router 实例，并将其传递给 Vue 的根实例。接着，你需要定义你的路由。
如何在CSS中添加自定义属性
ggq53219的博客
06-14 206
你还可以在JavaScript中读取和修改自定义属性。这些属性将作为CSSStyleDeclaration对象上的属性被暴露出来，但它们的名称不包含。注意，当你使用JavaScript修改自定义属性时，这些变化将立即反映到任何使用了这些属性的CSS规则上，因为CSS变量是动态的。在CSS中，你可以使用自定义属性（也称为CSS变量）来定义可以在整个文档中重用的值。如果引用的属性不存在或无效，你可以提供一个回退值（fallback value）。）或任何其他的CSS选择器内部定义自定义属性。
[next.js]移动端调试vconsole
ZhuAiQuan的博客
06-11 330
直接在这个layout的useEffect里加载vconsole (这里只会在开发环境里启用vconsole，基于webpack/turbopack的tree shake功能，在正式环境是不会把vconsole打包进来的) 然后使用import导入三方库并初始化。新建一个tsx文件，在这个tsx组件的useEffect里复制上面的代码（这里也是为了防止正式环境把vconsole打包进去），然后在入口的layouts里使用dynamic动态导入这个组件并挂载到页面上；先安装vconsole。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值