本文围绕JavaScript基础展开，介绍学习它可用于表单验证、实现页面动态效果。阐述其是基于对象和事件驱动的脚本语言，讲解了组成、执行原理、引用方式。还详细介绍核心语法，包括变量、数据类型等，以及函数分类、定义调用和变量作用域等内容。
JavaScript基础
- 本章目标
- 掌握JavaScript的组成
- 掌握JavaScript的基本语法
- 会定义和使用函数
- 会使用工具进行代码调试
- 为什么要学JavaScript？
- 表单验证－减轻服务器端压力
- 页面动态效果
- 什么是JavaScript
- JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
- JavaScript特点
- 向HTML页面中添加交互行为
- 脚本语言，语法和Java类似
- 解释性语言，边执行边解释
-
- JavaScript组成
- 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的执行原理
- 浏览器输入----发送请求或者，解析HTML标签和JavaScript
- 包含JavaScript的请求页面
- 从服务器端下载含JavaScript的页面---返回响应
- 网页中引用JavaScript的方式
- 使用<script>标签
- 外部JS文件
<script src="export.js" type="text/javascript"></script>
-
- 直接在HTML标签中
<input name="btn" type="button" value="弹出消息框"
onclick="javascript:alert('欢迎你');"/>
- JavaScript核心语法
- 核心语法—变量
- 先声明变量再赋值
-
- 同时声明和赋值变量
var catName= "皮皮";
var x, y, z = 10;
-
- 不声明直接赋值
width=5;
经验：
变量可以不经声明而直接使用，但这种方法很容易出错，也很难查找排错，不推荐使用
- 核心语法—数据类型
数据类型
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：用单引号或双引号来声明的字符串
- boolean：true或false
- number：整数或浮点数
- object：javascript中的对象、数组和null
- 核心语法—String对象
属性
字符串对象.length
方法：字符串对象.方法名();
var str="this is JavaScript";
var strLength=str.length; //长度是18
- 核心语法—数组2-1
- 创建数组
语法：
var 数组名称 = new Array(size);
注意：size---表示数组中可存放的元素总数
new Array---表示数组的关键字
-
- 为数组元素赋值
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 ";
- 核心语法—数组2-2
数组的常用属性和方法
- 核心语法—运算符号
- 核心语法—逻辑控制语句
- if条件语句
if(条件)
{
//JavaScript代码;
}
else
{
//JavaScript代码;
}
0，null,” ”,undefined,NaN,false--------结果是false；其他的都是true！
-
- 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
- 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()方法
- Chrome开发人员工具
- 什么是函数
- 函数的含义：
类似于Java中的方法，是完成特定任务的代码语句块
-
- 使用更简单：
不用定义属于某个类，直接使用
-
- 函数分类：
系统函数和自定义函数
- 常用系统函数
- parseInt ("字符串")
- 将字符串转换为整型数字
- 如: parseInt ("86")将字符串“86“转换为整型值86
- parseInt ("字符串")
如果86前面是字符串(abc)，则输出结果是NaN!
var text=parseInt(“a86”); alert(test);
-
- parseFloat("字符串")
- 将字符串转换为浮点型数字
- 如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45
- isNaN()
- parseFloat("字符串")
用于检查其参数是否是--非数字
isNaN()能把111aaa中的字符串自动转换为int类型，输出为true；true/false是数字类型！
- 自定义函数
- 定义函数
语法：
function 函数名(参数1，参数2... ){
//JavaScript语句
[return 返回值]----------------可有，也可以没用it
}
注：分有参函数和无参函数！
-
- 调用函数
- 函数调用一般和表单元素的事件一起使用，调用格式
- 调用函数
语法：
事件名＝ "函数名( )" ;
- 调用无参函数
示例：
调用无参函数，输出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的次数:',''))" />
- 变量的作用域
- 全局变量
- 局部变量
<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( );
}
- 事件
- 总结
扫一扫
786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
