[JavaScript-1] JavaScript基础 悠悠 2022-11-26 05:59 209阅读 0赞 ## 一、JavaScrip介绍 ## ### 1. JavaScript的定义 ### JavaScript是运行在浏览器端的脚步语言, 是由浏览器解释执行的, 简称js, 它能够让网页和用户有交互功能, 增加良好的用户体验效果。 **前端开发三大块** 1、HTML:负责网页结构 2、CSS:负责网页样式 3、JavaScript:负责网页行为, 比如:网页与用户的交互效果 ## 二、JavaScript使用 ## ### 1. 行内式(主要用于事件) ### <input type="button" name="" onclick="alert('ok!');"> ### 2. 内嵌式 ### <script type="text/javascript"> alert('ok!'); </script> ### 3. 外链式 ### <script type="text/javascript" src="js/index.js"></script> ## 三、变量和数据类型 ## ### 1. 定义变量 ### JavaScript 是一种弱类型语言,也就是说不需要指定变量的类型,JavaScript的变量类型由它的值来决定, 定义变量需要用关键字 ‘var’, 一条JavaScript语句应该以“;”结尾 **定义变量的语法格式:** var 变量名 = 值; var iNum = 123; var sTr = 'asd'; //同时定义多个变量可以用","隔开,公用一个‘var’关键字 var iNum = 45,sTr='qwe',sCount='68'; ### 2. JavaScript注释 ### JavaScript的注释分为单行注释(//注释内容)和多行注释(/*多行注释*/) <script type="text/javascript"> // 单行注释 var iNum = 123; /* 多行注释 1、... 2、... */ var sTr = 'abc123'; </script> ### 3. 数据类型 ### js中有六种数据类型,包括五种基本数据类型和一种复杂数据类型(object)。 5种基本数据类型: 1、number 数字类型 2、string 字符串类型 3、boolean 布尔类型 true 或 false 4、undefined undefined类型,变量声明未初始化,它的值就是undefined 5、null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null 1种复合类型: 1、object 后面的**数组、函数和JavaScript对象**都属于复合类型 //1.1 数字 number var iOne = 10.1; //1.2 字符串 string var sStr = '1234'; //1.3 布尔 boolean; var bIsTrue = false; //1.4 未定义 undefined var unData; //1.5 null 表示空对象 var nullData = null; //1.6 object 表示对象类型 var oObj = { name:"隔壁老王", age:88 } // 获取变量的类型 var type = typeof(oObj); alert(type); // 获取对象的name属性 alert(oObj.name); ### 4. 变量命名规范 ### 1、区分大小写 2、第一个字符必须是字母、下划线(\_)或者美元符号($) 3、其他字符可以是字母、下划线、美元符或数字 ### 5. 匈牙利命名风格 ### 对象o Object 比如:oDiv 数组a Array 比如:aItems 字符串s String 比如:sUserName 整数i Integer 比如:iItemCount 布尔值b Boolean 比如:bIsComplete 浮点数f Float 比如:fPrice 函数fn Function 比如:fnHandler ## 四、函数定义和调用 ## ### 1. 函数定义 ### 函数就是可以**重复使用的代码块**, 使用关键字 **function** 定义函数。 <script type="text/javascript"> // 函数定义 function fnAlert(){ alert('hello!'); } </script> ### 2. 函数调用 ### 函数调用就是**函数名加小括号**,比如:函数名(参数\[参数可选\]) <script type="text/javascript"> // 函数定义 function fnAlert(){ alert('hello!'); } // 函数调用 fnAlert(); </script> ### 3. 定义有参数有返回值的函数 ### 定义函数时,函数如果有参数,**参数放到小括号里面**,函数如果有返回值,返回值通过 **return** 关键字来返回 <script type="text/javascript"> function fnAdd(iNum01,iNum02){ var iRs = iNum01 + iNum02; return iRs; alert('here!'); } var iCount = fnAdd(3,4); alert(iCount); //弹出7 </script> **函数中’return’关键字的作用:** 1、返回函数中的值 2、执行完return函数执行结束 ## 五、变量作用域 ## ### 1. 变量作用域的介绍 ### 变量作用域就是变量的使用范围,变量分为: * 局部变量 * 全局变量 ### 2. 局部变量 ### 局部变量就是在函数内使用的变量,只能在函数内部使用。 <script type="text/javascript"> function myalert() { // 定义局部变量 var b = 23; alert(b); } myalert(); // 弹出23 alert(b); // 函数外使用出错 </script> ### 3. 全局变量 ### 全局变量就是在函数外定义的变量,可以在不同函数内使用。 <script type="text/javascript"> // 定义全局变量 var a = 12; function myalert() { // 修改全局变量 a++; } myalert(); alert(a); // 弹出13 </script> ## 六、 条件语句 ## ### 1. 条件语句的介绍 ### 条件语句就是通过条件来控制程序的走向 ### 2. 条件语句语法 ### 1. if 语句 - 只有当指定条件为 true 时,使用该语句来执行代码 2. if…else 语句 - 当条件为 true 时执行代码,当条件为 false 时执行其他代码 3. if…else if…else 语句 - 使用该语句来判断多条件,执行条件成立的语句 ### 3. 比较运算符 ### 假如 x = 5, 查看比较后的结果: <table> <thead> <tr> <th align="left">比较运算符</th> <th align="left">描述</th> <th align="left">例子</th> </tr> </thead> <tbody> <tr> <td align="left">==</td> <td align="left">等于</td> <td align="left">x == 8 为 false</td> </tr> <tr> <td align="left">===</td> <td align="left">全等(值和类型)</td> <td align="left">x === 5 为 true; x === “5” 为 false</td> </tr> <tr> <td align="left">!=</td> <td align="left">不等于</td> <td align="left">x != 8 为 true</td> </tr> <tr> <td align="left">></td> <td align="left">大于</td> <td align="left">x > 8 为 false</td> </tr> <tr> <td align="left"><</td> <td align="left">小于</td> <td align="left">x < 8 为 true</td> </tr> <tr> <td align="left">>=</td> <td align="left">大于或等于</td> <td align="left">x >= 8 为 false</td> </tr> <tr> <td align="left"><=</td> <td align="left">小于或等于</td> <td align="left">x <= 8 为 true</td> </tr> </tbody> </table> **比较运算符示例代码:** var iNum01 = 12; var sNum01 = '12'; if(iNum01==12){ alert('相等!'); } else{ alert('不相等!') } // "==" 符号默认会将符号两边的变量转换成数字再进行对比,这个叫做隐式转换 if(sNum01==12){ alert('相等!'); } else{ alert('不相等!') } // "===" 符号不会转换符号两边的数据类型 if(sNum01===12){ alert('相等!'); } else{ alert('不相等!') } // 多条件判断 var sFruit = "苹果"; if (sFruit == "苹果") { alert("您选择的水果是苹果"); } else if (sFruit == "鸭梨") { alert("您选择的水果是鸭梨"); } else { alert("对不起,您选择的水果不存在!") } ### 4. 逻辑运算符 ### 假如 x=6, y=3, 查看比较后的结果: <table> <thead> <tr> <th align="left">比较运算符</th> <th align="left">描述</th> <th align="left">例子</th> </tr> </thead> <tbody> <tr> <td align="left">&&</td> <td align="left">and</td> <td align="left">(x < 10 && y > 1) 为 true</td> </tr> <tr> <td align="left">||</td> <td align="left">or</td> <td align="left">(x == 5 || y==5) 为 false</td> </tr> <tr> <td align="left">!</td> <td align="left">not</td> <td align="left">!(x==y) 为 true</td> </tr> </tbody> </table> **逻辑运算符示例代码:** var x = 6; var y = 3; if(x < 10 && y > 1){ alert('都大于'); } else{ alert('至少有一个不大于'); } if(x > 5 || y > 7 ){ alert('至少有一个大于'); } else{ alert('都不大于'); } if(!(x == y)){ alert('等于') } else{ alert('不等于') }
还没有评论,来说两句吧...