JavaScript 学习总结（1） — JavaScript 简介、基础语法
此篇文章对JavaScript的语法介绍，主要突出了JavaScript与Java语言的不同，所以阅读此文章者需要有一定的Java基础。
1. JavaScript 简介：
1995年，由于网景公司希望能在静态HTML页面上添加一些动态效果，于是叫Brendan Eich在两周之内设计出了JavaScript语言。看错，只用了10天时间。
JavaScript是一种基于对象和事件驱动的，并具有安全性能脚本语言，不需要编译，边解释边执行，所以在性能上比不上C/C++这样的编译型语言。
-
为什么学习JavaScript？
- 表单验证，减轻服务器压力
- 页面的动态交互
- 页面的动态效果
- 学习趋势
-
JavaScript的特点：
- 向HTML页面中添加交互行为
- 脚本语言，语法和Java类似
- 解析型语言，边执行边解释
-
JavaScript的组成部分：
- 1）ECMAScript（核心）：仅仅是一个描述，定义了脚本语言的所有属性、方法和对象。具体地，ECMAscript描述了以下内容： 语法、类型、语句、关键字、保留字、运算符、对象。每个浏览器都有它自己的 ECMAScript 接口的实现，然后这个实现又被扩展，包含了 DOM 和 BOM。
- 2）DOM（Document Object Model，文档对象模型）：HTML和XML的应用程序接口，将整个页面规划成由节点层级构成的文档。用 DOM API 可以轻松地删除、添加和替换节点。
- 3）BOM（Browser Object Model，浏览器对象模型）：可以对浏览器窗口进行访问和操作，使用BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。
2. JavaScript基础语法:
-
语法结构：
JavaScript的语法和Java语言类似，每个语句以
；结束，语句块用{...}，但JavaScript并不强制要求每个语句结尾加；，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上；。引擎自动添加；的情况下，程序的运行结果可能会与预期结果不同，所以在程序中建议所有语句都添
；。JavaScript通常写在
<script>中，将直接被浏览器执行。<script type="text/javascript"> <!- JavaScript语句； -> </script>有的网页中可省略
type="text/javascript"，在HTML5中可省略，HTML5默认为text/javascript。 -
语法规定：
-
代码区分大小写
-
变量、对象和函数的名称：
- JavaScript的关键字小写
- 内置对象大写字母开头
- 对象的名称通常小写
- 方法命名规范和Java相同
-
每条语句以分号结尾
-
-
网页中引入JavaScript的方式：
网页中以内JavaScript有三种方式，分别为：
-
1.使用
<script>标签，，将其写在<head>部分，其将直接被浏览器执行。<head> <script> alert("hello world"); </script> </head> -
2.通过外部JS文件，将JavaScript代码写在一个单独的JS文件中，然后在HTML中通过
<script src="****.js"></script>引入。（推荐使用）<head> <script src="1.JavaScript语法.js"></script </script> </head>/*1.JavaScript语法.js文档*/ console.log("hello world");把JS代码放入一个单独的
.js文件中更利于维护代码，并且多个页面可以各自引用同一份.js文件。可以在同一个页面中引入多个
.js文件，还可以在页面中多次编写<script> js代码... </script>，浏览器按照顺序依次执行。 -
3.直接在HTML标签中，通过属性
onclick="javascript:document.write('hello world')"。<body> <input type="button" value="弹框" onclick="javascript:document.write('hello world')"> </body>
-
-
JS的输出方式：
1）弹窗，浏览器事件
alert("hello world");2）网页显示，HTML语言，文档对象事件
document.write("hello world");3）控制台输出，可调试程序，推荐使用
console.log("hello world"); -
变量：
先声明和赋值，JavaScript中所有的变量都用关键字
var声明。var 变量名 = 变量值； 如：var width = 10； -
数据类型：
数据类型 含义 undefined 变量没有初始化，将被赋予值undefined null 表示一个空值，与undefined值相等 number 表示整数和浮点数 boolean true和false string 一组被引号（单引号或双引号）括起来的文本 注意：
number中有两个特殊的值：NaN：表示不是数值类型，当无法计算结果时用NaN表示。Infinity：表示无限大，当数值超过JavaScript的number所能表示的最大值时，就表示为Infinity。 -
运算符：
类型 运算符 算数运算符 + 、- 、 * 、 / 、 % 、 ++ 、 – 赋值运算符 = 、 += 、 -= 比较运算符 > 、 < 、>= 、 <= 、== 、== 、 === 、 !== 逻辑运算符 && 、 || 、 ！ 注意：JavaScript中有两个相等运算符== 和===，其比较原则不同：
==：会自动转换数据类型再比较，即先转换成同一类型后的值，再比较其值是否相等，结果往往出乎意料。
===：不会自动转换数据类型，如果数据类型不同，结果就不同。
所以在JavaScript中，不要使用== 比较，要使用===比较。
-
Typeof运算符：
typeof运算符用于检测变量的返回值。
变量 返回值 变量被声明，但未被赋值 undefined 用引号（单引号或双引号）来声明的字符串 string true或false boolean 整数或浮点数 number JavaScript中的对象、数组、或null object -
数组：
JavaScript的数组可以包括任意数据类型，如
[1,3.1415,null,false,"hello"]。-
创建数组：
var 数组名称 = new Array（size），其中Array为表示数组的关键字，size表示数组的长度。JavaScript中数组可以自动扩容。
-
访问数组：数组的元素可以通过索引来访问，格式为：
数组名[下标]。索引的起始值为0，arr[0]表示数组arr中的第一个元素。 -
数组中常用方法：
类别 名称 说明 属性 length 设置或返回数组中元素的数目 方法 join() 把数组的所有元素放入到一个字符串，通过一个个的分隔符进行分隔 方法 sort() 对数组进行排序 方法 push() 像数组末尾添加一个或更多元素，并返回新的长度 -
遍历数组：
<script> for(var i in arr){ console.log(arr[i]); } </script> -
案例：数组的创建及访问
<head> <meta charset="UTF-8"> <title>Title</title> <script> //创建数组 : new Array() var arr = new Array(5); //数组赋值 arr[0] = "apple"; arr[1] = "banana"; arr[2] = "pear"; arr[3] = "peach"; arr[4] = "Cherry"; arr[5] = "Kiwi"; arr[6] = "fool"; console.log(arr[0]); console.log(arr[5]); console.log(arr[6]); //自动扩容 </script> </head>结果：
-
-
String对象：
-
对象：JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成。
用一个
{...}表示一个对象，键值对以属性: 属性值形式申明，用,隔开。注意，最后一个键值对不需要在末尾加,，如果加了，有的浏览器（如低版本的IE）将报错。访问属性是通过
.操作符完成的。<script> var student ={ name:"小小"， age：18， sex："女" } </script><script> student.name; student.age; student.sex; </script> -
String对象：
字符串对象.方法名()，如:<script> var str = "i like Java"; var legth = str.length; //字符串的长度 </script> -
常用方法：
方法名 说明 charAt(index) 返回在指定位置的字符 indexOf(str,index) 查找某个指定的字符串在字符串中首次出现的位置 substring(index1,index2) 返回位于指定索引index1和index2之间的字符串，[index1,index2) split(str) 将字符串分割为字符串数组
-
-
数组与String：
数组与字符串的相互转换，以及数组的扩容，遍历数组
<head> <meta charset="UTF-8"> <title>Title</title> <script> var str = "6 2 7 4 5 xi 流"; //定义数组 var arr = new Array(5); //字符串转为数组，split arr = str.split(" "); console.log(arr); //重组数组为字符串，join var str2= arr.join("-"); console.log(str2); //6-2-7-4-5-xi-流 // //数组排序，默认升序 console.log(arr.sort()); // //向数组添加元素，push arr.push(88); console.log(arr) //检测返回值 console.log(typeof(arr)); //数组长度 console.log(str.length); //遍历数组 for(var i in arr){ console.log(arr[i]); } </script> </head>结果：
-
弹窗提示：
-
alert(“提示信息”);
-
prompt(“提示信息”，“输入框的默认颜色”)
<head> <meta charset="UTF-8"> <title>Title</title> <script> var num = prompt("请输入加数",""); var num2 = prompt("请输入被加数",""); //转换函数 num = parseInt(num); num2 = parseFloat(num2); console.log("和为:"+(num+num2)); </script> </head>结果为：
-
3. 程序调试：
-
Chrome开发人员工具
- 停止断点调试
- 单步调试
- 跳出当前函数
- 移除断点
-
alert()方法
-
案例：
<head> <script> var num = prompt("请输入一个数字",""); if(num > 5){ document.write("此数大于5"); }else{ document.write("此数小于5") } for(var i=0;i<num;i++){ document.write("<br/>"+i); } </script> </head>调试过程：
1）打开浏览器，单击右键，然后点击”审查元素“，点击sources打开此页面。
2）设置断点，可点击任意一行设置断点，然后点击运行程序，
3）单步调试，程序运行至断点处，点击单步调试进行一步一步运行程序
4. 函数
-
函数的定义：
类似于Java中的方法，是完成特定任务的代码语句块。格式为：
function 函数名(参数1,参数2，...){ 函数体： //JavaScript语句 [return 返回值] // 可有可无 } -
函数调用：
函数调用一般和表单元素的事件一起使用，调用格式为：
事件名 = “函数名（实参1，实参2，...）”; -
函数分类：
系统函数 和 自定义函数
-
常用的系统函数：
系统函数 含义 例子 parseInt(str) 将字符串转换成整型数字 parseInt(“88”)，将字符串“88"转换成整数88 parseFloat(str) 将字符串转换成浮点型数字 parseFloat(”3.14“)，将字符串“3.14"转换成浮点型3.14 isNaN 判断其参数是否为非数字 -
案例：自定义一个函数，并调用函数输出5次JavaScript
<head> <meta charset="UTF-8"> <title>Title</title> <script> function f(num) { for(var i=1;i<=num;i++){ document.write("javaScript"+"<br/>"); } } </script> </head> <body> <input type="button" value="点击" onclick="f(prompt('输入一个数',''))"> </body> -
变量的作用域：
局部变量：变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量。
全局变量：不在任何函数内定义的变量就具有全局作用域。实际上，JavaScript默认有一个全局对象
window，全局作用域的变量实际上被绑定到window的一个属性。<script> var cc = 'JavaScript'; alert(cc); // 'JavaScript' alert(window.cc); // 'JavaScript </script>
扫一扫
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
