Loading

JavaScript基础学习笔记（21.08）

🍚JavaScript基础

本篇笔记是在学习黑马程序员js基础视频课过程中整理归纳的，以便日后复习。(2021年8月)

🌾JavaScript概述

🌱JS介绍

  • HTML：就是用来写网页的。
  • CSS：就是用来美化页面的。
  • JavaScript：控制页面特效展示，例如
    • JS可以对HTML元素进行动态控制。
    • JS可以对表单项进行校验。
    • JS可以控制CSS的样式。

🌼JavaScript是WEB上强大的脚本语言

脚本语言：无法独立执行。必须嵌入到其他语言中，结合使用。
Java编程语言：独立写程序，独立运行。编译、执行。

🌱JS语言特征

  • 特征：

    • JavaScript无需编译，直接被浏览器解释并执行。
    • JavaScript无法单独运行，必须嵌入到HTML代码中运。
    • JavaScript的执行过程由上到下依次执行。

  • 注意：

    • JavaScript没有访问系统文件的权限(安全)。
    • 由于JavaScript无需编译,是由上到下依次解释执行,所以在保证可读性的情况下，允许使用链式编程
    • JavaScript和java没有任何直接关系。

🌱JS的组成

  • ECMAScript(核心)：规定了JS的语法和基本对象。
  • DOM：文档对象模型:处理网页内容的方法和接口。
  • BOM：浏览器对象模型:与浏览器交互的方法和接口。

🌱JS的引入方式

  • 内部引入

    在当前页面内部写script标签，script 内部即可书写JavaScript代码。

    格式：

    <script type="text/javascript">
    //JavaScript的代码。
</script>

    注: script 标签理论上可以书写在HTML文件的任意位置。

  • 外部引入

    在HTML文档中，通过<script src="">标签引入.js文件。

    格式：

    <script type="text/javascript" src="javascript文件路径"></script>

    注:外部引用时script标签内不能有script代码，即使写了也不会执行。

🌱标签规范化的放置位置

开发规范规定，script 标签的放置位置为：Body结束标签前。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>welcome</p>
    <script></script>
</body>
</html>

保证html展示内容优先加载，最后加载脚本。增强用户体验性。

🌾JavaScript 语法及规则

🌱注释

  • 单行注释。//
  • 多行注释。/* */

🌱变量

  • 变量简述

    变量：标示内存中的一块空间，用于存储数据，且数据是可变的。

    变量的声明：

    var 变量名; //变量赋予默认值，默认值为undefined.

    变量的声明和赋值：

    var 变量名=值; //变量赋予对应的值

    在声明JavaScript变量时，需要遵循以下命名规范：

    • 必须以字母或下划线开头，中间可以是数字、字符或下划线。
    • 变量名不能包含空格等符号。
    • 不能使用JavaScript关键字作为变量名，如:functions
    • JavaScript 严格区分大小写。

  • 基本数据类型

    类似于java中的基本数据类型。

    • string 字符串类型。" "和''都是字符串。JavaScript中没有单个字符。
    • boolean 布尔类型。固定值为true和false。
    • number 数字类型。任意数字。
    • null 空，一个占位符。
    • undefined 未定义类型，该类型只有一个固定值，即undefined,表示变量声明却未定义具体的值。

    🌼因为undefined是从null中派生出来的，所以undefined==null

    🌼JavaScript区别于java,是弱类型语言,变量的使用不用严格遵循规范,所以一个变量声明好之后,是可以赋予任意类型的值。

    🌼通过typeof运算符可以分辨变量值属于哪种基本数据类型。

  • 引用数据类型

    引用类型通常叫做类(class),但在JavaScript中,因为不存在编译过程,所以没有类的概念，所处理的引用数据类型都是对象。
    标准创建方式：

    var str = new String();
var str = new String;

🌱运算符

参考：https://www.w3school.com.cn/js/js_operators.asp

  • 比较运算符

  • 逻辑运算符

🌱正则对象

  • RegExp 对象的创建方式

    var reg = new RegExp("表达式");       //开发中基本不用
var reg= /^表达式$/;                  //直接量,开发中常用

    🌼直接量中存在边界，即^代表开始，$代表结束,直接量方式的正则是对象，不是字符串，别用引号。

  • test 方法

    正则对象.test(tring);

    用来校验字符串是否匹配正则。全部字符匹配返回true;有字符不匹配返回false。

  • 正则对象使用注意事项

    • /^表达式$/只要有无法成立正则的字符存在，即为false，全部符合为true。检查严格，适用于表单校验。
    • /表达式/只要有成立正则的字符存在，即为true，全部不符合为false。检查不严格，适用于字符串查找、替换。

🌱数组对象

  • JS数组特性

    JS数组可以看做Java中的ArrayList集合。

    • 数组中的每一个成员没有类型限制，及可以存放任意类型。
    • 数组的长度可以自动修改。

  • JS数组的四种创建方式

    •   var arr= [1,2,3,"a",true];  //常用的JS数组。长度5。

    •   var arr = new Array();	//创建一个数组对象，数组长度默认为0。

    •   var arr = new Array(4);
  /*
  数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined. 
  (仅在显示数组时进行处理, undefined为了方便显示变成了空字符串形式,其值本质仍然是undefined)
  */

    •   var arr= new Array("a","b",true);	//创建了一个数组，长度3，数组元素是"a","b",true

  • Js数组的常用属性方法

    • length() 设置或返回数组中的元素的数目
    • join() 把数组的所有元素都放入一个字符串。元素通过指定的分隔符进行分隔。
    • pop() 删除并返回数组的最后一个元素
    • push() 向数组的末尾添加一个或更多元素，并返回新的长度
    • reverse() 颠倒数组中元素的顺序

🌱全局函数

  • 执行

    eval() 计算JavaScript字符串，并把它作为脚本代码来执行，用于增强程序的扩展性。

    🌼只可以传递原始数据类型string,传递String对象无作用。

  • 编码和解码

    URL编码：中文及特殊符号转换为%16进制，保证数据传递的完整性。

    • encodeURI() 把字符串编码为URI。
    • decodeURI() 解码某个编码的URI。

  • URI和URL的区别

    • URI(Uniform Resource Identifier)是统一资源标识符。 标识资源详细名称。

    • URL(Uniform Resource Locator)是统一资源定位器。定位资源的网络位置。

    🌼资源：可以通过浏览器访问的信息统统称为资源。(图片、文本、HTML、CSS 等等....)。

  • 字符串转数字

    • parselnt(string)：string按照字面值转换为整数类型，小数点后面部分不关注。
    • parseFloat(string)：string按照字面值转换为小数类型。

    🌼如果字符串的某个字符从字面值上无法转为数字,那么从该字符开始停止转换,仅返回。前面正确的转换值。

    例如: 11.5a55， parselnt 结果11，parseFloat 结果11.5

    🌼如果字符串的第一个字符就无法从字面值上转为数字，那么停止转换，返回NaN

    NotANumber，一个数字类型的标识，表示不是一个正确的数字

🌱自定义函数/方法

如果一段代码需要被重复编写使用,那么我们为了方便统一编写使用,可以将其封装进一个函数(方法)中，增强代码的复用性。

  • 函数格式

    function 方法名(参数列表){
    函数体
}
    • JavaScript函数定义必须用小写的function。
    • JavaScript函数无需定义返回值类型,直接在function后面书写方法名。
    • 参数的定义无需使用var关键字,否则报错。
    • JavaScript 函数体中,return可以不写,也可以return具体值,或者仅仅写return中

  • 函数使用的注意事项

    1. JavaScript函数调用执行完毕一定有返回值，值及类型根据return决定，如果未return具体值，返回值为undefined;
    2. JavaScript函数若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义;
    3. 因为JavaScript不存在函数重载,所以JavaScript仅根据方法名来调用函数,即使实参与函数的形参不匹配，也不会影响正常调用;

🌱自定义对象

  • 构造函数

    我们知道, JavaScript中的引用数据类型都是对象,而对象在JavaScript中可以用函数来表示。相当于java中创建某个class类

    • 无形参格式：

      function 对象名(){
    函数体
}

    • 带参数格式

      function 对象名(参数列表){
    函数体
}

    属性定义方式：

    1. this关键字，在对象声明定义阶段，定义一个属性
    2. 创建对象后，使用对象。属性方式动态定义属性
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //定义对象属性
        function Person(n,a){
            this.name=n;
            this.age=a;
        }
        //创建对象
        var p=new Person("黑岛正义",18);
        p.sex="男";  //为对象声明并赋值成功
        alert(p.sex);
    </script>
</head>
<body>
    
</body>
</html>

  • 对象直接量

    开发中可以用一种简单的方式直接创建自定义的JavaScript对象,这种方式称为对象直接量。格式：

    var 对象名={属性名1:"属性值1",属性名2:"属性值2",属性名3:"属性值..."}

    🌼该方式直接创建出实例对象,无需构建函数,无需再new创建实例对象,直接使用即可

🌾BOM对象

BOM ( Browser Object Model)浏览器对象模型。用来执行浏览器的相关操作。(例如:浏览器的地址、弹出消息等)。

一般情况下，window代表了BOM对象。window对象是JavaScript的内置对象,使用window对象调用方法时可以省略window不
写。

🌱消息框

  • alert() 警告框，用来弹出警告信息。（不同浏览器显示的组件样式不同）
  • confirm() 确认框，用于告知用户信息并收集用户的选择。（该方法有boolean类型的返回值）

🌱定时器

  • 循环定时器，调用一次就会创建并循环执行一个定时器。格式：

    setInterval(调用方法,亳秒值);

  • 清除定时器

    clearInterval(定时器名称)

  • 一次性定时器，调用-次就会创建并执行一个定时器一次。格式：

    setTimeout(调用方法,毫秒值);

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function run1(){
            alert("英特纳雄纳尔会实现吗？");
            clearInterval(id1)
        }
        var id1=setInterval(run1(),1000);
        
        function run2(){
            alert("英特纳雄纳尔会实现吗？");
        }
        var id2=setTimeout(run2(),2000);
        clearTimeout(id2);

    </script>
</head>
<body>
    
</body>
</html>

🌱location对象

location对象包含浏览器地址栏的信息。

常用属性：href设置或返回完整的URL。

location.href="http://";

🌾DOM对象

DOM(Document Object Model)：文档对象模型。

文档：标记型文档(HTML等)。

DOM是将标记型文档中所有内容(标签、文本、属性)都封装成对象，通过操作对象的属性或者方法，来达到操作或者改变HTML展示效果的目的。

🌱DOM树

<html>
    <head>
        <title>Document</title>
    </head>
    <body>
        <a href="">我的链接</a>
        <h1>我的标题</h1>
    </body>
</html>

上述HTML文档会被浏览器由.上到下依次加载并解析，加载到浏览器的内存。

  • 每个标签会被加载成DOM树上的一个元素节点对象。
  • 每个标签的属性会被加载成DOM树上的一个属性节点对象。
  • 每个标签的内容体会被加载成DOM树上的一个文本节点对象
  • 整个DOM树，是一个文档节点对象，即DOM对象。
  • 一个HTML文档加载到内存中就会形成一个DOM对象。

🌱获取元素对象

在JavaScript中，我们可以通过DOM对象的4种方式获取对应的元素对象：

  • getElementByld()：——通过元素ID获取对应元素对象。可以通过ID获取对应的元素对象，如果找不到，返回null

  • getElementsByName()：——通过元素的name属性获取符合要求的所有元素

  • getElementsByTagName()：——通过元素的元素名属性获取符合要求的所有元素。

  • getElementsByClassName()：——通过元素的class属性获取符合要求的所有元素。可以获取到元素节点对象数组;如果找不到，返回空数组。

🌼获取某个/某些元素节点对象，必须保证元素节点对象被先加载到内存中。

🌱元素对象常见属性

  • value

    元素对象.value 获取元素对象的value属性值。
    元素对象.value=属性值 设置元素对象的value属性值，修改元素的值。

  • className

    元素对象.className 获取元素对象的class属性值。
    元素对象.className=属性值 设置元素对象的class属性值，修改元素样式。

  • checked

    元素对象.checked 获取元素对象的checked属性值。
    元素对象.checked =属性值 设置元素对象的checked属性值。

    🌼HTML中checked="checked", JavaScript中返回true

  • innerHTML

    元素对象.innerHTML 获取元素对象的内容体。
    元素对象.innerHTML=值 设置元素对象的内容体，操作元素的内容体。

    🌼赋值=；追加+=

🌾JS事件

通常鼠标或热键的动作我们称之为事件(Event)。通过JS事件，我们可以完成页面的指定特效。

🌱点击事件（onclick）

由鼠标或热键点击元素组件时触发

	<script>
        function run1 () {
            alert("弹出") ;
        }
	</script>
</head>
<body>
    <input type="button" value="点我弹出对话框" onclick="run1 ()”/>
</body>

🌱焦点事件

  • 获得焦点事件(onfocus)

  • 失去焦点事件(onblur)

    	<script>
        function run1 () {
            alert("获得焦点了") ;
        }
	</script>
</head>
<body>
    <!--文本框失去焦点时弹出一个对话框-->
    <input type="text" onfocus="run1()" />
</body>
</head>

🌱域内用改变事件(onchange)

元素组件的值发生改变时触发

	<script>
        function run1 (){
            alert("弹出");
        }
	</script>
</head>
<body>
    <select onchange="run()">
        <option value="bei jing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
    </select>
</body>

🌱加载完毕事件（onload）

元素组件加载完毕时触发。

<script>
    function run1 () {
        alert("弹出");
    }
</script>
</head>
<body on load=" run1 ()">
</body>

🌱表单提交事件（submit）

表单的提交按钮被点击时触发

注意：该事件需要返回boolean类型的值来执行提交/阻止表单数据的操作。

事件得到true提交表单数据。事件得到false阻止表单数据提交。

	<script>
        function run1 (){
            alert("表单的提交按钮被点击了");
            return true;
        }
	</script>
</head>
<body>
    <form onsubmit= "run1()">
        <input type=Atext” name="uname" /><br />
        <input type="submit" value="提交"/>
    </form>
</body>

🌱键位弹起（onkeyup）

在组件中输入某些内容时，键盘键位弹起时触发该事件。

	<script>
        function run1 (){
            alert("弹出");
        }
	</script>
</head>
<body>
    <input type= "text" name="uname" onkeyup=" run1 ()" >
</body>

🌱鼠标事件

  • 鼠标移入（onmouseover）

  • 鼠标移出（onmouseout）

    	<script>
        function run1 () {
            alert("弹出");
        }
	</script>
</head>
<body>
    <input type="text" name="uname" onmouseover="run1 ()" >
</body>

🌱Js事件绑定方式

  • 将事件以元素属性的方式写到标签内部，进而绑定对应函数。

    	<script>
        function run1(str) {
            alert(str);
        }
</script> 
</head>
<body>
    <input type= "text" name=" uname" onclick="run1 ('nihao')" />
</body>

    <script>
    function run1 (inputNode) {
        alert (inputNode. value);
    }
</script>
</head>
<body>
    <input type="text" name= "uname" onclick="run1 (this)" value="nihao" />
</body>

    <script>
    function run1 () {
        alert(" run1");
    }
    function run2(){
        alert("run2");
    }
    function run3 (){
        alert("run3");
    }
</script>
</head>
<body>
    <!--触发事件时，会根据绑定顺序，按顺序执行这三个函数-->
    <input type="text" name= "uname" onclick=" run1 (), run2(), run3() "/>
</body>

    事件句柄绑定方式。

    优点：开发快捷,传参方便,可以绑定多个函数

    缺点：JS和HTML代码高度糅合在一起，不利于多部门的项目开发维护。

  • 使用DOM属性方法绑定事件

    <script>
    function run1 () {
        alert("run1' ");
    }
    function run2 (){
        alert("run2" );
    }
    //当页面加载完毕时， 元素对象已经加载到内存中
    window.onload=function(){
        //使用DOM方式获取到元素对象
        var t1=document.getElementById("t1");
        t1.onclick=function (){
            run1();
            run2();
        };
    };
</script>
<head>
    <body>
        <input type="text" id="t1" />
    </body>
</head>

    优点：使得HTML代码和JS代码完全分离。

    缺点：不能传递参数。解决：使用匿名函数,一个事件只能绑定一个函数。解决:匿名函数内部可以绑定多个函数

posted @ 2023-02-03 13:45  Masahiko  阅读(71)  评论(0)    收藏  举报