JavaScript
文章目录
- JavaScript
- 第一章，JavaScript基础
- 一，什么是JavaScript
- 二，JavaScript的应用
- 三，JavaScript的核心语法
- 四，JavaScript函数
- 五，变量作用域
- 六，时间
第一章，JavaScript基础
一，什么是JavaScript
-
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
-
JavaScript特点
- 向HTML页面中添加交互行为
- 脚本语言，语法和Java类似
- 解释性语言，边执行边解释
-
JavaScript组成
组成部分 作用 ECMA Script 构成了JS核心的语法基础 BOM Browser Object Model 浏览器对象模型，用来操作浏览器上的对象 DOM Document Object Model 文档对象模型，用来操作网页中的元素（标签） -
JavaScript的基本结构
-
<script type="text/javascript"><!—JavaScript 语句;—> </script >
-
二，JavaScript的应用
-
如下代码：
-
…… <title>初学JavaScript</title> </head> <body> <script type="text/javascript">document.write("初学JavaScript");document.write("<h1>Hello，JavaScript</h1>"); </script> </body> </html> -
注意：****可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可
-
-
JavaScript的执行原理
-
网页中引用JavaScript的方式
-
使用
-
三，JavaScript的核心语法
-
核心语法-----变量
//先声明变量再赋值 var width; //var － 用于声明变量的关键字 width = 5; //width － 变量名//同时声明和赋值变量 var catName= "皮皮"; var x, y, z = 10;//不声明直接赋值 width=5;//注：变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用 -
核心语法-----数据类型
undefined:var width;变量width没有初始值，将被赋予值undefinednull:表示一个空值，与undefined值相等number:var iNum=23; //整数 ;var iNum=23.0; //浮点数boolean:true和falsestring:一组被引号（单引号或双引号）括起来的文本,var string1="This is a string"; -
核心语法-----typeof运算符
- typeof检测变量的返回值
- typeof运算符返回值如下
- undefined：变量被声明后，但未被赋值
- string：用单引号或双引号来声明的字符串
- boolean：true或false
- number：整数或浮点数
- object：javascript中的对象、数组和null
-
核心语法-----String对象
-
属性
-
字符串对象.length
-
var str="this is JavaScript"; var strLength=str.length; //长度是18 -
方法
-
字符串对象.方法名();
-
-
-
核心语法-----数组
-
创建数组
-
var 数组名称 = new Array(size); //Array:表示数组的关键字 //size:表示数组中可存放的元素总数 -
为数组元素赋值
-
访问数组
数组名[下标] (“apple”, “orange”, " peach",“banana”)；
-
-
数组的常用属性和方法
-
核心算法-----运算符号
运算符 说明 算数运算符 + 、-、*、/、%、++、–赋值运算符 = 、+=、-=、*=、/=、%=比较运算符 >、>=、<、<=、==、===(全等于,仅js)、 !=逻辑运算符 && 、三元运算符 关系表达式 ? 值1 : 值2; //算数运算符 //在js中数值可与字符串进行数学运算，底层实现隐式转换。<script type="text/javascript">let str = "10";let num = 20;console.log(str + num); // 1020console.log(str - num); // -10 console.log(str * num); // 200console.log(str / num); // 0.5 </script>var a = 3; var b = 4; var c = "hello";alert(a/b);//js相除可以得到小数alert(typeof(a+c));// number类与字符串类型相加，字符串拼接var d = 6; var f = '4'; alert(d+f);//拼接的64var a1 = 3; var a2 = "4"; alert(a1-a2);//-1 如果字符串与number类型进行相减，默认把字符串的数字转成number类型var b1 = 3; var b2 = "abc"; alert(b1-b2);//NaN not a number ;//如果数值与boolean类型为的数据，进行做运算时，会将boolean数据转换成数值。true转为1，false转为0 var bo1 = true; var bo2 = false; alert(a+bo1);//4 alert(a+bo2);//3 //注:字符串类型与数字类型的运算中，只有相加会进行字符串拼接，而减、乘、除运算中，字符串中的数值可与字符串进行数学运算//比较运算符 /* ==、===（全等于）之间的区别: == : 只比较内容是否相同 根本不比较数据类型 ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false */<script type="text/javascript">let num = 100;let str = "100";console.log(num == str); // trueconsole.log(num === str);// false </script>//三目（元）运算符 /* 格式： 表达式 ？ 结果1 ： 结果2 ；如果表达式运算的结果是true,把结果1返回 如果表达式运算的结果是false,把结果2返回 *///定义一个变量为3 let a = 3;//定义一个变量为4 let b = 4;//页面输出 //如果满足的 非0 ，非null， 非undefined 为true //如果满足的 是0 ，是null , 是undefined 为false document.write(a>b ? a : b); -
核心语法-----逻辑控制语句
-
js中对各种数据类型作为布尔值有以下特点：
类型 用法 boolean true为真、false为假 number 非0为true string 除了空字符串(“”)，其他都是true null&undefined 都是false 对象 所有对象都是true -
if语句
-
<script type="text/javascript">if (条件表达式) {代码块;} else if(条件表达式){代码块;} else {代码块;} </script> -
for语句
-
//普通for循环 for(初始化; 条件; 增量){JavaScript代码; }while(条件){JavaScript代码; }//增强for循环 var fruit=[ "apple", "orange", "peach","banana"]; for(var i in fruit){document.write(fruit[i]+"<br/>"); }//索引for循环 for(let 变量 in 对象){需要执行的代码; } /* 后两个的区别： 1. forin可以遍历对象,forof不能遍历对象 2. forin遍历出数组中的索引,forof遍历出数组中的元素 */ -
switch语句
-
switch (表达式) { case 常量1 : JavaScript语句1;break;case 常量2 : JavaScript语句2;break;...default : JavaScript语句3; }
-
-
核心语法-----循环中断
-
break
-
<script type="text/javascript"> var i=0; for(i=0;i<=5;i++){if(i==3){break;}document.write("这个数字是："+i+"<br/>"); } </script> /* 输出： 这个数字是：0 这个数字是：1 这个数字是：2 */<script type="text/javascript"> var i=0; for(i=0;i<=5;i++){if(i==3){continue;}document.write("这个数字是："+i+"<br/>"); } </script>/* 输出： 这个数字是：0 这个数字是：1 这个数字是：2 这个数字是：3 这个数字是：4 这个数字是：5 */
-
-
核心语法-----注释
-
单行注释以 // 开始，以行末结束
-
alert("恭喜你！注册会员成功"); //在页同上弹出注册会员成功的提示框 -
多行注释以 /* 开始，以 / 结束，符号 /…… */ 指示中间的语句是该程序中的注释
-
/* 使用for循环运行“document.write("<h3>Hello World</h3>");”5次 使用document.write在页面上输出“Hello World” */
-
-
核心语法-----常用的输入/输出
-
alert()
-
alert("提示信息"); -
prompt()
-
prompt("提示信息", "输入框的默认信息"); prompt("请输入你喜欢的颜色","红色"); prompt("请输入你喜欢的颜色","");
-
-
核心语法-----语法约定
- 代码区分大小写
- 变量、对象和函数的名称
- 分号
四，JavaScript函数
-
什么是函数
- 函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
- 使用更简单：不用定义属于某个类，直接使用
- 函数分类：系统函数和自定义函数
-
常用系统函数
- parseInt (“字符串”)
- 将字符串转换为整型数字
- 如: parseInt (“86”)将字符串“86“转换为整型值86
- parseFloat(“字符串”)
- 将字符串转换为浮点型数字
- 如: parseFloat(“34.45”)将字符串“34.45“转换为浮点值34.45
- isNaN()用于检查其参数是否是非数字
- parseInt (“字符串”)
-
自定义函数
-
定义函数
-
function 函数名(参数1,参数2,参数3,…){//JavaScript语句[return 返回值] } /* 可以定义为无参函数或者有参函数 return返回值可有可无 */
-
-
函数的调用
-
函数调用一般和表单元素的事件一起使用，调用格式
-
事件名＝ "函数名( )" ; -
调用无参函数
-
//调用无参函数，输出5次“欢迎学习JavaScript” function study( ){for(var i=0;i<5;i++){document.write("<h4>欢迎学习JavaScript</h4>");}}<input name="btn" type="button"value="显示5次欢迎学习JavaScript" onclick="study( )" /> -
调用有参函数
-
//根据输入的次数，显示“欢迎学习JavaScript“ function study(count){for(var i=0;i<count;i++){document.write("<h4>欢迎学习JavaScript</h4>");}} <input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数"onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />
-
-
总结：
- 方法定义时，形参的类型不用写,返回值类型可写可不写
- 如果定义名称相同的方法，会被覆盖，js中没有方法的重载的概念
- 在JS中，方法的调用只与方法的名称有关，和参数列表无关
- 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
- JS函数中也可以有匿名函数
五，变量作用域
-
全局变量
-
常常定义在函数外部，拥有全局作用域，即在 JavaScript 代码的任何地方都可以访问。
-
第一种声明方式：使用var关键字+变量名在函数外部声明就是全局变量
-
var bianliang = "全局变量"; -
第二种声明方式：没有使用var关键字声明，直接给变量名赋值，不管是在函数内部还是外部都是全局变量
-
<script>text = "全局变量";function bl() {text1 = "我也是全局变量";var text2 = "我是局部变量";console.log(text2); //局部变量只能在函数中使用}bl() //结果：我是局部变量console.log(text); //结果：全局变量console.log(text1); //结果：我也是全局变量//console.log(text2); //局部变量，在函数外使用会报错 </script> -
第三种声明方式：使用window全局对象来声明，全局对象的属性对应也是全局变量
-
window.test3 = 'window全局对象声明全局变量';console.log(test3);//结果：window全局对象声明全局变量
-
-
局部变量
-
定义在函数内部，只能在函数中使用的变量，作用范围是从函数开始到结尾，即在｛｝里。
-
<script>function bl() {text1 = "我也是全局变量";//没有使用var 为全局变量var text2 = "我是局部变量";console.log(text2); //局部变量只能在函数中使用} </script>
-
六，时间
