JavaScript基础
JavaScript是属于HTML和Web的编程语言,编程令计算机完成你需要他们做的工作。
JavaScript是web开发者必学的三种语言之一:
- HTML定义网页的内容
- CSS规定网页的布局
- JavaScript对网页行为进行编程
JS的使用
- 在HTML中,JavaScript代码必须位于
<script>
与</script>标签之间。
- 脚本可被放置在HTML页面的
<body>
或<head>
部分中,或两者皆可。
JavaScript输出
JavaScript能够以不同方式显示数据:
- 使用
window.alert()
写入警告框 - 使用
document.write()
写入HTML输出 - 使用
innerHTML
写入HTML元素 - 使用
console.log()
写入浏览器控制台
使用innerHTML
document.getElementById("demo").innerHTML = "Hello JavaScript";
//将id为demo的HTML元素的内容更改为"Hello JavaScript"
//getElementById()该方法用来查找id名为括号内内容的HTML元素
//innerHTML表示元素内容
使用document.write()
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
使用window.alert()
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
使用console.log()
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
JavaScript函数和事件
JavaScript函数是一种JavaScript代码块,它可以在调用时被执行。
例如,当发生事件时调用函数,比如当按钮被点击时。
使用函数可以对代码进行复用:只要定义一次代码,就可以多次使用。
<body>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">改变一下</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
JavaScript函数语法
JavaScript函数通过function
关键词进行定义,其后是函数名和括号()。
函数名课包含字母、数字、下划线和美元符号(规则与变量名相同)。
圆括号可包括由逗号分隔的参数。
function name(参数1,参数2,参数3){
要执行的代码
}
函数调用
函数中的代码将在其他代码调用该函数时执行:
- 当事件发生时(当用户点击按钮时)
- 当JavaScript代码调用时
- 自调用
函数返回
当JavaScript到达return
语句,函数将停止执行。
如果函数被某条语句调用,JavaScript将在调用语句之后‘返回’执行代码。
函数通常会计算出返回值,这个返回值将会返回给调用者。
var result=calculate(x,y)
function calculate(x,y){
return x+y;
}
局部变量
在JavaScript函数中声明的变量会成为函数的局部变量,局部变量只能在函数内访问。由于局部变量只能被其函数识别,因此可以再不同函数中使用相同名称的变量。
局部变量在函数开始时创建,在函数完成时被删除。
JavaScript事件
HTML事件是发生在HTML元素上的“事情”,当在HTML页面中使用JavaScript时,JavaScript能够“应对”这些事件。
HTML事件可以是浏览器或用户做的某些事情。
- HTML网页完成加载
- HTML输入字段被修改
- HTML按钮被点击
常见的HTML事件:事件 描述 onchange HTML元素已被改变 onclick 用户点击了HTML元素 onmonuseover 用户把鼠标移动到HTML元素上 onmonuseout 用户把鼠标移开HTML元素 onload 浏览器已经完成页面加载
JavaScript对象
- JavaScript变量是数据值的容器。
- 对象也是变量,但是对象包含很多值。
- JavaScript对象是被命名值的容器,名称:值对被称为属性,值以名称:值对的方式来书写(名称和值由冒号分隔)
JavaScript运算符
算术运算符
运算符 | 描述 |
---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
/ | 除法 |
% | 取余 |
++ | 递加 |
– | 递减 |
赋值运算符
运算符 | 例子 | 等同于 |
---|---|---|
= | x=y | x=y |
+= | x+=y | x=x+y |
-= | x-=y | x=x-y |
*= | x*=y | x=x*y |
/= | x/=y | x=x/y |
%= | x%=y | x=x%y |
比较运算符
运算符 | 描述 |
---|---|
== | 等于 |
=== | 等值等型 |
!= | 不相等 |
!== | 不等值或不等型 |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
? | 三元运算符 |
条件运算符:
语法:条件? 条件成立时输出内容:条件不成立是输出内容
逻辑运算符
运算符 | 描述 |
---|---|
&& | 逻辑与(当两边都为true时,结果为true) |
|| | 逻辑或(当有一边为true时,结果为true) |
! | 逻辑非(取反) |
条件语句
条件判断语句:
if(条件){
条件成立时执行语句
}else{
条件不成立时执行语句
}
else if语句
if (条件 1) {
条件 1 为 true 时执行的代码块
} else if (条件 2) {
条件 1 为 false 而条件 2 为 true 时执行的代码块
} else {
条件 1 和条件 2 同时为 false 时执行的代码块
}
switch语句
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
- 计算一次 switch 表达式
- 把表达式的值与每个 case 的值进行对比
- 如果存在匹配,则执行关联代码
循环语句
for循环
for (语句 1; 语句 2; 语句 3) {
要执行的代码块
}
for/in循环
var person = {fname:"Bill", lname:"Gates", age:62};
var text = "";
var x;
for (x in person) {
text += person[x];
}
while循环
while (条件) {
要执行的代码块
}
do/while循环
do {
要执行的代码块
}
while (条件);