JavaScript基础
定义
- 什么是JavaScript
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
- JavaScript的特点
- 向HTML页面中添加交互行为
- 脚本语言，语法和Java类似
- 解释性语言，边执行边解释
JavaScript的组成部分
（1）核心（ECMAScript）：这一部分主要是js的基本语法。
（2）BOM（Brower Object Model）（浏览器对象模型）：主要是获取浏览器信息或操作浏览器的。例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。
（3）DOM（Document Object Model)（文档对象模型）：此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（增删改查）
JavaScript的基本结构
内嵌式：
理论上js可以书写在页面的任意位置。
<script type="text/javascript">
alert("内嵌式")
</script>
外链式：
首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。
<script type="text/javascript" src="js文件路径地址">这里不能写js语句</script>
行内式：
直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。 onclick单击事件
<input type="button" value="点我呀!" οnclick="alert('点我干啥!^6^');">
<button οnclick="alert('恭喜你,中 500 万.');">点我呀!</button>
JavaScript的执行原理
JavaScript核心语句
核心语句—变量
定义
就是存放数据的、内疗可以存储任意数据
声明变量
- 先声明变量在赋值
var width； //var - 用于声明变量的关键字
width = 5； //width - 变量名
- 同时声明和赋值变量
var catName = "皮皮";
var x,y,z = 10;
- 不声明直接变量
width = 5;
//变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用
弹出变量的值：alert(变量);
核心语句—数据类型
数值型：number（凡是数字都是数值型，不区分整数和小数）
字符串：string（凡是引号包裹起来的内容全部都是字符串）
布尔：boolean（true、false）
对象类型：object（特殊取值null）
未定义型：undefined
核心语法—运算符号
- 算数运算符
+ - * / % ++ --
- 赋值运算符
= += -=
- 比较运算符
> >= < <= !=
== 等于（只比较内容） === 恒等于（比较内容的同时还要比较数据类型）
注意：关系运算符返回的结果只有两个：true / false
- 逻辑运算符
&& 与 true&&false ====>false
|| 或 true||false ====>true
！ 非 !true ====>false
false（理解）：false, 0, null, undefined
true（理解）：true, 非0, 非null, 非undefined
针对 && 顺口溜: 找第一个出现的假值. (一假即假)
针对 || 顺口溜: 找第一个出现的真值. (一真即真)
数据类型转换
字符串类型转换为整形：parselnt（字符串）
字符串类型转换为小数：parseFloat（字符串）
演示：
var a="123",b="12.53",c,d;
c=parseInt(a);
d=parseFloat(b);
document.write(c+1+"<br/>");
document.write(d+2);
核心语法—常用的输入与输出
- alert
alert("提示信息");
- prompt
prompt("提示信息","输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色","");
核心语法—逻辑控制语句
演示：
<script>
var score = 59;
if (score >= 90) {
alert("优秀");
} else if (score >= 80) {
alert("良好");
} else if (score >= 60) {
alert("及格");
} else {
alert("不及格");
}
</script>
求：1+2+3+…+10
求：123…*10
1、for循环
for(循环初值,循环条件,步长){
语句;//循环体
}
2、while循环
while(循环条件){
语句;//循环体
}
//特别说明：while循环是先先判断再执行语句
3、do while循环
do{
语句;//循环体
}while(循环条件);
//特别说明：do while循环是先执行，再判断
核心语法—注释
单行注释： // 注释语句 快捷键ctrl+/
多行注释： /* 注释语句 快捷键ctrl+shift+/*/
注意：多行注释相互不能嵌套使用，只能在多行注释里面使用单行注释！
核心语法—语法约定
1. 只能由字母、数字、_（下划线）、$（美元符号）组成。
2. 不能以数字开头。
3. 命名中不能出现-（js会理解成减号进行减法的操作），不能和关键字冲突。
核心语法—循环中断
1、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
2、continue
<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
这个数字是：4
这个数字是：5
核心语法—数组
数组定义
- 什么是数组？
数组就是一组数据的集合
其表现形式就是内存中的一段连续的内存地址
数组名称其实就是连续内存地址的首地址
可以存放任何类型的数据
- 创建数组
var 数组名称 = new Array(size);
//new表示数组的关键字
//size表示数组中可存放的元素总数
- 为数组名称赋值
例一：
var fruit = new Array("apple","oranfe","peach","banana");
var fruit = new Array(4);
fruit[0] = "apple";
fruit[1] = "oranfe";
fruit[2] = "peach";
fruit[3] = "banana";
例二：
var arr = [值1,值2,值3]; //隐式创建
var arr1 = [1,3,5,7,9];
document.write(arr1[2]);
for (var i=0;i<arr1.length;i++) {
document.write(arr1[i]+"<br/>")
}
for (var i in arr1){
document.write(i + '：' + arr1[i] + '<br/>');
}
核心语法—数组
- 数组的常用属性和方法
| 类型 | 名称 | 描述 |
|---|---|---|
| 属性 | length() | 设置或返回数组中元素的数目 |
| 方法: | join() | 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔 |
| sort() | 对数组排序 | |
| push() | 向数组末尾添加一个或更多的元素，并返回新的长度 | |
| pop() | 数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项 | |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度 | |
| shift() | 把数组的第一个元素从其中删除，并返回第一个元素的值 |
reverse()：反转数组项的顺序。
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
如果要检索的字符串值没有出现，则该方法返回 -1
程序调试
开发人员工具
- 停止断点调试
- 单步调试，不进入函数体内部
- 单点调试，进入函数体内部
- 跳出当前函数
- 禁用所有的断点，不作任何调试
alert()方法
运行页面--->在页面上面右键--->检查--->点击Source--->双击要调试的页面
函数
什么是函数
- 函数的含义：类似于Java中的方法，是完成特定任务的代码语句块
- 使用更简单：不用定义属于某个类，直接使用
- 函数分类：系统函数和自定义函数
- 常用系统函数
- parseln("字符串")
将字符串转换为整形数字
如：parseln("86")将字符串"86"转换为整形值86
- parseFloat("字符串")
将字符串转换为浮点型数字
如：parseFloat("34.45")将字符串"34.45"转换为浮点型34.45
- isNaN()
用于检查其参数是否非数字
强制类型转换
Boolean(""); //false – empty string
Boolean("hi"); //true – non-empty string
Boolean(100); //true – non-zero number
Boolean(null); //false - null
Boolean(0); //false - zero
Boolean(new Object()); //true – object
Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56
Number( "5.6.7 ") NaN
Number(new Object()) NaN
Number(100) 100
var s1 = String(null); //"null"
var oNull = null;
var s2 = oNull.toString(); //won’t work, causes an error
弱类型转换
var str= '012.345 ';
var x = str-0;
x = x*1;
alert(x);
自定义函数
函数是命名的独立的语句段，这个语句段可以被当作一个整体来引用和执行：
定义函数
语法格式：
function 函数名(参数1,参数2,参数3){ //有参函数、无参函数
//JavaScript语句
[return 返回值] //可有可无
}
- 函数只有被调用后才会执行
- 如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型
<script type="text/javascript">
// 定义一个函数 : function
function demo2() {
return 666;
}
// 调用函数 :
alert(demo2());
</script>
- 如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可
<script type="text/javascript">
// 定义一个函数 : function
function demo3(a, b) {
return a + b;
}
// 调用函数 :
alert(demo3(10, 20));//显示30
</script>
- js中出现二个重名的函数名、后者会把前面的覆盖掉
对比java、java有重载（同名不同参）、重写（同名同参同返回值类型、方法体不一样）
调用函数
- 函数调用一般和表单元素的事件一起使用，调用格式
语法格式：
事件名 = "函数名()";
调用无参函数
示例：
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()" />
调用有参函数
示例：
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的次数:","")) />
变量的作用域
全局变量
局部变量
<body onload = "second()">
var i = 20;
function first(){
Var i = 5;
for (var j=0;j<i;j++){
document.write(" "+j);
}
}
function second(){
var t = prompt("请输入一个数","")
if(t>i)
document.write(t);
else
document.write(i);
first();
}
事件
- 描述
事件三要素：
3. 事件源：被监听的html元素（就是这个事件加给谁），就是某个（某些）html标签
4. 事件类型：某类动作，例如点击事件，移入移除事件，敲击键盘事件等
5. 执行指令：事件触发后需要执行的代码，一般使用函数进行封装
语法格式：事件源.事件类型=执行指令
2.常用的事件
| 事件名 | 描述 |
|---|---|
| onload | 某个页面或画像完成加载 |
| onlick | 鼠标点击某个对象 |
| onmouseover | 鼠标指导移到某元素上 |
| onkeydown | 某个键盘按键被按下 |
| onchange | 域的内容被修改 |
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
