htmljs编程笔记（html代码笔记）

发布时间：2023-12-08

htmljs编程笔记（html代码笔记）

更新：2022-11-15 22:03

本文目录一览：

  1. html代码和JS代码有什么区别
  2. 如何在html中调用js函数
  3. JavaScript学习笔记之数组基本操作示例
  4. HTML5初学者笔记
  5. 《web前端笔记7》js字符—获取、查找、遍历、提取、替换方法总结

html代码和JS代码有什么区别

一、基础不同

  1. JS代码：基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
  2. html代码：是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。

二、用处不同

  1. JS代码：用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
  2. html代码：结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

三、特点不同

  1. JS代码：主要用来向HTML（标准通用标记语言下的一个应用）页面添加交互行为。可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
  2. html代码：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 参考资料来源：百度百科-JS脚本
    参考资料来源：百度百科-html代码

如何在html中调用js函数

一、工具：Dreamweaver软件、电脑

二、操作步骤：

  1. 打开Dreamweaver软件，然后在创建新项目下选择HTML；
  2. 点击“文件”选项，然后点击“另存为”，将文件命名为test，并将其保存在电脑桌面上；
  3. 编写一个基本的html文件，该html文件包含一个用户名及一个密码输入文本框和一个确定以及一个取消按钮；
  4. 在title标签下插入<script language="JavaScript">js代码</script>，然后在html中调用js函数；
  5. 完成js代码编写及html调用js代码后保存test.html文件，然后在浏览器中打开test.html文件，检查js代码执行的效果；
  6. 在Dreamweaver软件中新建一个check.js文件（方法同html文件新建），在check文件中输入校验函数；
  7. 然后在test.html的title标签下引用check.js文件；
  8. 在程序中引用check.js文件中的js函数，然后在浏览器中刷新test.html文件，然后在username的输入框中输入非法字符来检验js代码。

JavaScript学习笔记之数组基本操作示例

本文实例讲述了JavaScript学习笔记之数组基本操作。分享给大家供大家参考，具体如下：

一、数组定义

  1. 定义 
    var a = [1, 2, 3];
var a = new Array(1, 2, 3);
  2. 长度
    • 返回长度 
      var a = [1, 2, 3, 4, 5, 6];
alert(a.length);
    • 设置长度 
      var a = [1, 2, 3, 4, 5, 6];
a.length = 2;
alert(a);

二、数组连接

var a = [1, 2, 3];
var b = [4, 5, 6];
alert(a.concat(b));
alert(b.concat(a));

三、数组排序

sort()函数默认情况是把数组元素按字符串排序。

例子01

var arr = ['float', 'width', 'alpha', 'zoom', 'left'];
arr.sort();
alert(arr);

例子02

var arr = [12, 8, 99, 19, 112];
arr.sort();
alert(arr);

例子03（sort()函数的改进）

var arr = [12, 8, 99, 19, 112];
arr.sort(function(n1, n2) {
    return n1 - n2;
});
alert(arr);

四、数组连接

  1. 两个数组间的连接：contact() 
    var a = [1, 2, 3];
var b = [4, 5, 6];
alert(a.concat(b));
alert(b.concat(a));
  2. 数组元素间的连接：join() 
    var arr = [1, 2, 3, 4];
alert(arr.join('--p'));

五、数组元素添加、删除

  1. 数组尾部的添加、删除
    • 尾部添加：push(value) 
      var a = [1, 2, 3];
a.push(4);
alert(a);
    • 尾部删除：pop() 
      var a = [1, 2, 3];
a.pop();
alert(a);
  2. 数组头部的添加、删除
    • 头部添加：unshift(value) 
      var arr = [1, 2, 3];
arr.unshift(0);
alert(arr);
    • 头部删除：shift() 
      var arr = [1, 2, 3];
arr.shift();
alert(arr);
  3. 数组——splice()
    • 删除数据 
      var arr = [1, 2, 3, 4, 5, 6];
arr.splice(2, 3);
alert(arr);
    • 插入数据 
      var arr = [1, 2, 3, 4, 5, 6];
arr.splice(2, 0, 'a', 'b', 'c');
alert(arr);
    • 替换数据 
      var arr = [1, 2, 3, 4, 5, 6];
arr.splice(2, 2, 'a', 'b');
alert(arr);

希望本文所述对大家JavaScript程序设计有所帮助。 您可能感兴趣的文章：

HTML5初学者笔记

HTML5记录

  1. VS code引入插件后运行，终端执行
  2. 引入外部js文件：
    • js的exports.a = a方式暂时不知道怎么做
    • 直接引入，script之后可以直接使用。参照html-vue项目
  3. 数据类型
    • String、Number、Boolean、Null、undefined、symbol、Object、Array、Function
  4. JS显示数据方式：
    • window.alert()
    • document.write()
    • innerHTML=''
    • console.log()
  5. let、const、var
  6. 全局变量、局部变量注意点
    • 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
  7. 事件：
    • onchange、onclick、onmouseover、onmouseout、onkeydown、onload等
    • html dom onclick之类的直接使用，vue是@click，小程序是bindTap
  8. this关键字：
    • 在对象方法中，this指向调用它所在方法的对象。
    • 单独使用this，它指向全局(Global)对象。
    • 函数使用中，this指向函数的所属者。
    • 严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
    • 在 HTML 事件句柄中，this指向了接收事件的 HTML 元素。
    • apply 和 call 允许切换函数执行的上下文环境（context），即 this绑定的对象，可以将 this 引用到任何对象。
  9. 箭头函数：
    • 有的箭头函数都没有自己的 this 。 不适合定义一个 对象的方法。
    • 当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。
    • 箭头函数是不能提升的，所以需要在使用之前定义。
    • 使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。
  10. 闭包：
    • 闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
    • 直观的说就是形成一个不销毁的栈环境。
    • 闭包会持有父方法的局部变量和参数并且不会随父方法销毁而销毁
    • 不必要的闭包只会增加内存消耗
  11. 事件
    • body事件：onload、onunload
    • 元素事件：onclick、onmouseover、onmouseout、onmousedown、onmouseup、onfocus
    • 事件捕获 
      document.getElementById('demo').addEventListener('事件名', 方法名, 是否捕获传递)
      • 方法名：如果是相应事件，则只可写方法名methodName，写成methodName()则会自动执行
      • 如果方法需要传递参数，则只可以使用匿名函数，function( { methodName(p1, p2) } );
      • 是否捕获传递：默认false，即冒泡传递
      • IE8和更早版本：x.attachEvent("onclick", myFunction);
  12. Window加载，页面声明周期入口 
    window.onload = function () { }
  13. 数据存储
    • localStorage不会被自动删除，
    • sessionStorage 网页关闭会自动删除
    • cookie
    • sql
    • manifest文件
    • 区别：
      • localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
      • sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
  14. CSS声明权重（选择器）
    • 内联ID伪类属性类元素/类型通用
    • !important会改变优先级
  15. 元素隐藏/显示
    • display: none 隐藏 不占用空间
    • visibility: hidden 隐藏，仍然占用空间
    • v-if 存在/不存在
    • v-show 只生成一次，占用内存
  16. Position
    • static 默认方式，没有定位
    • fixed 相对于浏览器窗口固定定位，不占用文档流，其他元素会相对位移
    • absolute 相对于最近的已定位父元素定位，不占用文档流，其他元素会相对位移
    • relative 相对于自身的定位
    • sticky 粘滞定位，基于用户的滚动位置定位
  17. float
    • 只能左右浮动
    • 左右浮动，直到外边缘碰到另一个浮动元素
    • 浮动之后的元素将围绕它
    • 浮动之前的元素不受影响
    • 如果是图像浮动，下面的文本流将环绕它
    • clear声明的元素，属性指定元素两侧不能出现浮动元素。
    • 推荐使用flex布局
  18. 文字显示…
    • 单行
    • 任意行
  19. box-shadow顺序
  20. flex布局
    • 容器属性：
      • 属性 / 说明可选值
      • f方向：flex-direction
      • 换行：flex-wrap
      • 简写：flex-flow
      • 主轴上的对齐方式：justify-content
      • 交叉轴上如何对齐：align-items
      • 多根轴线的对齐方式：align-content。（如果项目只有一根轴线，该属性不起作用）
    • 项目item属性:
      • order：排列顺序，越小越靠前
      • flex-grow：放大比例，2比1占用的空间大一倍
      • flex-shrink：缩小比例，默认1，当空间不足时等比例缩小。如果一个项目的属性为0，其他项目都为1，则空间不足时，前者不缩小
      • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间
      • flex ：简写
      • align-self：允许单个项目与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

《web前端笔记7》js字符—获取、查找、遍历、提取、替换方法总结

  1. 字符串就是零个或多个排在一起的字符。
  2. 放在单引号或双引号之中。'abc' "abc"。
  3. 单引号字符串的内部，可以使用双引号。
  4. 双引号字符串的内部，可以使用单引号。
  5. 反引号``：反引号允许跨行。
    • 反引号允许字符串跨越多行并可以使用${…}在字符串中嵌入表达式。
  6. charAt 方法返回指定位置的字符，参数是从0开始编号的位置。
    • 找一个字符串中的某个位置是那个字符串。
  7. charCodeAt：返回字符串指定位置的 Unicode 码点（十进制表示）
  8. []
    • 字符串可以被视为字符串数组，因此可以用数组的方括号运算符，用来返回某个位置的字符
    • 但是字符串只是数组的相似性而已，实际上没办法改变字符串中的某个字符
    • length只是返回了字符串的长度，该属性没办法改变
    • 字符串使用Unicode字符集，js内部所有的都是Unicode表示的。
    • JavaScript中的字符串使用的是 UTF-16 编码。
  9. toLowerCase() 和 toUpperCase()方法可以改变大小写。
  10. String对象是js原生提供的三个包装对象之一。用来生成字符串对象。
    • 构造函数
    • 字符串对象是一个类数组对象，很像数组，但不是真正的数组。
    • 用于连接两个字符串，返回一个新字符串，不改变原字符串。
    • 从原字符串取出子字符串并返回，不改变原字符串。
    • 它的第一个参数是子字符串的开始位置，
    • 第二个参数是子字符串的结束位置（不含该位置）。
    • 如果省略第二个参数，则表示子字符串一直到原字符串结束。
    • 用于从原字符串取出子字符串并返回，不改变原字符串，跟slice方法很相像。
    • 它的第一个参数表示子字符串的开始位置，
    • 第二个位置表示结束位置（返回结果不含该位置）
    • 如果省略第二个参数，则表示子字符串一直到原字符串结束。
    • 区别：slice 和 substring的区别？
      • slice：
        • 如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。
        • 如果第一个参数大于第二个参数（正数情况下），slice()方法返回一个空字符串。
      • substring：
        • 如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置。
        • 如果参数是负数，substring方法会自动将负数转为0。
        • 由于这些规则违反直觉，因此不建议使用substring方法，应该优先使用slice。
    • 总结：获取子字符串，使用 slice 或 substring。
  11. 用于确定一个字符串在另一个字符串中第一次出现的位置，
    • 返回结果是匹配开始的位置。如果返回-1，就表示不匹配。
    • indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配。
    • lastIndexOf
      • lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配，indexOf则是从头部开始匹配。
    • 总结：查找子字符串时，使用 indexOf 或 includes/startsWith/endsWith 进行简单检查。
  12. endsWith 用来判断当前字符串是否是以另外一个给定的子字符串“结尾”的，根据判断结果返回 true 或 false。
  13. 用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。
  14. toLowerCase方法用于将一个字符串全部转为小写，
    • toUpperCase则是全部转为大写。
    • 它们都返回一个新字符串，不改变原字符串
  15. split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。
    • 如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。
    • 如果省略参数，则返回数组的唯一成员就是原字符串。
    • split方法还可以接受第二个参数，限定返回数组的最大成员数。
  16. 返回一个新字符串，表示将原字符串重复n次。
  17. 字符串补全长度的功能。如果某个字符串不够指定长度，
    • 会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
  18. trimStart()消除字符串头部的空格，
    • trimEnd()消除尾部的空格。
  19. 返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串。
    • 模式可以是一个字符串或者一个正则表达式，
    • 替换值可以是一个字符串或者一个每次匹配都要调用的回调函数。
    • 如果pattern是字符串，则仅替换第一个匹配项. web前端笔记4-有讲 如果感兴趣、请参考之前文章
推荐文章