日常开发中，为了方便数据的输入和输出，JavaScript提供了一些常用的输入输出语句，具体如表1-3所示。
表1常用的输入输出语句

接下来将分别演示document.write0、console.log0和promptO的使用。

1. document.write()

document.write0的输出内容中如果含有HTML标签，会被浏览器解析。下面利用documenL.write0在页面中输出“我是document.write0语句!”，示例代码如下。

document.write('我是document.write()语句！');

2. console.log()

利用console.log0语句在控制台输出“我是console.log0语句!”，示例代码如下。

console.log('我是console.log()语句!');

console:.log0的输出结果需要在浏览器的控制台中查看。在Chrome 浏览器中按“F12”键(或在网页空白区域右击，在弹出的菜单中选择“检查”)启动开发者工具，然后切换到“Console”(控制台)面板，即可看到console.log0的输出结果。

3.prompt()

利用prompt0语句实现在页面中弹出一个带有提示信息的输入框，示例代码如下。

prompt(请输入姓名：');

上述示例代码运行后，将在页面中弹出一个输人框并提示用户“请输人姓名：”提示框。

么是 HTML？

HTML （Hypertext Markup Language）是标准标记语言，是 Web 浏览器显示的基础。 此外，CSS（Cascading Style Sheets）等技术以及JavaScript等脚本语言也支持这种技术。

创建主页时，首先使用 HTML 确定句子的结构并标记它，然后设计要显示的信息。 这是网页的基础。

现在，让我们仔细看看可以使用少量 CSS 代码实现的技术。

一种技术摘要，可以使用鲜为人知的短 HTML 代码实现

loading="lazy"属性

Web 性能改进技术之一是属性，允许用户延迟加载，直到滚动。 它还适用于嵌入 YouTube 视频的 iframe 代码和大尺寸图像。loading="lazy"

XHTML

发送电子邮件、电话或短信短信

打开电子邮件创建页面、直接拨打电话或发送短消息的技术。

XHTML

确定列表顺序的属性strat

start属性允许您自由确定列表格式的数字。

meter在元素中显示数字

meter元素允许您使用彩色滑块显示数字和数量。 不需要 JavaScript 或 CSS。

HTML 本机搜索

通过预先在表单输入元素中指定一些数据列表，可以将其作为候选关键字显示在输入字段中的下拉列表中。

Fieldset按元素对标签进行分组

fieldset元素允许您将 Web 窗体中的多个控件和标签 （） 组合在一起。label

使用 window.opener 防止检索原始窗口中的信息

target="_blank在 中打开的页面将允许您访问原始页面的 window.opener。 这可能会对安全性和性能产生负面影响，例如"原始窗口在知道之前已转换到填充站点"。 为了防止这种情况，请包括 或 。rel="noopener"rel="noreferrer"

base元素

如果要在新选项卡中打开 HTML 文档中的所有链接，可以使用元素。 在下面的示例中，两个链接都在新的选项卡中打开。base

防止传真机缓存

若要更新网站的传真，您可以通过将其添加到文件名中来在浏览器中下载新版本。?v=2

一种有效的技术，尤其是在生产环境中，以确保用户输入新版本。

XHTML

spellcheck按属性检查拼写

可以决定是否检查元素的拼写错误的属性。spellcheck

显示 HTML 滑块

input type="range"允许您使用滑块调整数字。 所选数字可以显示在 中。input type="number"

仅通过 HTML 显示手风琴

details元素允许您创建仅 HTML 本机手风琴。

mark标记中的文本突出显示突出显示

mark标记允许您使用黄色标记突出显示文本的一部分。

下载文件具有属性download

URL 链接的属性允许您直接下载文件，而不是将其移动到文件中。download

XHTML

webp使用文件格式

使用".webp"作为图像格式可以减小图像大小并提高网站性能。

XHTML

视频视频缩略图视图

poster属性允许您指定在加载视频或按下"播放"按钮之前显示的图像。

XHTML

type="search"在 中显示取消标记

在搜索框中使用时，将自动显示"X"清除标记以取消。type="search"

只有 HTML 可以实现的功能，我有很多。 我们计划在未来添加和更新小技巧技术。

、流程控制

1. 作用：控制代码的执行顺序

2. 分类

2.1顺序结构：从上到下依次执行代码语句

2.2选择结构：

1. if语句

简单if结构

if(条件表达式){
    表达式成立时执行的代码段
}

注意 : 除零值以外，其他值都为真，以下条件为假值false

if(0){}
if(0.0){}
if(""){} //空字符串
if(undefined){}
if(NaN){}
if(null){}

特殊写法 : { }可以省略,一旦省略，if语句只控制其后的第一行代码

2. if - else结构：

if(条件表达式){
//条件成立时执行
}else{
//条件不成立时选择执行
}

3.多重分支结构：

if(条件1){
      //条件1成立时执行
  }else if(条件2){
      //条件2成立时执行
  }else if(条件3){
      //条件3成立时执行
  }...else{
      //条件不成立时执行
  }

2. switch语句：

语法 :

switch(value){
case 值1 :
//value与值1匹配全等时,执行的代码段
break; //结束匹配
case 值2 :
//value与值2匹配全等时,执行的代码段
break;
case 值3 :
    //value与值3匹配全等时,执行的代码段
break;
default:
//所有case匹配失败后默认执行的语句
break;
}

使用时要注意的：

1. switch语句用于值的匹配，case用于列出所有可能的值；只有switch()表达式的值与case的值匹配全等时，才会执行case对应的代码段
2. break用于结束匹配，不再向后执行；可以省略，break一旦省略，会从当前匹配到的case开始，向后执行所有的代码语句，直至结束或碰到break跳出
3. default用来表示所有case都匹配失败的情况，一般写在末尾，做默认操作
4. 多个case共用代码段
          case 值1:
          case 值2:
          case 值3:
          //以上任意一个值匹配全等都会执行的代码段

3.循环结构：

作用 根据条件，重复执行某段代码

1. while循环：

定义循环变量;
  while(循环条件){
  条件满足时执行的代码段
  更新循环变量;
}

2. do-while循环：

do{
循环体;
更新循环变量
}while(循环条件);

while 与do-while循环的区别 :

while 循环先判断循环条件，条件成立才执行循环体

do-while 循环不管条件是否成立，先执行一次循环体

3. for 循环

for(定义循环变量;循环条件;更新循环变量){
    循环体;
}

循环控制 :

break 强制结束循环

continue 结束当次循环，开始下一次循环 循环嵌套 : 在循环中嵌套添加其他循环

二、函数

函数的作用：封装一段待执行的代码

语法：

 //函数声明
  function 函数名(参数列表){
      函数体
      return 返回值;
  }
  //函数调用
  函数名(参数列表);

使用： 函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)

三，匿名函数

匿名函数：省略函数名的函数。

语法为：

匿名函数自执行

(function (形参){
 
})(实参);

定义变量接收匿名函数：

var fn = function (){};
fn(); //函数调用

四，作用域

JavaScript 中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据

1，全局变量和全局函数

只要在函数外部使用 var 关键字定义的变量，或函数都是全局变量和全局函数，在任何地方都可以访问

所有省略 var 关键字定义的变量，一律是全局变量

2，局部变量/局部函数

在函数内部使用 var 关键字定义的变量为局部变量，函数内部定义的函数也为局部函数，只能在当前作用域中使用，外界无法访问

3，作用域链 局部作用域中访问变量或函数，首先从当前作用域中查找，当前作用域中没有的话，向上级作用域中查找，直至全局作用域

作者：YJ-TX

原文：https://www.cnblogs.com/yjtxin/p/12969576.html