第一章 JavaScript基础
文章目录
第一章 JavaScript基础
JavaScript是一种基于对象和事件驱动的、并具有安全性能的脚本语言
特点:
向HTML页面中添加交互
行为脚本语言,语法和Java类似
解释性语言,边执行边解释
组成:ECMAScript、DOM、BOM
1.基本结构
<script type="text/javascript">
<!—
JavaScript 语句;
—>
</script >
<script>…</script>可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可
JavaScript 会忽略多个空格
执行原理:
浏览器输入、IE发送包含JS的请求页面、应用服务器解析HTML和Javascript、从服务器端下载含js的页面、返回IE响应
2.网页中引用JavaScript的方式
-
使用
<script>
标签 -
外部JS文件
<script src="export.js" type="text/javascript"></script>
-
直接在HTML标签中
<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>
3.核心语法:
变量、数据类型、数组、运算符号、控制语句、注释、输入输出、语法约定
1.变量
变量用于存储数据值。
先声明变量在赋值
var width; width = 5; var:用于声明变量
同时声明和赋值变量
var catName= "皮皮"; var x, y, z = 10;
不声明直接赋值
width=5;
变量可以不经声明而直接使用,但这种方法很容易出错,也很难查找排错,不推荐使用
关键词:
关键词 | 描述 |
---|---|
break | 终止 switch 或循环。 |
continue | 跳出循环并在顶端开始。 |
debugger | 停止执行 JavaScript,并调用调试函数(如果可用)。 |
do … while | 执行语句块,并在条件为真时重复代码块。 |
for | 标记需被执行的语句块,只要条件为真。 |
function | 声明函数。 |
if … else | 标记需被执行的语句块,根据某个条件。 |
return | 退出函数。 |
switch | 标记需被执行的语句块,根据不同的情况。 |
try … catch | 对语句块实现错误处理。 |
var | 声明变量。 |
JavaScript 关键词指的是保留的单词。保留词无法用作变量名。
标识符:
所有 JavaScript 变量必须以唯一的名称的标识。
通用规则:
- 名称可包含字母、数字、下划线和美元符号
- 名称必须以字母开头
- 名称也可以
$
和_
开头(但是在本教程中我们不会这么做) - 名称对大小写敏感(y 和 Y 是不同的变量)
- 保留字(比如 JavaScript 的关键词)无法用作变量名称
let: 可以使用 let
关键词声明拥有块作用域的变量
在块中重新声明变量不会重新声明块外的变量:
var x = 10;
// 此处 x 为 10
{
let x = 6;
// 此处 x 为 6
}
// 此处 x 为 10
在循环中使用 let
:
var i = 7;
for (var i = 0; i < 10; i++) {
// 一些语句
}
// 此处,i 为 10
在循环中使用的变量使用 var 重新声明了循环之外的变量。
let i = 7;
for (let i = 0; i < 10; i++) {
// 一些语句
}
// 此处 i 为 7
在循环中使用的变量使用 let 并没有重新声明循环外的变量。
使用 JavaScript 的情况下,全局作用域是 JavaScript 环境。在 HTML 中,全局作用域是 window 对象。通过 var
关键词定义的全局变量属于 window 对象:
var carName = "porsche";
// 此处的代码可使用 window.carName
let carName = "porsche";
// 此处的代码不可使用 window.carName
在相同的作用域,或在相同的块中,通过 let
重新声明一个 var
变量是不允许的
在相同的作用域,或在相同的块中,通过 let
重新声明一个 let
变量是不允许的
在相同的作用域,或在相同的块中,通过 var
重新声明一个 let
变量是不允许的
在不同的作用域或块中,通过 let
重新声明变量是允许的
通过 var
声明的变量会提升到顶端。
// 在此处,您可以使用 carName
var carName;
const:
通过 const
定义的变量与 let
变量类似,但不能重新赋值
const PI = 3.141592653589793;
PI = 3.14; // 会出错
PI = PI + 10; // 也会出错
const
变量必须在声明时赋值
const PI = 3.14159265359;
更改常量对象的属性
// 您可以创建 const 对象:
const car = {type:"porsche", model:"911", color:"Black"};
// 您可以更改属性:
car.color = "White";
// 您可以添加属性:
car.owner = "Bill";
car = {type:"Volvo", model:"XC60", color:"White"}; // ERROR
在同一作用域或块中,不允许将已有的 var
或 let
变量重新声明或重新赋值给 const
在同一作用域或块中,为已有的 const 变量重新声明声明或赋值是不允许的
在另外的作用域或块中重新声明 const
是允许的
2.数据类型
undefined
var width;
变量width没有初始值,将被赋予值undefined
null
:表示一个空值,与undefined值相等
Undefined 与 Null 的区别:
Undefined 与 null 的值相等,但类型不相等
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
number
var iNum=23; //整数
var iNum=23.0; //浮点数
boolean
:true和false
string
一组被引号(单引号或双引号)括起来的文本
var string1=“This is a string”;
3.typeof运算符
检测变量的返回值:
undefined:变量被声明后,但未被赋值
string:用单引号或双引号来声明的字符串
boolean:true或false
number:整数或浮点数
object:javascript中的对象、数组(因为在 JavaScript 中数组即对象)和null
function:函数
typeof "" // 返回 "string"
typeof "Bill" // 返回 "string"
typeof "Bill Gates" // 返回 "string"
4.String对象
属性:
-
字符串对象.length
var str="this is JavaScript"; var strLength=str.length; //长度是18
-
方法
-
字符串对象.方法名();
方法名称 | 说 明 |
---|---|
charAt(index) | 返回在指定位置的字符 |
indexOf(str,index) | 查找某个指定的字符串在字符串中首次出现的位置 |
substring(index1,index2) | 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,不包括索引index2对应的字符 |
split(str) | 将字符串分割为字符串数组 |
<script>
var width = "this is JavaScript";
console.log(width.charAt(0));
console.log(width.indexOf("is"));
console.log(width.substring(8,12));
console.log(width.split(" "));
</script>
t
2
Java
['this', 'is', 'JavaScript']
5.数组
创建数组:
var 数组名称 = new Array(size);
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() | 向数组末尾添加一个或更多 元素,并返回新的长度 |
var fruit = ["apple","orange","peach","banana"];
console.log(fruit.length);
console.log(fruit.join("*"));
console.log(fruit.sort());
var x = fruit.push("pear");
console.log(x);
4
apple*orange*peach*banana
['apple', 'banana', 'orange', 'peach']
5
6.运算符号
类型 | 运算符 |
---|---|
算术运算符 | + - ***** / % ++ – |
赋值运算符 | = += -= |
比较运算符 | > < >= <= == != === !== |
逻辑运算符 | && || ! |
== :等于
===:值相等并且类型相等
!==:值不相等或类型不相等
7.逻辑控制语句
if 条件语句
if(条件)
{
//JavaScript代码;
}
else
{
//JavaScript代码;
}
switch 语句
switch (表达式)
{ case 常量1 :
JavaScript语句1;
break;
case 常量2 :
JavaScript语句2;
break;
...
default :
JavaScript语句3;
}
for 循环
for(初始化; 条件; 增量){
JavaScript代码;
}
while循环
while(条件)
{
JavaScript代码;
}
8.循环中断
- break
var i=0;
for(i=0;i<=5;i++){
if(i==3){
break;
}
document.write("这个数字是:"+i+"<br/>");
}//0,1,2
- continue
var i=0;
for(i=0;i<=5;i++){
if(i==3){
continue;
}
document.write("这个数字是:"+i+"<br/>");
}//0,1,2,3,4,5
9.注释
单行注释以 // 开始,以行末结束
多行注释以 /* 开始,以 / 结束,符号 /…… */ 指示中间的语句是该程序中的注释
10.常用的输入/输出
alert()
:弹出警示框
输入:
prompt()
prompt("提示信息", "输入框的默认信息");
prompt("请输入你喜欢的颜色","红色");
prompt("请输入你喜欢的颜色","");
输出:
-
使用
window.alert()
写入警告框 -
使用
document.write()
写入 HTML 输出,仅用于测试 -
使用
innerHTML
写入 HTML 元素document.getElementById("demo").innerHTML = "Hello Kitty.";
-
使用
console.log()
写入浏览器控制台
11.语法约定
- 代码区分大小写
- 变量、对象和函数的名称
- 分号
4.程序调试
- Chrome开发人员工具
- 停止断点调试
- 单步调试,不进入函数体内部
- 单步调试,进入函数体内部
- 跳出当前函数
- 禁用所有的断点,不做任何调试
- alert()方法
5.函数
语法:
function name(参数 1, 参数 2, 参数 3) {
要执行的代码
}
函数调用:
- 当事件发生时(当用户点击按钮时)
- 当 JavaScript 代码调用时
- 自动的(自调用)
函数返回:
当 JavaScript 到达 return
语句,函数将停止执行。
常用系统函数:
var str = "86.1";
console.log(typeof(str));
console.log("是否是非数字:"+isNaN(str));
str = parseInt(str);
console.log("将字符串转换为整型数字:"+typeof(str)+str);
var str1 = "86.1";
str1 = parseFloat(str1);
console.log("将字符串转换为浮点型数字:"+typeof(str1)+str1);
var content = "你好";
console.log("是否是非数字:"+isNaN(content));
string
是否是非数字:false
将字符串转换为整型数字:number86
将字符串转换为浮点型数字:number86.1
是否是非数字:true
自定义函数:
-
定义函数
function 函数名( 参数1,参数2,参数3,…){ //JavaScript语句 [return 返回值] } 无参函数、有参函数
-
调用函数
函数调用一般和表单元素的事件一起使用,调用格式
事件名= “函数名( )” ;
调用无参函数:
//无参函数 function study(){ for(var i=0;i<5;i++){ document.write("<h4>欢迎学习JavaScript</h4>"); } } <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>"); } } <input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数" onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />
6.变量的作用域
-
全局变量
-
局部变量
//变量作用域
//成员变量,作用域是全局的
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( );
}
7.事件
属性 | 当以下情况发生时,出现此事件 |
---|---|
onload | 一个页面或一幅图像完成加载 |
onlick | 鼠标单击某个对象 |
onmouseover | 鼠标指导移到某元素上 |
onkeydown | 某个键盘按键被按下 |
onkeypress | 某个键盘按键被按下或按住 |
onkeyup | 某个键盘按键被松开 |
onchange | 域的内容被改变 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onsubmit | 提交按钮被点击 |
原文地址:https://blog.csdn.net/weixin_62008675/article/details/142334214
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!