网站建设与维护的案例,wordpress免费续ssl证书,调兵山 网站建设,做防水的网站有哪些希望你开心#xff0c;希望你健康#xff0c;希望你幸福#xff0c;希望你点赞#xff01; 最后的最后#xff0c;关注喵#xff0c;关注喵#xff0c;关注喵#xff0c;佬佬会看到更多有趣的博客哦#xff01;#xff01;#xff01; 喵喵喵#xff0c;你对我真的… 希望你开心希望你健康希望你幸福希望你点赞 最后的最后关注喵关注喵关注喵佬佬会看到更多有趣的博客哦 喵喵喵你对我真的很重要 目录
前言
数据类型
数据类型-字符型
数据类型-数值型
数据类型-布尔型
数据类型-其它类型
变量
转义字符
运算符和表达式
算术运算符和表达式
关系运算符和表达式
关系运算符和表达式
逻辑运算符和表达式
赋值运算符和表达式
位运算符和表达式
条件运算符和表达式
课后练习
网页标题事件处理程序返回值的应用
网页标题表单控件焦点、表单提交、重置事件的应用
网页标题用户登录验证
总结 前言 Web 前端开发工程师应掌握以下内容 理解 JavaScript 程序的概念与作用 掌握 JavaScript 标识符和变量的概念及使用方法 掌握 JavaScript 常用运算符和表达式概念 掌握 JavaScript 中顺序、分支、循环等 3 种程序控制结构语法 掌握 JavaScript 函数的定义方法并学会使用 学会综合运用 JavaScript 设计具有动态、交互功能的网页。 数据类型 数据类型是每一种计算机语言中的重要基础JavaScript中的数据类型可分为字符型、数值型、布尔型、Null、Undefined和对象六种类型。 数据类型-字符型 字符型数据又称为字符串由若干个字符组成并且用单引号或双引号封装起来如“你好”、‘你好’、“学习‘语言’”。 l在使用字符串的过程中需要注意单引号、双引号必须成对使用相互包含但不能交叉。 如“学习不是一件‘容易”的事件’(×交叉错误)。 数据类型-数值型 2.数值型是JavaScript中最基本的数据类型之一分为整型、浮点型、内部常量以及特殊值。 l 整型数值即整数例如 100 、 -3500 、 0 等都是整数。 整数表示方法有十进制表示、八进制和十六进制的方式表示 。 使用0打头的整数是八进制整数如017-035等都是合法的八进制整数。 使用0x后0X打头的整数是十六进制整数如0x160X3A89等都是合法的十六进制整数。 浮点数例如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,表示空,不是00是有值的。 5.Undefined变量创建后未赋值数字NaN字符串UndefinedBoolean:false 。 6.Object:对象也是JS的重要组成部分如date、window、document等在后面介绍。 数据类型之间可以通过函数进行转换。 转换函数如下 Number(value): 把值转换成数字整型或浮点数 String(value): 把值转换成字符串 Boolean(value): 把值转换成 Boolean 类型 变量 变量可以保存执行时变化的值的名字称为“变量”变量是存储信息的容器。 格式 var 变量名 [初值][,变量名[初值] …] var作用声明或创建变量。 具有良好编程习惯的程序员应该“先声明变量再使用”。例如 var userName ““ ; var x0y2,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 v1300,v2-100; var max (v1 v2) ? v1 : v2; //由于v1v2条件为真值所以将真值表达式v1的值赋给maxmax的值为300 ,比用if语句来得简单些。 课后练习
网页标题事件处理程序返回值的应用 网页标题事件处理程序返回值的应用录入如下代码熟悉提交事件处理程序返回值的使用 创建一个网页“simple.html”该网页的显示内容自定。在浏览器中打开“11-7.html”网页在文本框中输入姓名单击提交按钮则首先弹出警示框单击警示框的确定按钮之后即打开“simple.html”网页。若不输入任何值单击提交按钮则弹出警示框之后不会打开“simple.html”运行效果如下图所示 !doctype html
html
head
meta charsetutf-8title事件处理程序返回值的应用/titlescriptfunction showName(){if(document.form1.name1.value){alert(没有输入内容);return false;}else{alert(欢迎你document.form1.name1.value);return true;}}/script
/head
bodyh4事件处理程序返回值的应用/h4form nameform1 actionsimple.html onSubmitreturn showName();姓名input typetext namename1input typesubmit value提交/form
/body
/html网页标题表单控件焦点、表单提交、重置事件的应用 网页标题表单控件焦点、表单提交、重置事件的应用设计如下图所示表单当输入用户名的文本框获得焦点时文本框自动显示admin当该文本框失去焦点时文本框中的字体变为蓝色单击提交按钮后显示告警框具体显示信息如下图所示单击确定按钮后打开action中的页面。 单击重置按钮弹出如图所示的告警框 具体实现代码可参照下图所示 !doctype html html head meta charsetutf-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).valueadmin;} //表单控件获得焦点事件触发的功能 function loseFocus(){$(input1).style.color#00f; } //表单控件失去焦点事件触发的功能 /script /head body form nameform1 actionsimple.html methodpost onSubmitsubmitTest() onResetresetTest() fieldset legend表单数据提交/legend brlabel用户名/labelinput typetext idinput1 nameinput1 onFocusgetFocus(); onBlurloseFocus(); brbrlabel密emsp;码/labelinput typepassword idinput2 nameinput2 brbrinput typesubmit value提交 input typereset value重置 /fieldset /form /body /html 网页标题用户登录验证 网页标题用户登录验证对上题中的功能进行修改仅当输入用户名admin和密码123时单击提交按钮时显示登录成功的告警框并打开action中指定的页面该页面的内容自行设置若输入的用户名或密码不对则弹出如下图所示的告警框提示用户重新输入并清空文本框中的内容。 !doctype html
html
head
meta charsetutf-8
title表单提交、重置事件的应用/title
styleinput{font-family:Tahoma, Geneva, sans-serif;}fieldset{width:300px; height:150px;}form{text-align:center;}
/style
scriptfunction $(id){return document.getElementById(id);}function submitTest(){if($(input1).valueadmin $(input2).value123){alert(登录成功); return true;}else{alert(用户名或密码错误请重新输入);$(input1).value;$(input2).value;return false}}function resetTest(){alert(开始清空数据);}
/script
/headbodyform nameform1 actionloginindex.html methodpost onSubmitreturn submitTest() onResetresetTest()fieldsetlegend表单数据提交/legendbrlabel用户名/labelinput typetext idinput1brbrlabel密emsp;码/labelinput typepassword idinput2brbrinput typesubmit value提交input typereset value重置/fieldset/form
/body
/html总结 JavaScript是一种功能强大、使用简便的、具有安全性的客户端脚本语言。 本章简要地介绍了JavaScript语言的历史和特点详细讲解了JavaScript的标识符、变量、运算符和表达式、三种程序控制结构包括顺序结构、分支结构和循环结构及函数等相关知识。通过在HTML文档中嵌入JavaScript脚本语言可以增强用户与网页之间的交互性并在页面中实现各种特效提高页面的观赏性。 希望你开心希望你健康希望你幸福希望你点赞 最后的最后关注喵关注喵关注喵佬佬会看到更多有趣的博客哦 喵喵喵你对我真的很重要
