特点 | Java | JavaScript |
---|---|---|
面向对象 | 完全面向对象(继承、封装、多态) | 基于对象,不完全面向对象 |
运行方式 | 编译型,生成中间文件字节码 | 解释型语言,不生成中间文件,直接运行浏览器即可 |
跨平台 | 安装虚拟机可以跨平台 | 运行在浏览器,只要有浏览器就可以执行 |
大小写 | 区分大小写 | 区分大小写 |
数据类型 | 强类型(声明变量前必须要先明确数据类型) | 弱类型,定义字符串,可以赋值一个整数 |
组成部分 | 作用 |
---|---|
ECMA Script | 一种脚本语言规范,JavaScript的核心语法基础,定义JS中的基本语法 |
BOM | Browser Object Model 浏览器对象模型:操作浏览器的各种对象 |
DOM | Document Object Model 文档对象模型:用于操作网页中各种标签元素 |
head
标签内的
标签内。<script type="text/javascript">
//执行语句
script>
<script type="text/javascript" src="js文件.js">script>
语言 | 注释语法 |
---|---|
HTML |
|
CSS | /\* 注释 \*/ |
JavaScript | // 单行注释 /\* 多行注释 \*/ |
格式:
var 变量名 = 数据;
关键字 | 说明 |
---|---|
number | 数值型:包括整数和浮点数 |
boolean | 布尔类型:true/false |
string | 字符串类型:包含字符和字符串 |
null | 只有一个值的类型是 Null,它只有一个专用值 null ,表示引用数据类型变量值的占位符 |
undefined | 未定义的类型 |
何为未定义类型?
未定义类型指只声明变量而没有给变量赋值。
关键字 | 说明 |
---|---|
object | 对象类型:JS内置对象或自定义对象 |
作用:判断指定的变量数据类型
格式:typeof(变量名) 或 typeof 变量名
typeof(变量名)
/*或*/
typeof 变量名
typeof
运算符对null值会返回Object,原因是JavaScript初期犯的错误被沿用下来。null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<style type="text/css">style>
<script type="text/javascript">
var a = 10;
document.write("a=" + a + " 数据类型:" + (typeof a) + "
");
var b = 3.1415;
document.write("b=" + b + " 数据类型:" + (typeof b) + "
");
var c = null;
document.write("c=" + c + " 数据类型:" + (typeof c) + "
");
var d = 'd';
document.write("d=" + d + " 数据类型:" + (typeof d) + "
");
var e = "abcde";
document.write("e=" + e + " 数据类型:" + (typeof e) + "
");
var f = true;
document.write("f=" + f + " 数据类型:" + (typeof f) + "
");
var g;
document.write("g=" + g + " 数据类型:" + (typeof f) + "
");
var h = {
name:"笨蛋",//注意赋值是用:而不是用= 两个变量之间是用,分隔
age:18
};
document.write("h的类型:" + typeof(h) + "
");
document.write("h的名字:" + h.name + "
");
script>
head>
<body>
body>
html>
转换函数 | 作用 |
---|---|
parseInt() | 将一个字符串转成整数,如果一个字符串包含非数字字符,那么parseInt函数会从首字母开始取数字字符,一旦发现非数字字符,马上停止获取内容。 |
parseFloat() | 将一个字符串转成小数,转换原理同上。 |
isNaN() | 转换前判断被转换的字符串是否是一个数字,非数字返回true |
使用parseInt()和parseFloat()时,字符串的首字母需要是数字字符,否则转换的结果是NaN.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串转换成数字类型title>
<style type="text/css">style>
<script type="text/javascript">
//var age = "a10b12"; //转换后的结果为NaN
var age = "10b12"; //转换的结果为10
age = parseInt(age);
document.write("age = " + age + "
");
var price = "49.99b66.6"; //转换的结果为49.99
document.write("price不是数字?" + isNaN(price) + "
");
price = parseFloat(price);
document.write("price = " + price + "
");
var num = "60";
document.write("num不是数字?" + isNaN(num) + "
");
script>
head>
<body>
body>
html>
运算符 | 描述 |
---|---|
+ | 加 |
- | 减 |
** | 乘 |
/ | 除 |
% | 取余 |
++ | 自增 |
– | 自减 |
运算符 | 例子 | 描述 |
---|---|---|
= | x = y | 赋值 |
+= | x += y | 加等 |
-= | x -= y | 减等 |
*= | x *= y | 乘等 |
/= | x /= y | 除等 |
%= | x %= y | 余等 |
运算符 | 描述 |
---|---|
== | 等于 |
=== | 值及类型均相等(恒等于) |
!= | 不等于 |
!== | 值与类型均不等(不恒等于) |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
数字可以与字符串进行比较,字符串可以与字符串进行比较。字符串与数字进行比较的时候会先把字符串转换成数字然后再进行比较(隐含字符串转为数字)
**==
与===
的区别: **
运算符 | 描述 |
---|---|
&& | 和 |
|| | 或 |
! | 非 |
注意:js中没有单与/单或
使用步骤:f12后设置断点(单击代码),设置监视值,然后按全部执行按钮(此时是个暂停符号),再刷新网页,此时页面会执行到断点代码后会暂停,再按下一步观看效果(反正能使用下一步即可)
在一个指定的条件成立时执行代码。
if(条件表达式) {
//代码块;
}
在指定的条件成立时执行代码,当条件不成立时执行另外的代码。
if(条件表达式) {
//代码块;
}
else {
//代码块;
}
使用这个语句可以选择执行若干块代码中的一个。
if (条件表达式) {
//代码块;
}
else if(条件表达式) {
//代码块;
}
else {
//代码块;
}
条件判断可以使用非逻辑运算符
数据类型 | 为真 | 为假 |
---|---|---|
number | 非0 | 0 |
string | 非空串 | 空串 |
undefined | / | 假 |
NaN(Not a Number) | / | 假 |
object | 非null | null |
switch(变量名) {
case 常量值:
break;
case 常量值:
break;
default:
break;
}
switch(true) { //变量名要根据表达式可能的结果进行定义,如果表达式的结果分为true和false两种,可以用true代替
case 表达式:
break;
case 表达式:
break;
default:
break;
}
需求:通过prompt输入的分数,如果90-100之间,输出优秀。80-90之间输出良好。60~80输出及格。60以下输出不及格。其它分数输出:分数有误。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断分数title>
<style type="text/css">style>
<script type="text/javascript">
//使用prompt方法淡出输入框
var score = window.prompt("请输入你的分数");
switch (true){
case score>=90&&score<=100:
document.write("你的成绩优秀");
break;
case score>=80&&score<=89:
document.write("你的成绩良好");
break;
case score>=60&&score<=79:
document.write("你的成绩及格");
break;
case score>=0&&score<=59:
document.write("你不及格");
break;
default:
document.write("你输入的分数有误");
break;
}
script>
head>
<body>
body>
html>
当指定的条件为 true 时循环执行代码
while (条件表达式) {
需要执行的代码;
}
最少执行1次循环
do {
需要执行的代码;
}
while (条件表达式)
循环指定次数
for (var i=0; i<10; i++) {
需要执行的代码;
}
需求:根据输入的数字显示乘法表
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表title>
<style type="text/css">
table{
/*边框设置为细线模式*/
border-collapse: collapse;
}
td{
padding:5px;
}
td:hover{
color: blue;
background-color: violet;
}
style>
<script type="text/javascript">
var num = window.prompt("请输入一个数字");
//创建表格,获取效果
document.write("");
//外循环控制行
for(var i = 1; i <= num; i++) {
document.write("");
//内循环控制输出内容
for(var j = 1; j <= i; j++){
document.write("");
document.write(j + "x" + i + "=" + (j*i));
document.write(" ");
}
document.write(" ")
}
document.write("
")
script>
head>
<body>
body>
html>
被调用时可以重复使用的代码块,类似Java里的方法
定义方法有两种:命名函数和匿名函数
格式:
function 函数名(参数列表) {
函数体代码;
[return 返回值]
}
示例:定义一个函数实现加法功能
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两个数相加的函数title>
head>
<body>
<script type="text/javascript">
//函数的定义
function add(m,n) {
return m+n;
}
//函数的调用
document.write("两个数的和:" + add(5,3));
script>
body>
html>
形参的类型:在函数定义的时候不能指定形参类型,因为是可变类型
函数的返回值:不需要对返回值类型进行声明。如果一个函数中需要返回值,直接使用return返回,如果没有返回值,不写return。
关于函数的重载:在JS中没有函数的重载,同名的函数会覆盖原来的函数,调用的时候,只会调用最后1次定义的函数,而且实参的个数与形参数的个数没有关系。
在JavaScript中的任意的函数内部都隐式的维护了一个arguments对象(数组), 调用函数的时候实参是先传递给了arguments对象,然后再arguments对象分配形参的。
使用arguments对象时,不使用形参也一样可获取到用户传递的数据,但建议写上形参,以便于提示该函数需要传参,以及传入多少什么类型的参数。
格式:
var 变量名 = function(参数列表) {
函数体;
}
//调用
变量名("数据");
alert(“提示信息”)
作用:弹出一个警示框
document.write(“输出文字”)
作用:在页面中输出文字
window.prompt(“提示信息”,“默认值”)
作用:弹出一个输入框,默认值可以省略
window.setInterval(“需要调用的函数名()”,相隔的毫秒数)
作用:定时器,每隔一定的时间调用一次函数
需求:每隔2秒切换一张图片的效果
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图title>
<style type="text/css">style>
<script type="text/javascript">
//设置定时器
window.setInterval("changeImage()",2000);
var num =1; //在调用函数的时候0.jpg已经显示,如果num=0,那么在执行下面函数时,0.jpg会再次显示2秒
//设置寻找图片的函数
function changeImage() {
var img = document.getElementById("img");//img对象就相当于img标签
if (num < 5) {
img.src = "img/" + num + ".jpg";
num++;
}else {
num = 0;
changeImage();
}
}
script>
head>
<body>
<img src="img/0.jpg" id="img" width="600px" height="400px"/>
body>
html>
注意:事件通常要与函数配合使用,当事件发生时函数才会执行
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<style type="text/css">style>
<script type="text/javascript">
function setName(){
window.prompt("请输入姓名");
}
script>
head>
<body>
<input type="button" value="按钮" onclick="setName()" />
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件2title>
<style type="text/css">style>
head>
<body>
<input type="button" value="按钮" id="bt"/>
body>
<script type="text/javascript">
//找到按钮
var button = document.getElementById("bt");
//注册事件(使用匿名函数)
button.onclick = function () {
window.prompt("请输入姓名");
}
script>
html>
但是这种写法
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件2title>
<style type="text/css">style>
<script type="text/javascript">
//加载完页面后再函数
window.onload = function () {
//找到按钮
var button = document.getElementById("bt");
//注册事件(使用匿名函数)
button.onclick = function () {
window.prompt("请输入姓名");
}
}
script>
head>
<body>
<input type="button" value="按钮" id="bt"/>
body>
html>
属性 | 描述 |
---|---|
onblur | 元素失去焦点 |
onchange | 主要用于下拉框的内容改变, select |
onclick | 鼠标点击某个对象 |
ondblclick | 鼠标双击某个对象 |
onfocus | 元素获得焦点 |
onkeydown | 某个键盘的键被按下 |
onkeyup | 某个键盘的键被松开 |
onload | 某个页面或图像被完成加载 |
onmousedown | 某个鼠标按键被按下 |
onmouseout | 鼠标从某元素移开 |
onmouseover | 鼠标被移到某元素之上 |
onmouseup | 某个鼠标按键被松开 |
onsubmit | 提交按钮被点击 |
使用事件调用函数的格式有两种:
第一种:
/*1、在html标签中设置事件*/
onclick="函数名()"
/*2、然后在