第一章:JavaScript基础
为什么要学JavaScript
1:表单验证 2:页面动态效果
什么是JavaScript
JavaScript是一种基于对象和事件驱动的、跨平台的、并具有安全性能的脚本语言
JavaScript特点
1:向HTML页面中添加交互行为2:脚本语言,语法和Java类似3:解释性语言,边执行边解释
JavaScript组成
ECMAScript(核心):JavaScript的核心,描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义),ECMAScript是一套标准,定义了一种语言(比如JS)是什么样子。BOM(浏览器对象模型):对浏览器窗口进行访问和操作DOM(文档对象模型):DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。
JavaScript的基本结构
语法:
<script type="text/javascript">
<!—
JavaScript语句;
—>
</script>
备注:有的网页中用缺省type="text/Javascript",这种写法是正确的,因为HTML5中可省略type属性,HTML5默认为是text/Javascript。
JavaScript的简单应用
<title>初学JavaScript</title>
</head>
<body>
<script type="text/javascript">
document.write("初学JavaScript");
document.write("<h1>Hello,JavaScript</h1>");
</script>
</body>
</html>
注意: 1:<script>…</script>可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存中即可
2:document.write()方法可以向HTML输出流中插入你传入的内容,浏览器会按着HTML元素依次顺序依次解析它们,并显示出来。
需要注意的是,如果在文档加载完成后(即HTML输出已完成),再使用document.write()方法来要求浏览器来解析你的内容
则浏览器就会重写整个document,导致最后的这个document.write()方法输出的内容会覆盖之前所有的内容。
网页中引用JavaScript的方式
1:使用<script>标签:例如上面例子:JavaScript的简单应用2:外部JS文件:在外部创建js文件,然后Html页面引入<script type="text/javascript" src="js/index.js" ></script>3:直接在HTML标签中:<input name="btn" type="button" value="弹出消息框" οnclick="javascript:alert('欢迎你');"/>
JavaScript核心语法
变量 数据类型 数组 运算符号 控制语句 注释 输入/输出 语法约定
核心语法—变量
先声明变量再赋值var width; var:用于声明变量的关键字width = 5; width:变量名同时声明和赋值变量var name="皮皮";var x, y, z = 10;注意:JavaScript区分大小写,特别是变量的命名、语句关键字等
核心语法—数据类型
undefined:var width;变量width没有初始值,将被赋予值undefinednull:表示一个空值,与undefined值相等number:var iNum=23; //整数var iNum=23.0; //浮点数boolean:true和falseString:一组被引号(单或双引号)括起来的文本var string="This is JavaScript";
核心语法— typeof运算符
typeof:检测变量的数据类型typeof运算符的返回值如下:undefined:变量被声明但还未被赋值String:用单引号或双引号来声明的字符串boolean:true或falsenumber:整数或浮点数object:javascript中的对象、数组和null
核心语法—String对象
属性:字符串对象.length方法:字符串对象.方法名();String对象方法如下表:
方法名称 说 明 charAt(index) 返回在指定位置的字符 indexOf(str) 查找指定字符串在原字符串中首次出现的位置 substring(index1,index2) 返回位于指定索引 index1和index2之间的字符串(包括index1但不包括index2对应的字符) split(str) 将字符串分割为字符串数组
核心语法—数组
创建数组:var 数组名称 = new Array(length);注意:new:数组的关键字length:表示数组中可存放的元素总数数组名[下标]来访问数组元素数组的常用属性和方法下表:
类别 名称 描 述 属性 length 设置或返回数组中元素的个数 方法 join( ) 把数组的所有元素组合为一个字符串,通过一个分隔符进行分隔 方法 sort() 对数组排序 方法 push() 向数组末尾添加一个或多个元素,并返回新的长度
核心语法—运算符号
类型 运算符 算术运算符 + - * / % ++ — 赋值运算符 = += -= 比较运算符 > < >= <= == != === !== 逻辑运算符 && || ! ===与==的区别:1、==(等于):只比较表面值,如“2”和2 相等2、===(绝对等于):同时比较表面值和数据类型,所以“2”和2不相等;
核心语法—逻辑控制语句
if条件语句switch多分支语句for、while循环语句for-in示例:var fruit=[ "apple", "orange", "peach","banana"];for(var i in fruit){document.write(fruit[i]+"<br/>");}
核心语法—循环中断
break:跳出此循环 continue:跳出本次循环,进入下一次循环.
核心语法—注释
单行注释: 以 // 开始,以行末结束多行注释: /* …… */ ,表示其中的语句是该程序中的注释
核心语法—常用的输入/输出
警告对话框:alert(“警告信息");提示对话框:prompt("提示信息", "输入框的默认信息");
核心语法—语法约定
代码区分大小写变量、对象和函数的名称分号
什么是函数
函数的含义:类似于Java中的方法,是一个能够完成特定任务/功能的代码块使用更简单:不需要定义函数属于某个类,直接使用即可函数的分类:系统函数和自定义函数
常用系统函数
parseInt ("字符串")将字符串转换为整型数字如: parseInt ("86")将字符串“86“转换为整型值86parseFloat("字符串")将字符串转换为浮点型数字如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45isNaN()用于检查其参数是否是非数字
自定义函数
有参/无参函数:
语法:
function 函数名(参数1,参数2,参数3,…){
//JavaScript语句
[return 返回值] //可有可无
}
调用函数
函数调用一般和表单元素的事件一起使用,调用格式:
语法:
事件名= "函数名( )";
1:调用无参函数示例:
<input name="btn" type="button" value="显示5次js" onclick="study( )" />
//单击此按钮时,调用函数study( ),执行函数体中的代码
function study( ){
for(var i=0;i<5;i++){
document.write("<h4>js</h4>");
}
}
2:调用有参函数示例:
<input name="btn" type="button" value="请输入显示欢迎学习js的次数"
onclick="study(prompt('请输入显示欢迎学习js的次数:',''))" />
//单击此按钮时,调用函数study (count),执行函数体中的代码
function study(count){
for(var i=0;i<count;i++){
document.write("<h4>欢迎学习js</h4>");
}
}
变量的作用域
全局变量的作用域是全局性的,即在整个 Javascript 程序中,全局变量作用处处都存在。定义在 "script" 块中,在 "function" 函数外。局部变量的作用域是局部性的,在函数内部或函数参数时定义,作用范围是从函数开始到结尾,即在{}里。
什么是事件驱动
函数:函数被声明后 不会执行绑定到元素上后 不会执行触发事件后 执行
常用事件
名称 | 说明 |
---|---|
onload | 当一个页面或一幅图像完成加载时 |
onclick | 当鼠标单击某个对象时 |
onmouseover | 当鼠标移到某个元素上时 |
onkeydown | 当某个键盘按键被按下时 |
onchange | 当域的内容被改变时 |
JavaScript基础总结
JavaScript的组成和基本结构JavaScript基本结构和在网页中引入JavaScript核心语法:变量的声明和赋值数据类型数组运算符逻辑控制语句注释语法约定程序调试:Chrome开发工具和alert函数:常用系统函数自定义函数变量的作用域事件