什么是JavaScript
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
JavaScript特点
向HTML页面中添加交互行为
脚本语言,语法和Java类似
解释性于洋,碧昂执行边解释
JavaScript组成
JavaScript | ||
ECMAScript | DOM | BOM |
ECMAScript:国际认可的,标准的脚本语言规范
DOM:文档对象模型 页面浏览器解析
BOM:浏览器对象模型
JavaScript的基本结构
语法
<script type=”text/javascript”>
Document.write(“初学JavaScript”);
</script>
JavaScript的执行原理
浏览器输入—发送请求(包含JavaScript的请求页)—经过服务器 (应用服务器)—返回相应(从服务器端下载含JavaScript的叶妙)—解析HTML标签和JavaScript
网页中引用JavaScript的方式
使用<script>标签
外部JS文件
<script type=”text/javascript” src=”js文件路径”><script>
直接在HTML标签中
<input name=”btn” type=”button” value=”弹出消息框”
οnclick=”javascript(“欢迎你”)”;/>
JavaScript核心语法
核心语法:变量、数据类型、数组、运算符号、控制语句、注释、输入/输出、约定语法
核心语法—变量
先声明变量在赋值
var width; var—用于声明变量的关键字
width = 5; width—变量名
同时声明和赋值变量
var catName=”皮皮”;
var x,y,z=10;
不声明直接赋值
width=5;
PS:变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用
核心语法—数据类型
数据类型
undefined 不明确的 var width;变量width没有初始值,将被赋予值undefined
null 表示一个空值,与undefined值相等
number var iNum=23;//整数
var iNum=23.0;//浮点数
boolean true和false
string 一组被引号(单引号或双引号)括起来的文本
var string1=”This is a string”;
核心语法—typeof运算符
typeof检测变量的返回值
typeof运算符返回值如下:
undefined 变量被声明后,但未被赋值
string 用单引号或双引号来声明的字符串
number 整数或浮点数
boolean true或false
obejct javascript中的对象、数组和null
核心语法—String对象
属性
字符串对象.length var str=”this is JavaScript”;
var strLength=str.length;//长度是18
方法
字符串对象.方法名();
方法名称 | 说明 |
charAt(index) | 返回在指定位置的字符 |
indexOf(set,index) | 查找某个指定的字符长在字符串中首次出现的位置 |
Substring(index1,index2) | 返回位于指定所有index1和index2直接的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符(包前不包后) |
split(str) | 将字符串分割为字符串数组 |
核心语法—数组
创建数组
var 数组名称 = new Array(size);
new表示数组的关键字 Array(size)表示数组中可以存放的元素总数
为数组赋值
方法一:
var fruit=new Array(“apple”,”orange”,”peach”,”banana”);
方法二:
var fruit=new Array(4);
fruit[0]=”apple”;
fruit[0]=”orange”;
fruit[0]=”peach”;
fruit[0]=”banana”;
访问数组
数组名[下标]
数组的常用属性和方法
类别 | 名称 | 名称 |
属性 | length | 设置或返回数组中元素的数目 |
方法 | join() | 把数组的所有元素放入一个字符串,通过一个的分割符进行分割 |
sort() | 对数组排序 | |
push() | 向数组末尾添加一个或更多元素,并放回新的长度 |
核心语法—运算符号
类型 | 运算符 |
算术运算符 | + - * / % ++ — |
赋值运算符 | = += -= |
比较运算符 | > < >= <= == != === !== |
逻辑预算符 | && || ! |
核心语法—逻辑控制语句
if条件语句
If(条件)
{
//javaScript代码
}eles{
//javaScript代码
}
switch多分支语句
swith(表达式){
case 常量1:
javaScript语句1;
break;
.....
default:
javaScript语句3;
}
for、while循环语句
for(初始化;条件;增量){
javaScript代码;
}
while(条件){
javaScript代码;
}
for-in (数组跟方便)
var fruit=new Array(“apple”,”orange”,”peach”,”banana”);
for(var i in fruit){
document.write(fruit[i]+”<br/>”;
}
核心语法—循环中断
break 结束当前循环,进行下一个循环
continue 跳出当前循环重新进行上一个循环
核心语法—注释
单行注释以//开始,以行末结束
多行注释以/*开始,以*/结束,符号/*....*/指示中间的语句是该程序中的注释
核心语法—常用的输入/输出
alert()
语法:alert(“提示信息”)
prompt()
语法:prompt(“提示信息”,”输入框的默认信息”);
prompt(“请输入你喜欢的颜色”,”红色”);
prompt(“请输入你喜欢的颜色”,” ”);
核心语法—语法约定
代码区分大小写
变量、对象和函数的名称
分号
程序调试
Chrome开发人员工具
停止断点调试
单步调试,不进入函数体内部
单步调试,进入函数体内部
跳出当前函数
禁用所有的端点,不做任何调试
alert()方法
后期console.log()方法可以替换alert()方法
什么是函数
函数的含义:类似于Java中的方法,是完成特定任务的代码语句块
使用更简单:不用定义属于摸个类,直接使用
函数分类:系统函数和自定义函数
常用系统函数
parseInt(“字符串”)
将字符串装换为整形数字
如:parselnt(“86”)将字符串”86”转换为整形值86
parseFloat(“字符串”)
将字符串装换为浮点型数字
如:parseFloat(“34.45”)将字符串”34.45”转换为浮点值34.45
isNaN()
用于检测其参数是否是数字 是返回true不是返回false
定义函数
语法:
function函数名(参数1,参数2,参数3....){
//JavaScript语句
[return返回值]
}
函数分为:无参函数和有参函数
返回值 可有可无
调用函数
函数调用一般和表单元素的事件一起使用,调用格式
事件名=”函数名()”
变量的作用域
全局变量
局部变量
事件
名称 | 说明 |
onload | 一个页面或一副图像完成加载 |
onlick | 鼠标单击某个对象 |
onmouseover | 鼠标指导移动到某元素上 |
onkeydown | 某个键盘按键被按下 |
onchange | 域的内容被改变 |