【JavaScript学习系列】JavaScript基础
- JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
- JavaScript特点
- 向HTML页面中添加交互行为
- 脚本语言,语法和Java类似
- 解释性语言,边执行边解释
- JavaScript组成
- ECMAScript、DOM、BOM
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>
<!--
<script>…</script>可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可
--!>
JavaScript的执行原理
- 浏览器输入 ——》浏览器发送请求包含JavaScript的请求页面 ——》应用服务器来解析HTML标签和JavaScript ——》从服务器端下载含JavaScript的页面 ——》返回响应到浏览器
网页中引用JavaScript的方式
使用
JavaScript核心语法
变量
先声明变量再赋值
var width; //var —— 用于声明变量的关键字 width = 5; //width —— 变量名
/* 同时声明和赋值变量 */ var catName = "皮皮"; var x, y, z = 10;
不声明直接赋值
width = 5; //变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用
数据类型
undefined
var width; //变量width没有初始值,将被赋予值undefined
null:表示一个空值,与undefined值相等
number
var num = 23; //整数 var num = 23.0; //浮点数
/* boolean:true和false string */ //一组被引号(单引号或双引号)括起来的文本 var string1 = "This is a String";
//注意:相加时需要先praseInt转换才能相加,否则为字符串拼接 var num1 = 1; var num2 = 3; var result; result = num1 + num2; //为字符串拼接,result = 13 result = parseInt(num1) + parseInt(num2); //数字相加,result = 4
typeof运算符
- typeof检测变量的返回值
- typeof运算符返回值如下:
- undefined:变量被声明后,但未被赋值
- string:用单引号或双引号来声明的字符串
- boolean:true或false
- number:整数或浮点数
- object:javascript中的对象、数组和null
String对象
属性
字符串对象.length
var str = “this is JavaScript”;
var strLength = str.length; //长度是18
```
- 方法
字符串对象.方法名();
方法名称 | 说明 |
---|---|
charAt (index) | 返回在指定位置的字符 |
indexOf (str, index) | 查找某个指定的字符串在字符串中首次出现的位置 |
substring (index1, index2) | 返回位于指定索引index1和index2之间的字符串(左闭右开) |
split (str) | 将字符串分割为字符串数组 |
数组
创建数组
var 数组名称 = new Array(size); //Array:表示数组的关键字 //size:表示数组中可存放的元素总数
为数据元素赋值
var fruit = new Array("apple", "orange", "peach", "banana"); //或数组名[下标] var fruit = new Array(4); fruit[0] = "apple"; fruit[1] = "orange"; fruit[2] = "peach"; fruit[3] = "banana";
- 数组的常用属性和方法
类别 | 名称 | 描述 |
---|---|---|
属性 | length() | 设置或返回数组中元素的数目 |
方法 | join () | 把数组的所有元素放入一个字符串,通过一个的分隔符进行分割 |
sort () | 对数组排序 | |
push () | 向数组末尾添加一个或更多元素,并返回新的长度 |
运算符号
类型 | 运算符 |
---|---|
算术运算符 | + - * / % ++ – |
赋值运算符 | = += -= |
比较运算符 | > < >= <= == != === !== |
逻辑运算符 | && || ! |
逻辑控制语句
if条件语句
if (条件) { //JavaScript代码; } else { //JavaScript代码; }
switch多分支语句
switch (表达式) { case 常量1: JavaScript语句1; break; case 常量2: JavaScript语句2; break; ... default: JavaScript语句3; }
/* for、while循环语句 */ for (初始化;条件;增量) { JavaScript代码; }
while (条件)
{
JavaScript代码;
}/* for-in */ //遍历数组 var fruit = ["apple", "orange", "peach", "banana"]; for (var i in fruit) { document.write(fruit[i] + "<br/>"); }
循环中断
- break
<script type="text/javascript"> var i=0; for(i=0; i<=5; i++){ if (i==3) { break; } document.write("这个数字是:"+i+"<br/>"); } </script>
- continue
<script type="text/javascript"> var i=0; for(i=0;i<=5;i++){ if(i==3){ continue; } document.write("这个数字是:"+i+"<br/>"); } </script>
注释
单行注释以 // 开始,以行末结束
alert("恭喜你!注册会员成功"); //在页面上弹出注册会员成功的提示框
// 多行注释以 /* 开始,以 */ 结束,符号 /*…… */ 指示中间的语句是该程序中的注释 /* 使用for循环运行“document.write("<h3>Hello World</h3>");”5次 使用document.write在页面上输出“Hello World” */
常用的输入/输出
alert ()
alert("提示信息");
prompt ()
prompt("提示信息", "输入框的默认信息"); prompt("请输入你喜欢的颜色","红色"); prompt("请输入你喜欢的颜色","");
语法约定
- 代码区分大小写
- 变量、对象和函数的名称
- 分号
程序调试
- Chrome开发人员工具
- 停止断点调试
- 单步调试,不进入函数体内部
- 单步调试,进入函数体内部
- 跳出当前函数
- 禁用所有的断点,不做任何调试
- alert () 方法
函数
- 函数的含义:类似于Java中的方法,是完成特定任务的代码语句块
- 使用更简单:不用定义属于某个类,直接使用
- 函数分类:系统函数和自定义函数
常用系统函数
- parseInt (“字符串”)
- 将字符串转换为整型数字
- 如: parseInt (“86”)将字符串“86“转换为整型值86
- parseFloat(“字符串”)
- 将字符串转换为浮点型数字
- 如: parseFloat(“34.45”)将字符串“34.45“转换为浮点值34.45
- isNaN()
- 用于检查其参数是否是非数字
自定义函数
定义函数
function 函数名(参数1, 参数2, 参数3...) { //Javascript语句 [return 返回值] }
调用函数
函数调用一般和表单元素的事件一起使用,调用格式
事件名 = "函数名()";
调用无参函数
- 调用无参函数,输出5次“欢迎学习JavaScript”
function study() {
for (var i = 0; i < 5; i++) {
document.write("<h4>欢迎学习JavaScript</h4>");
}
}
//单击此按钮时,调用函数study(),执行函数体中的代码
<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>");
}
}
//单击此按钮时,调用函数study (count),执行函数体中的代码
<input name = "btn" type = "button" value = "请输入显示欢迎学习JavaScript的次数" onclick = "study(prompt('请输入显示欢迎学习JavaScript的次数'))"/>
变量的作用域
- 全局变量
- 局部变量
事件
名称 | 说明 |
---|---|
onload | 一个页面或一幅图像完成加载 |
onclick | 鼠标单击某个对象 |
onmouseover | 鼠标指导移到某元素上 |
onkeydown | 某个键盘按键被按下 |
onchange | 域的内容被改变 |