内部脚本:将JS代码定义在HTML页面中
<script>
alter("hello js");
script>
外部脚本:将JS代码定义在外部JS文件中,然后引入到HTML页面中
alert("hello js");
<script src="../js/demo.js">script>
demo.js
alert("hello js")
区分大小写:与Java一样,变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
注释:
打括号表示代码块
if (conut == 3){
alert(count);
}
window.alert()
写入警告框document.write()
写入HTML输出console.log()
写入浏览器控制台window.alert("hello js"); // 弹出警告框
document.write("hello js"); // 写入HTMl
console.log("hello js"); // 写入控制台
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
window.alert("hello js"); // 弹出警告框
document.write("hello js"); // 写入HTML
console.log("hello js"); // 写入控制台
script>
body>
html>
var test = 20;
test = "张三"
let
关键字来定义变量。它的用法类似于 var
,但是所声明的变量,只在 let
关键字所在的代码块内有效,且不允许重复声明DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
var test = 20;
test = "张三";
alert(test);
/*
var:
1. 作用域:全局变量
2. 变量可以重复定义
*/
{
var age = 30;
var age = 20;
}
alert(age);
const PI = 3.14;
script>
body>
html>
JavaScript中分为:原始类型和引用类型
5种原始类型:
number
:数字(整数、小数、NaN(Not a Number)string
:字符、字符串,单双引皆可boolean
:布尔。true、falsenull
:对象为空undefined
:当声明的变量未初始化时,该变量的默认值为undefined使用typeof运算符可以获取数据类型
var age = 20;
alert(typeof age);
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
// number
var age = 20;
var price = 99.8;
document.write(typeof age+"
");
document.write(typeof price+"
");
// string
var ch = 'a';
var name = '张三';
var addr = "南京";
document.write(typeof ch+"
");
document.write(typeof name+"
");
document.write(typeof addr+"
");
// null
var obj = null;
document.write(typeof obj+"
");
// undefined
var a;
document.write(typeof a+"
");
script>
body>
html>
效果:
number
number
string
string
string
object
undefined
一元运算符:++,–
算术运算符:+,-,*,/,%
赋值运算符:=,+=,-=…
关系运算符:>,<,>=,<=,!=,==,===…
逻辑运算符:&&,||,!
三元运算符:条件表达式 ? true_value : false_value
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
/*
==:
1. 判断类型是否一样,如果不一样,则进行类型转换
2. 再去比较其值
===:全等于
1. 判断类型是否一样,如果不一样,直接返回false
2. 再去比较其值
*/
var age1 = 20;
var age2 = "20";
document.write(age1 == age2); // true
document.write("
"); //
document.write(age1 === age2); // false
document.write("
"); //
/*
类型转换:
* 其他类型转为number:
1. string:按照字符串的字面值,转为数字。如果字面值不是数字,则转为NaN,一般使用parseInt
2. boolean:true转为1,false转为0
* 其他类型转为boolean:
1. number:0和NaN转为false,其他转为true
2. string:空字符串转为false,其他转为true
3. null:false
4. undefined:false
*/
// string -> number
var str = +"20";
document.write(str);
document.write("
");
var str = +"abc";
document.write(str);
document.write("
");
var str = "20";
document.write(parseInt(str));
document.write("
");
// boolean -> number
var flag = +false;
document.write(flag);
document.write("
");
// number -> boolean
var flag = 0;
if(flag){
document.write("true");
document.write("
");
}
else{
document.write("false");
document.write("
");
}
// string -> boolean
var flag = "abc";
if(flag){
document.write("true");
document.write("
");
}
else{
document.write("false");
document.write("
");
}
// null -> boolean
var flag = null;
if(flag){
document.write("true");
document.write("
");
}
else{
document.write("false");
document.write("
");
}
// undefined -> boolean
var flag;
if(flag){
document.write("true");
document.write("
");
}
else{
document.write("false");
document.write("
");
}
script>
body>
html>
效果:
true
false
20
NaN
20
0
false
true
false
false
JavaScript 中提供了和 Java 一样的流程控制语句,如下
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
// 1. if
var count = 3;
if(count==3){
alert(count);
}
// 2. switch
var num = 3;
switch (num) {
case 1:
alert("星期一");
break;
case 2:
alert("星期二");
break;
case 3:
alert("星期三");
break;
case 4:
alert("星期四");
break;
case 5:
alert("星期五");
break;
case 6:
alert("星期六");
break;
case 7:
alert("星期日");
break;
default:
alert("输入的星期有误");
break;
}
// 3. for
var sum = 0;
for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
sum += i;
}
alert(sum);
// 4. while
var sum = 0;
var i = 1;
while (i <= 100) {
sum += i;
i++;
}
alert(sum);
// 5. dowhile
var sum = 0;
var i = 1;
do {
sum += i;
i++;
}
while (i <= 100);
alert(sum);
script>
body>
html>
函数定义格式有两种:
方式1
function 函数名(参数1,参数2..){
要执行的代码
}
方式2
var 函数名 = function (参数列表){
要执行的代码
}
注意:
形式参数不需要类型。因为JavaScript是弱类型语言
function add(a, b){ return a + b; }
- 1
- 2
- 3
上述函数的参数 a 和 b 不需要定义数据类型,因为在每个参数前加上 var 也没有任何意义。
返回值也不需要定义类型,可以在函数内部直接使用return返回即可
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
/* function add(a, b){
return a + b;
}*/
var add = function (a, b){
return a + b;
}
var result = add(1, 2);
alert(result); // 3
var result2 = add(1);
alert(result2); // NaN
script>
body>
html>
JavaScript Array对象用于定义数组
// 方式一
var 变量名 = new Array(元素列表);
// example
var arr = new Array(1, 2, 3);
// 方式二
var 变量名 = [元素列表]);
// example
var arr = [1, 2, 3];
arr[索引] = 值;
arr[0] = 1;
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
// 方式一
var arr = new Array(1,2,3);
//alert(arr); // [1,2,3]
// 方式二
var arr2 = [4,5,6];
//alert(arr2); // [2,4,6]
// 访问
arr2[0] = 7;
//alert(arr2[0]); // 7
// 特点:JavaScript数组相当于Java中的集合,变长变类型
// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
//alert(arr3[10]); // 10
//alert(arr3[9]); // undefined
// 变类型
arr3[5] = "hello";
//alert(arr3); // [1,2,3,,,hello,,,,,10]
// 属性: length:数组中元素的个数
var arr4 = [1,2,3];
/* for (let i = 0; i < arr4.length; i++) {
alert(arr4[i]);
}*/
// 方法:
// push:添加方法
var arr5 = [1,2,3];
arr5.push(10);
// alert(arr5); // [1,2,3,10]
// splice:提出元素
arr5.splice(0,1);
// alert(arr5); // [2,3]
script>
body>
html>
// 方式一
var 变量名 = new String(s);
// example
var str = new String("hello");
// 方式二
var 变量名 = s;
// example
var str = "hello";
var str = 'hello';
属性
方法
charAt()
:返回在指定位置的字符indexOf()
:检索字符串在 JavaScript 中自定义对象特别简单,下面就是自定义对象的格式:
var 对象名称 = {
属性名称1:属性值1,
属性名称2:属性值2,
...,
函数名称:function (形参列表){},
...
};
调用属性的格式:
对象名.属性名
调用函数的格式:
对象名.函数名()
Browser Object Model 浏览器对象模型
BOM 中包含了如下对象:
window.alert("hello");
属性:获取其他BOM对象
方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
// alert
/* window.alert("abc");
alert("abc");*/
// confirm:点击确定按钮,返回true;点击取消按钮,返回false
/* var flag = confirm("确认删除?");
if (flag){
// 删除
}*/
// 定时器
/*
setTimeout(function, 毫秒值):在一定的时间间隔后执行一个function,只执行一次
setInterval(function, 毫秒值) :在一定的时间间隔后执行一个function,循环执行
*/
/* setTimeout(function (){
alert("hello");
}, 1000);*/
setInterval(function (){
alert("hello");
}, 1000);
script>
body>
html>
灯泡交替闪烁的案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../img/off.png" >
<input type="button" onclick="off()" value="关灯">
<script>
function on(){
document.getElementById("myImage").src='../img/on.png';
}
function off(){
document.getElementById("myImage").src='../img/off.png';
}
var x = 0;
// 定时器
setInterval(function (){
if (x % 2 === 0){
on();
x++;
}else {
off();
x++;
}
}, 1000);
script>
body>
html>
window.history().方法();
history().方法();
Location:地址栏对象
获取:使用window.location获取,其中window.可以省略
window.location.方法();
location.方法();
属性
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<script>
/* alert("即将跳转");
location.href = "https://www.baidu.com";*/
// 3秒跳转到首页
document.write("3秒跳转到首页...");
setTimeout(function (){
location.href = "https://www.baidu.com";
},3000);
script>
body>
html>
Document Object Model 文档对象模型
将标记语言的各个组成部分封装为对象
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
JavaScript通过DOM,能够对HTML进行操作
DOM 是 W3C(万维网联盟)定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分:
核心 DOM:针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准
Document:整个文档对象
Element:元素对象
Attribute:属性对象
Text:文本对象
Comment:注释对象
XML DOM: 针对 XML 文档的标准模型
HTML DOM: 针对 HTML 文档的标准模型
Document
对象中提供了以下获取 Element
元素对象的函数
getElementById()
:根据id属性值获取,返回单个Element对象getElementsByTagName()
:根据标签名称获取,返回Element对象数组getElementsByName()
:根据name属性值获取,返回Element对象数组getElementsByClassName()
:根据class属性值获取,返回Element对象数组DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<img id="light" src="../img/off.png"><br>
<div class="cls">hellodiv><br>
<div class="cls">worlddiv><br>
<input type="checkbox" name="hobby">唱
<input type="checkbox" name="hobby">跳
<input type="checkbox" name="hobby">rap
<input type="checkbox" name="hobby">篮球
<script>
/* var img = document.getElementById("light");
alert(img);*/
/* var divs = document.getElementsByTagName("div");
for (let i = 0; i < divs.length; i++) {
alert(divs[i])
}*/
/* var hobbies = document.getElementsByName("hobby");
for (let i = 0; i < hobbies.length; i++) {
alert(hobbies[i]);
}*/
var divs = document.getElementsByClassName("cls");
for (let i = 0; i < divs.length; i++) {
alert(divs[i]);
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<img id="light" src="../img/off.png"><br>
<div class="cls">hellodiv><br>
<div class="cls">worlddiv><br>
<input type="checkbox" name="hobby">唱
<input type="checkbox" name="hobby">跳
<input type="checkbox" name="hobby">rap
<input type="checkbox" name="hobby">篮球
<script>
document.getElementById("light").src="../img/on.png";
/*
style:设置元素css样式
innerHTML:设置元素内容
*/
var divs = document.getElementsByTagName("div");
for (let i = 0; i < divs.length; i++) {
// divs[i].style.color = 'red';
divs[i].innerHTML = "哈哈";
}
var hobbies = document.getElementsByName("hobby");
for (let i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
script>
body>
html>
JavaScript 事件 (w3school.com.cn)
方式一:通过 HTML标签中的事件属性进行绑定
下面是点击事件绑定的 on()
函数
function on(){
alert("我被点了");
}
方式二:通过 DOM 元素属性绑定
如下面代码是按钮标签,在该标签上我们并没有使用 事件属性
,绑定事件的操作需要在 js 代码中实现
<input type="button" id="btn">
document.getElementById("btn").onclick = function (){
alert("我被点了");
}
示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
head>
<body>
<input type="button" value="点我" onclick="on()"><br>
<input type="button" value="再点我" id="btn"><br>
<script>
function on(){
alert("我被点了");
}
document.getElementById("btn").onclick = function (){
alert("我被点了");
};
script>
body>
html>
事件属性名 | 说明 |
---|---|
onclick | 鼠标单击事件 |
onblur | 元素失去焦点 |
onfocus | 元素获得焦点 |
onload | 某个页面或图像被完成加载 |
onsubmit | 当表单提交时触发该事件 |
onmouseover | 鼠标被移到某元素之上 |
onmouseout | 鼠标从某元素移开 |