JavaScript基础学习

最新推荐文章于 2024-08-07 19:32:42 发布
最新推荐文章于 2024-08-07 19:32:42 发布
阅读量161 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45439324/article/details/100544916
版权

JavaScript基础知识

1.JavaScript的介绍

JavaSript 的定义和作用：

​ JavaSript是运行在浏览器的脚本语言，是由浏览器解释器执行的，简称js，它能够让网页和用户有交互功能，增加良好的用户体验效果。

前端开发三大块：

​ 1.html：负责网页结构

​ 2.CSS：负责网页样式

​ 3.JavaScript：负责网页行为

2.JavaScript的使用方式

​ 1.行内式（主要用于事件）

​ 2.内嵌式

​ 3.外链式

<!DOCTYPE html>
<html lang="en">
<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>
        alert("2.内嵌式")
    </script>
    <!-- 外链式 -->
    <script src="./main.js"></script>
</head>
<body>
    <!-- 行内式 -->
    <input type="button" value="按钮" onclick="alert('1.行内式')">
</body>
</html>
3.变量定义和数据类型

JavaScript是一种弱类型语言，也就是说不需要指定变量的类型；

JavaScript的变量类型由它的值来决定，定义变量需要关键字"var"，一条JavaScript语句应该以“；”结尾；

弱类型语言：JavaScript

data = 10 整型

data = “xlz” 字符串

强类型语言：C，java

int data = 10

str data = “xlz”

语法格式：var 变量名 = 值；

JavaScript 注释:

JavaScript的注释分为单行注释(//注释内容)和多行注释(/多行注释/)

数据类型：(五种基本类型，一种复合类型)
5种基本数据类型：

1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：

​ object 后面学习的JavaScript对象属于复合类型

<!DOCTYPE html>
<html lang="en">
<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>
        // 1、number 数字类型
        var iNum = 10;
        // 获取变量类型typof
        alert(typeof(iNum))
        // 获取变量值
        alert(iNum)
        // string 字符串类型
        var fNum = 10.1;
        // 获取变量类型typof
        alert(typeof(fNum))
        // 获取变量值
        alert(fNum)
        // 字符串类型
        var sName = "xlz"
        // 获取变量类型typof
        alert(typeof(sName))
        // 获取变量值
        alert(sName)
        // boolean 布尔类型 true 或 false
        var bIsTrue = true;
        // 获取变量类型typof
        alert(typeof(bIsTrue))
        // 获取变量值
        alert(bIsTrue)
        // undefined undefined类型，变量声明未初始化，它的值就是undefined
        var unData;
        // 获取变量类型typof
        alert(typeof(unData))
        // 获取变量值
        alert(unData)
        // null null类型，表示空对象，如果定义的变量将来准备保存对象
        var nullData = null;
        // 获取变量类型typof
        alert(typeof(nullData))
        // 获取变量值
        alert(nullData)
        // 复合类型，JavaScript对象属
        var oPenson = {
            name :"xlz",
            age : 18,
        }
        var type = typeof(oPenson)
        // 获取变量类型typof
        alert(type)
        // 获取变量值
        alert(oPenson.name)
        alert(oPenson.age)
    </script>
</head>
<body>
</body>
</html>
变量命名规则：

1.区分大小写；

2.第一个字符必须是字母、下划线（_）或者美元符号（$）

3.其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格：

​ 对象o Object 比如：oDiv

​ 数组a Array 比如：aItems

​ 字符串s String 比如：sUserName

​ 整数i Integer 比如：iItemCount

​ 布尔值b Boolean 比如：bIsComplete

​ 浮点数f Float 比如：fPrice

​ 函数fn Function 比如：fnHandler

4.函数的定义和调用

js中的函数：函数可以重复使用代码块，使用关键字function定义函数；

定义有参数有返回值的函数（和python一样）

<!DOCTYPE html>
<html lang="en">
<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>
        // 定义函数
        function fnShow(){
            alert("这是一个函数");
        }
        // 函数调用、
        fnShow();

        // 定义一个有参数有返回值的函数
        function fnSum(iNum1, iNum2){
            var iResult = iNum1 + iNum2;
            // ++ 等价于 +=
            iResult++;
            return iResult;
        }
        // 调用函数
        var iNum = fnSum(4, 6);
        alert(iNum);
    </script>
</head>
<body>
</body>
</html>
5.变量的作用域

局部变量：函数内部定义的变量，只能在函数内部使用；

全局变量：在函数外部定义的变量，可以在不同函数内使用和修改；

<!DOCTYPE html>
<html lang="en">
<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>
        // 局部变量
        // function fnShow1(){
        //     var iNum1 = 18;
        //     alert(iNum1);
        // }
        // // 调用函数
        // fnShow1();
        // 局部变量不能在外部使用，没有结果显示
        // alert(iNum1);
        // 全局变量
        var iNum2 = 10;
        alert(iNum2);
        function fnShow2(){
            // js中字符串类型可以和数字类型直接进行相加
            // 数字会自动转化为字符串类型
            alert("全局变量：" + iNum2);
            // ++ 等价于 += 1
            iNum2++;
        }
        // 调用函数
        fnShow2();
        // 函数内部可以修改全局变量
        alert(iNum2);
    </script>
</head>
<body>
</body>
</html>
6.条件语句

条件语句就是通过条件来控制程序的走向；

语法和python十分相似

  1. if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
  2. if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
  3. if…else if…else 语句 - 使用该语句来判断多条件，执行条件成立的语句

区别：判断多条件用if…else if …else

比较运算符：
==：等于（值）
===:全等于(值和类型)
!=:不等于
>：大于
<：小于
>=：大于等于
<=：小于等于
逻辑运算符：
&& and 与
|| or 或
! not 非

<!DOCTYPE html>
<html lang="en">
<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>
        // if 语句 ==
        var iNum = 10;
        var sStr = "10";
        if (iNum == sStr){
            alert("条件成立");
        }
        // // ===
        var iNum = 10;
        var sStr = "10";
        if (iNum === sStr){
            alert("条件成立");
        }
        else{
            alert("条件不成立")
        }
        // if...else if...else语句
        var iScore = 50;
        if (iScore > 60){
            alert("及格了");
        }
        else if(iScore == 60){
            alert("刚及格");
        }
        else{
            alert("没有及格")
        }
        // && ：且， ||：或 ，!： 非
        var iNum1 = 50;
        var iNum2 = 100;
        if(iNum1 >= 60 && iNum2 >=100){
            alert("条件成立");
        }
        else{
            alert("条件不成立")
        }
        // || 或
        var iNum1 = 50;
        var iNum2 = 100;
        if(iNum1 >= 60 || iNum2 >=100){
            alert("条件成立");
        }
        else{
            alert("条件不成立")
        }
        // !一定要加括号不然会判断iNum的值
        var iNum = 50;
        if(!(iNum >= 60)){
            alert("条件成立");
        }
        else{
            alert("条件不成立")
        }
    </script>
</head>
<body>
</body>
</html>
7.标签元素
  1. html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”
  2. “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

步骤：

1.获取标签元素；

可以使用内置对象document上的getElementById方法获取页面上设置了id属性的标签元素获取到的一个html对象，让后把它赋值给一个变量；

<!DOCTYPE html>
<html lang="en">
<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>
        // // 定义加载函数
        // function fnLoad(){
        //     // 通过内置方法获取对应的id的标签，如果没有成功返回null
        //     var oBtn = document.getElementById("btn");
        //     alert(oBtn);

        // }
        // // onload事件：页面加载完毕后触发
        // window.onload = fnLoad; 
        // 工作的写法
        // window.onload = function(){
        //     var oBtn = document.getElementById("btn");
        //     alert(oBtn);
        // }
        // onclick事件：点击触发
         function fnLoad(){
            // 通过内置方法获取对应的id的标签，如果没有成功返回null
            var oBtn = document.getElementById("btn");
            alert(oBtn);
         }
    </script>
</head>
<body>
    <!-- <input type="botton" value="按钮" id="btn"> -->
    <input type="botton" value="按钮" id="btn" onclick="fnLoad()">
</body>
</html>

2.操作标签元素；

标签属性和样式修改

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        .mybtn{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
    <script>
         function fnLoad(){
            // 通过内置方法获取对应的id的标签，如果没有成功返回null
            var oBtn = document.getElementById("btn");
            alert(oBtn);
            // 获取属性
            alert(oBtn.value);
            alert(oBtn.type);
            // 修改属性
            oBtn.value = "小廖子同学";
            oBtn.style.background = "red";
            // 获取样式
            oBtn.className = "mybtn";
         }
    </script>
</head>
<body>
    <input type="botton" value="按钮" id="btn" onclick="fnLoad()">
</body>
</html>

标签中内容的获取和修改

  • innerHTML可以读取或者设置标签包裹的内容
<!DOCTYPE html>
<html lang="en">
<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>
        // 等待我们的页面数据加载完毕触发onload事件
        window.onload = function(){
            var oDiv = document.getElementById("mydiv")
            // 获取标签中的内容
            alert(oDiv.innerHTML)
            // 修改标签属性
            oDiv.innerHTML = "你好，阳光"
        }
    </script>
</head>
<body>
    <div id="mydiv">小廖子同学</div>
</body>
</html>
8.数组的定义和操作

根据下标删除指定元素

什么是数组：

数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。

多维数组：

多维数组指的是数组的成员也是数组，把这样的数组叫做多维数组。

获取数组的长度：aArray.length

获取数组数据：alert(aArray0)

从数组最后删除和添加数据：pop(),push()

根据数组添加和删除元素:splice()

数组.splice(start,num,element1,......,elementN)

1. start：必需，开始删除的索引。
2. num：可选，删除数组元素的个数。
3. elementN：可选，在start索引位置要插入的新元素。

此方法会删除从start索引开始的num个元素，并将elementN参数插入到start索引位置。

console.log()类似于alert啊，不过不会打断操作。主要是方便调式javascript用的。你可以看到你在页面中输出的内容，不过需要浏览器支持控制台输出。在浏览器界面使用快捷键 F12 就能打开控制台，这个F12 最确切的叫法是开发人员工具。其中，Console 即控制台。点击右键的 Clear console 菜单 或者 输入 clear() /console.clear()然后按回车即可清空控制台内容。
相比alert他的优点是：

他能看到结构化的东西，如果是alert，弹出一个对象就是[object object],但是console能看到对象的内容。

console不会打断你页面的操作，如果用alert弹出来内容，那么页面就死了，但是console输出内容后你页面还可以正常操作。

console里面的内容非常丰富，你可以在控制台输入：console，然后就可看到；

<!DOCTYPE html>
<html lang="en">
<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>
        // 1.定义数据的两种方式
        var aArray = new Array(1, 2, 3);
        console.log(aArray);
        var aArray = [1, 2, 3];
        console.log(aArray);
        // 2.多维数组
        var aArray = [[1, 2, 3],[11, 22, 33]];
        console.log(aArray);
        // 3.根据下标查找元素（js不支持负数下标）
        alert (aArray[0][0]);
        // 4.根据下标修改数据
        aArray[0][0] = 100;
        console.log(aArray);
        // 5。获取数据长度
        alert(aArray.length);
        // 6.z在末尾追加数据
        var aArray = [10, 20, 30, 40, 50];
        aArray.push("小廖子同学");
        console.log(aArray);
        // 7.删除数据 pop()不支持下标删除,删除最后一个元素
        var aArray = [10, 20, 30, 40, 50];
        aArray.pop();
        console.log(aArray);
        // 8.删除指定数据
        var aArray = [10, 20, 30, 40, 50];
        aArray.splice(1,2);
        console.log(aArray);
        // 添加指定数据
        aArray.splice(1,0,"小廖子", "xlz")
        console.log(aArray)
    </script>
</head>
<body>
</body>
</html>
9.循环语句

循环语句的作用：

循环语句就是让一部分代码重复执行，javascript中常用的循环语句有:

  • for
  • while
  • do-while
<!DOCTYPE html>
<html lang="en">
<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>
        // for 循环
        // var aArray = [3, 6, 9];
        // for (var index = 0; index < aArray.length; index ++){
        //     var result = aArray[index];
        //     alert(result);
        // }
        // while 循环
        // var aArray = [3, 6, 9];
        // var index = 0;
        // while(index<aArray.length){
        //     var result = aArray[index];
        //     alert(result);
        //     index++;
        // }
        // do while 循环,无论条件是否成立都会执行一次
        var aArray = [3, 6, 9];
        var index = 0;
        do{
            var result = aArray[index];
            alert(result);
            index++;  
        }while(index < aArray.length);
    </script>
</head>
<body>
</body>
</html>
10.字符串

字符串拼接使用“+”运算符。

数字和字符串拼接会自动进行类型转换(隐式类型转换)，把数字类型转成字符串类型进行拼接。

<!DOCTYPE html>
<html lang="en">
<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>
        var iNum = 10;
        var fNum = 10.1;
        var sStr = "小廖子";
        var sStr1 = "123"
        // 把数字类型转化成字符串，进行相加
        var iResult = iNum + fNum;
        alert(iResult);
        var iResult = iNum + sStr;
        alert(iResult)
        var iResult = fNum + sStr;
        alert(iResult)
        var iResult = fNum + parseFloat(sStr1)
        alert(iResult)
    </script>
</head>
<body>
</body>
</html>
11.定时器
<!DOCTYPE html>
<html lang="en">
<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>
        // 1.定时器
        /*
        function fnShow(name){
            alert(name);
            // 清除定时器
            clearTimeout(tId)
        }
        // 创建定时器
        var tId = setTimeout(fnShow, 2000, "小廖子");*/
        // 2.重复定时器
        function fnShow(name){
            alert(name);
        }
        function fnStop(){
            // 消除重复定时器
            clearInterval(tId);
        }
		// 创建重复定时器
        var tId =setInterval(fnShow, 3000, "小廖子");
    </script>
</head>
<body>
    <input type="button" value="停止" onclick="fnStop();">
</body>
</html>
小廖同学
关注
专栏目录
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
面试题目1
leizhipan的专栏
08-01 989
公司要招人,于是个人出了这套题,其实大多是从网上偷来的,感觉没抓住重点,而且有点偏,不知哪位大侠有好的建议.这样的试题对招人有用吗?第一部分HTML/XHTML(1)在HTML语言中，BODY元素标明的是(    )。A.HTML文档的文档主体            B.HTML文档的字体大小C.HTML文档的颜色                D.HTML文档的标题文字(2)HTML标签中i
alert输出内容
weixin_45368324的博客
04-09 2997
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。 语法: alert(字符串或变量); 看下面的代码: <script type="text/javascript"> var mynum = 30; alert("hello!"); alert(mynum); ...
.NET 面试题+答案(1)
05-08 1871
. SQL部分：   问：聚集索引和非聚集索引区别：   答：正文内容本身就是一种按照一定规则排列的目录称为“聚集索引”。          目录纯粹是目录，正文纯粹是正文的排序方式称为“非聚集索引”  问：索引有什么意义？简单解释簇索引(clustered)，及其优缺点答：聚集索引通常可加快 UPDATE 和 DELETE 操作的速度，因为这两个操作需要读取大量的数据。创
JavaScript基础学习 事件
柠檬味小发糕的博客
12-18 886
JavaScript基础学习 事件注册事件删除事件事件对象e.target与this的区别阻止默认行为(事件)阻止事件冒泡事件委托 注册事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devcie-width,initial-scale=1.0"> <met
Javascript 基础知识学习
岳来的博客
11-23 7345
javascript 基础学习
针对后端开发者的JavaScript基础学习
XIAO_yux的博客
08-07 1490
黑马程序员课程学习笔记
JavaScript基础学习点滴第一章
weixin_54957314的博客
05-10 1207
JavaScript基础学习点滴第一章
JavaScript基础 学习笔记
kittates的博客
03-23 1195
初始JavaScript: 浏览器分为两部分:渲染引擎和JS引擎 渲染引擎:用来解析HTML、初始时,俗称内核,如Chrome的blink,老版本的webkit JS引擎:也成为JS解释器,用来读取网页中的JavaScript代码,对齐处理后运行,如Chrome的V8 浏览器本身不会执行JS代码,而是通过内置的JavaScript引擎(解释器)来执行JS代码,JS引擎执行代码是逐行解释每一句源码 并转化为机器语言然后去执行。 J
JavaScript基础学习 动态生成表格
柠檬味小发糕的博客
12-17 2810
JavaScript基础学习 动态生成表格 根据我们拥有的数据来动态创建表格的行和列，以及实现删除行的操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=devcie-width,initial-scale=1.0"> <meta http-equiv="X-U
JavaScript学习（基础）
m0_49034593的博客
08-19 1320
js基础
HTML CSS and Javascript 基础学习代码.zip
12-30
HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 HTML CSS and Javascript 基础学习代码 ...
前端JavaScript基础学习笔记案例
08-02
个人在学习前端JavaScript时的学习笔记，内含JavaScript的中基础知识点，以及案例。里面有兼容市面上浏览器的方法 1.知识点包括：基础语法，字符串操作，object对象，DOM对象，BOM对象，offset，client，scroll对象...
JavaScript基础学习-1
12-20
1. JavaScript基础：学习ECMAScript的基本规则，这是JavaScript的核心语言部分。 2. ES6实战：了解并应用ES6引入的新特性，如箭头函数、类、模板字符串等。 3. 面向对象编程：理解面向对象的概念并学会在JavaScript...
逆变器PQ控制模型、逆变器并网模型（Simulink） 直流侧电压650V～2000V均可 交流测电压为380V 有功功率和无功
10-10
逆变器PQ控制模型、逆变器并网模型（Simulink） 直流侧电压650V～2000V均可 交流测电压为380V 有功功率和无功功率可达10kW或10kVar，甚至更高
SpringBoot+Vue工厂生产设备维护管理系统答辩PPT.ppt
10-10
计算机毕业设计答辩PPT
CPA 税法 马兆瑞 基础班 第10章-本章概述-PPT-8页.pdf
最新发布
10-10
CPA 税法 马兆瑞 基础班 第10章-本章概述-PPT-8页.pdf
CCS软件之工程模板的创建
10-10
工程模板创建的基础文件
"轻松入门JavaScript基础学习及用法
学习 JavaScript 的教材是非常重要的，因为它可以帮助你快速掌握基础知识并建立强大的基础。在学习 JavaScript 的过程中，你将会了解到什么是 JavaScript，如何在 HTML 页面中添加 JavaScript 代码，以及如何使用 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值