[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

目录

前言

数据类型

数据类型-字符型

数据类型-数值型

数据类型-布尔型

数据类型-其它类型

变量

转义字符

运算符和表达式

算术运算符和表达式

关系运算符和表达式

关系运算符和表达式

逻辑运算符和表达式

赋值运算符和表达式

位运算符和表达式

条件运算符和表达式

课后练习

网页标题：事件处理程序返回值的应用

网页标题：表单控件焦点、表单提交、重置事件的应用

网页标题：用户登录验证

总结

前言

Web 前端开发工程师应掌握以下内容

理解 JavaScript 程序的概念与作用；
掌握 JavaScript 标识符和变量的概念及使用方法；
掌握 JavaScript 常用运算符和表达式概念；
掌握 JavaScript 中顺序、分支、循环等 3 种程序控制结构语法；
掌握 JavaScript 函数的定义方法，并学会使用；
学会综合运用 JavaScript 设计具有动态、交互功能的网页。

数据类型

       数据类型是每一种计算机语言中的重要基础，JavaScript中的数据类型可分为字符型、数值型、布尔型、Null、Undefined和对象六种类型。

数据类型-字符型

       字符型数据又称为字符串，由若干个字符组成，并且用单引号或双引号封装起来，如“你好！”、‘你好！’、“学习‘语言’”。

l在使用字符串的过程中，需要注意单引号、双引号必须成对使用相互包含，但不能交叉。

    如：“学习不是一件‘容易”的事件’(×，交叉错误)。

数据类型-数值型

2.数值型：是JavaScript中最基本的数据类型之一，分为整型、浮点型、内部常量以及特殊值。

l 整型数值即整数，例如 100 、 -3500 、 0 等都是整数。 整数表示方法有十进制表示、八进制和十六进制的方式表示 。

    使用0打头的整数是八进制整数，如017，-035等都是合法的八进制整数。

    使用0x后0X打头的整数是十六进制整数，如0x16，0X3A89等都是合法的十六进制整数。

浮点数，例如3.53、-534.87等都是浮点型数值。浮点数还可以采用科学计数法进行表示，如3.5E15表示3.5×1015。

内部常量：Math.E(自然对数的底数e)、Math.PI等。

特殊值：Infinity（∞）、NaN-Not a Number。

数据类型-布尔型

3.Boolean（布尔型）是一种只含有true和false这两个值的数据类型，通常来说，布尔型数据表示“真”或“假”。

 JavaScript中，通常采用true和false表示布尔型数据，但也可将他们转换为其他类型的数据，例如可将值为true的布尔型数据转换为整数1，而将值为false的布尔型数据转换为整数0。

数据类型-其它类型

4.Null : null,表示空,不是0，0是有值的。

5.Undefined：变量创建后未赋值（数字：NaN；字符串：Undefined；Boolean:false） 。

6.Object:对象也是JS的重要组成部分，如date、window、document等，在后面介绍。

    数据类型之间可以通过函数进行转换。

转换函数如下：

Number(value): 把值转换成数字（整型或浮点数）
String(value): 把值转换成字符串
Boolean(value): 把值转换成 Boolean 类型

变量

变量：可以保存执行时变化的值的名字，称为“变量”，变量是存储信息的容器。

格式： var 变量名 [=初值][,变量名[=初值] …] ；

   var作用：声明或创建变量。

   具有良好编程习惯的程序员应该“先声明变量再使用”。例如：

      var userName =““ ;

      var x=0，y=2,str1=“欢迎你学习JS”; 

      var status = true;

      var a,b,c;

      str_name=“张为民";   //向未声明的变量赋值

转义字符

       如果在字符串中涉及到一些特殊字符如“\”、“"”、'”等，这些字符无法直接使用，需要采用转义字符的方式。

转义字符

代表含义

转义字符

代表含义

\b

退格符

\t

水平制表符

\f

换页符

\'

单引号

\n

换行符

\"

双引号

\r

回车符

\\

反斜线

运算符和表达式

JavaScript运算符主要有：算术运算符、关系运算符、逻辑运算符、赋值运算符、自增自减运算符、逗号运算符和位运算符等。

根据操作数的个数，将运算符分为一元运算符、二元运算符和三元运算符。

       由操作数（变量、常量、函数调用等）和运算符结合在一起构成的式子称为“表达式”，最简单的表达式可以是常量名称。

       对应的表达式包括：算术表达式、关系表达式、逻辑表达式、赋值表达式、自增、自减表达式、逗号表达式、条件表达式、位表达式。

算术运算符和表达式

算术运算符负责算术运算，用算术运算符和运算对象(操作数)连接起来符合规则的式子，称为算术表达式。

双元运算符（ op1 operator op2 ）
单元运算符（op operator 或 operator op

关系运算符和表达式

关系运算符和表达式

逻辑运算符和表达式

赋值运算符和表达式

基本语法：

简单赋值运算： < 变量 > = < 变量 > operator < 表达式 >
复合赋值运算： < 变量 > operator = < 表达式 >

位运算符和表达式

      位运算符是对二进制表示的整数进行按位操作的运算符。

      如果操作数是十进制或者其他进制表示的整数，运算前先将这些整数转换成32位的二进制数字，如果操作数无法转换成32位的二进制数表示，位运算的结果为NaN。

      位运算符：&-按位与；~ -按位非；|-按位或；^-按位异或

 其中位运算~， NOT 实质上是对数字求负，然后减 1。

条件运算符和表达式

条件运算符是一个3元运算符，也就是该运算涉及3个操作数。

l 基本语法：

变量=布尔表达式 ? 真值表达式 : 假值表达式

var variable = boolean_expression ? true_value : false_value;

例如：

      var v1=300,v2=-100;

      var max = (v1 >v2) ? v1 : v2;   //由于v1>v2，条件为真值，所以将真值表达式v1的值赋给max，max的值为300 ,比用if语句来得简单些。

课后练习

网页标题：事件处理程序返回值的应用

  • 网页标题：事件处理程序返回值的应用
  • 录入如下代码，熟悉提交事件处理程序返回值的使用

  • 创建一个网页“simple.html”，该网页的显示内容自定。
  • 在浏览器中打开“11-7.html”网页，在文本框中输入姓名单击提交按钮，则首先弹出警示框，单击警示框的确定按钮之后，即打开“simple.html”网页。若不输入任何值单击提交按钮，则弹出警示框，之后不会打开“simple.html”，运行效果如下图所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8"><title>事件处理程序返回值的应用</title><script>function showName(){if(document.form1.name1.value==""){alert("没有输入内容！");return false;}else{alert("欢迎你！"+document.form1.name1.value);return true;}}</script>
</head>
<body><h4>事件处理程序返回值的应用</h4><form name="form1" action="simple.html" onSubmit="return showName();">姓名：<input type="text" name="name1"><input type="submit" value="提交"></form>
</body>
</html>

网页标题：表单控件焦点、表单提交、重置事件的应用

  • 网页标题：表单控件焦点、表单提交、重置事件的应用
  • 设计如下图所示表单，当输入用户名的文本框获得焦点时，文本框自动显示admin，当该文本框失去焦点时，文本框中的字体变为蓝色
  • 单击提交按钮后显示告警框，具体显示信息如下图所示，单击确定按钮后，打开action中的页面。
  • 单击重置按钮，弹出如图所示的告警框：

    • 具体实现代码可参照下图所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单控件焦点、表单提交、重置事件的应用</title>
<style>
    input{font-family:Tahoma, Geneva, sans-serif;}
    fieldset{width:300px; height:150px;}
    form{text-align:center;}
</style>
<script>
    function $(id){return document.getElementById(id);}
    function submitTest()
    {//表单的提交事件触发的功能
        var msg="用户名："+$("input1").value;
        msg+="\n密码："+$("input2").value
        alert(msg);
    }
    function resetTest()
    {//表单的重置事件
        alert("开始清空数据！");
    }
    function getFocus(){$("input1").value="admin";} //表单控件获得焦点事件触发的功能
    function loseFocus(){$("input1").style.color="#00f"; } //表单控件失去焦点事件触发的功能
</script>
</head>
<body>
<form name="form1" action="simple.html" method="post" onSubmit="submitTest()" onReset="resetTest()">
    <fieldset>
        <legend>表单数据提交</legend>
        <br><label>用户名：</label><input type="text" id="input1" name="input1" onFocus="getFocus();" onBlur="loseFocus();">
        <br><br><label>密&emsp;码：</label><input type="password" id="input2" name="input2">
        <br><br><input type="submit" value="提交">
        <input type="reset" value="重置">
    </fieldset>
</form>
</body>
</html>

网页标题：用户登录验证

  • 网页标题：用户登录验证
  • 对上题中的功能进行修改：仅当输入用户名admin和密码123时，单击提交按钮时显示登录成功的告警框，并打开action中指定的页面（该页面的内容自行设置），若输入的用户名或密码不对，则弹出如下图所示的告警框，提示用户重新输入，并清空文本框中的内容。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单提交、重置事件的应用</title>
<style>input{font-family:Tahoma, Geneva, sans-serif;}fieldset{width:300px; height:150px;}form{text-align:center;}
</style>
<script>function $(id){return document.getElementById(id);}function submitTest(){if($("input1").value=="admin" && $("input2").value=="123"){alert("登录成功！"); return true;}else{alert("用户名或密码错误，请重新输入！");$("input1").value="";$("input2").value="";return false}}function resetTest(){alert("开始清空数据！");}
</script>
</head><body><form name="form1" action="loginindex.html" method="post" onSubmit="return submitTest()" onReset="resetTest()"><fieldset><legend>表单数据提交</legend><br><label>用户名：</label><input type="text" id="input1"><br><br><label>密&emsp;码：</label><input type="password" id="input2"><br><br><input type="submit" value="提交"><input type="reset" value="重置"></fieldset></form>
</body>
</html>

总结

    JavaScript是一种功能强大、使用简便的、具有安全性的客户端脚本语言。

    本章简要地介绍了JavaScript语言的历史和特点，详细讲解了JavaScript的标识符、变量、运算符和表达式、三种程序控制结构（包括顺序结构、分支结构和循环结构）及函数等相关知识。通过在HTML文档中嵌入JavaScript脚本语言，可以增强用户与网页之间的交互性，并在页面中实现各种特效，提高页面的观赏性。

希望你开心，希望你健康，希望你幸福，希望你点赞！

最后的最后，关注喵，关注喵，关注喵，佬佬会看到更多有趣的博客哦！！！

喵喵喵，你对我真的很重要！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/474584.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

485. Max Consecutive Ones(最大连续 1 的个数)

485. Max Consecutive Ones(最大连续 1 的个数)

问题描述 给定一个二进制数组 nums &#xff0c; 计算其中最大连续 1 的个数。 问题分析 因为nums中只有1与0两种字符&#xff0c;我们可以设计一个统计变量来统计某一段中1出现的次数&#xff0c;因为当1后面跟着一个0时意味着这一段1结束&#xff0c;由此可以实现统计1的数…
阅读更多...
『运维备忘录』之 CMD 命令详解

『运维备忘录』之 CMD 命令详解

运维人员不仅要熟悉操作系统、服务器、网络等只是&#xff0c;甚至对于开发相关的也要有所了解。很多运维工作者可能一时半会记不住那么多命令、代码、方法、原理或者用法等等。这里我将结合自身工作&#xff0c;持续给大家更新运维工作所需要接触到的知识点&#xff0c;希望大…
阅读更多...
陶建国教授谈中西方文化的差异与交融

陶建国教授谈中西方文化的差异与交融

龙年到来&#xff0c;这个春节里&#xff0c;“龙”字的英文翻译引发关注&#xff0c;冲上了热搜&#xff0c;网友发现&#xff0c;“龙”不再翻译为“dragon”&#xff0c;而是龙字的谐音“loong”。原来&#xff0c;在西方人的眼里&#xff0c;龙是凶猛的怪兽&#xff0c;具有…
阅读更多...
【递归】【后续遍历】【迭代】【队列】Leetcode 101 对称二叉树

【递归】【后续遍历】【迭代】【队列】Leetcode 101 对称二叉树

【递归】【后续遍历】Leetcode 101 对称二叉树 解法一&#xff1a; 递归&#xff1a;后序遍历 左右中解法二&#xff1a; 迭代法&#xff0c;用了单端队列 ---------------&#x1f388;&#x1f388;对称二叉树 题目链接&#x1f388;&#x1f388;------------------- 解法一…
阅读更多...
turn服务器debug

turn服务器debug

turn服务器正常能连通的调用堆栈 turn_port.cc AddRequestAuthInfo check 崩溃 有问题的turn msg type是259 request type 是3 用不了的turn 服务器turnmessage type 275
阅读更多...
Ubuntu学习笔记-Ubuntu搭建禅道开源版及基本使用

Ubuntu学习笔记-Ubuntu搭建禅道开源版及基本使用

文章目录 概述一、Ubuntu中安装1.1 复制下载安装包路径1.2 将安装包解压到ubuntu中1.3 启动服务1.4 设置开机自启动 二、禅道服务基本操作2.1 启动&#xff0c;停止&#xff0c;重启&#xff0c;查看服务状态2.2 开放端口2.3 访问和登录禅道 卜相机关 卜三命、相万生&#xff0…
阅读更多...
Qt实用技巧：QCustomPlot做北斗GPS显示绝对位置运动轨迹和相对位置运动轨迹图的时，使图按照输入点顺序连曲线

Qt实用技巧：QCustomPlot做北斗GPS显示绝对位置运动轨迹和相对位置运动轨迹图的时，使图按照输入点顺序连曲线

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/136131310 红胖子网络科技博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…
阅读更多...
左旋字符串解析

左旋字符串解析

题目 实现一个函数&#xff0c;可以左旋字符串中的k个字符。 例如&#xff1a; ABCD左旋一个字符得到BCDA ABCD左旋两个字符得到CDAB 法1&#xff1a;一个个移动 #include<stdio.h> #include<string.h>//把一个字符串s,左移time个字符 void leftRound(char* s…
阅读更多...
数据结构通讲

数据结构通讲

目录 集合源码详解 一、常见数据结构讲解 1. 线性数据结构 1.1 数组 1.2 队列 1.3 链表 1.3.1 单向链表 1.3.2 双向链表 1.4 栈 2. 非线性数据结构 2.1 树 2.2 二叉树 2.2.1 概念介绍 2.2.2 遍历操作 2.2.3 删除节点 2.2.4 查找局限性 2.2.5 AVL 2.3 2-3-4树 …
阅读更多...
【LeetCode: 589. N 叉树的前序遍历 + DFS】

【LeetCode: 589. N 叉树的前序遍历 + DFS】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…
阅读更多...
WordPress主题YIA移动端文章页的面包屑不显示怎么办？

WordPress主题YIA移动端文章页的面包屑不显示怎么办？

平时我们一般都会在文章页导航菜单下方显示面包屑&#xff0c;类似于“当前位置&#xff1a;boke112百科 WordPress 正文”。平时用浏览器调试站点的时候&#xff0c;在Edge浏览器的“切换设备仿真”中&#xff0c;不管是选择什么设备都会显示面包屑。具体如下图所示&#xf…
阅读更多...
掌握高性能SQL的34个秘诀多维度优化与全方位指南

掌握高性能SQL的34个秘诀多维度优化与全方位指南

掌握高性能SQL的34个秘诀&#x1f680;多维度优化与全方位指南 本篇文章从数据库表结构设计、索引、使用等多个维度总结出高性能SQL的34个秘诀&#xff0c;助你轻松掌握高性能SQL 表结构设计 字段类型越小越好 满足业务需求的同时字段类型越小越好 字段类型越小代表着记录占…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023