目录
JavaScript 的组成
- ECMAScript(简称 ES): JavaScript 语法
- DOM: 页面文档对象模型, 对页面中的元素进行操作
- BOM: 浏览器对象模型, 对浏览器窗口进行操作
JavaScript 代码可以嵌入到 HTML 的 script 标签中.
<script>
alert("你好!");
</script>
这就是一个简单的JavaScript(以下简称JS)代码实现。JS是为了和用户交互的,上述就是一个最简单的交互:当用户打开界面内的时候就会弹出一个对话框,显示你好。
一.书写方式
1.书写位置
1. 行内式 直接嵌入到 html 元素内部
<input type="button" value="点我一下" onclick="alert('kkk')">
注意, JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示. HTML 中推荐使用双引号, JS 中推荐使用单引号.
2. 内嵌式 写到 script 标签中
<script>
alert("你好!");
</script>
3. 外部式 写到单独的 .js 文件中
<script src="hello.js"></script>
alert("hehe");
注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行). 适合代码多的情况.
2.输入输出
<script>
//输入:弹出一个对话框
prompt("请输入您的姓名:");
//输出:弹出一个警示框,输出结果
alert("你好!");
//输出:在控制台打印一个日志(仅仅给程序员查看)
console.log("这是一个日志");
</script>
二.变量的使用
1.基本用法
//创建变量
var name = 'zhangsan';
var age = 20;
//使用变量
console.log(age);//读取变量内容
age=30;//修改变量内容
//举例
var name=prompt("请输入名字");
var sge=prompt("请输入年龄");
alert("你的名字"+name+"\n"+"你的年龄"+age);
// alert("你的年龄"+age);
java:静态类型 变量的类型在创建的时候就确认好了,后边就不能改变了,改变就会报错.
JS:动态类型 变量的类型是随着程序的运行才会确认,因此 js 中的变量类型是允许发生改变的.
2.基本数据类型
JS 中内置的几种类型
- number: 数字. 不区分整数和小数,统一都使用 "数字类型" 来表示
- boolean: true 真, false 假.
- string: 字符串类型.
- undefined: 只有唯一的值 undefined. 表示未定义的值.
- null: 只有唯一的值 null. 表示空值.
特殊的数字值
- Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
- -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
- NaN: 表示当前的结果不是一个数字.
'hehe' + 10 得到的不是 NaN, 而是 'hehe10', 会把数字隐式转成字符串, 再进行字符串拼接.
可以使用 isNaN 函数判定是不是一个非数字.
3.数组的操作
//定义数组
var arr=new Array();
var arr2=[];
arr2[0]="hello";
arr2[1]=2;
//同一个数组中,元素类型可以不同。
//不要给数组名直接赋值,此时数组中的所有元素都没了
var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
alert(arr);
arr = '小猫凯迪';//这个是错误的,就变成字符串了
//新增数组元素
//1.修改length
var arr=[9,5,3,1];
arr.length=6;
console.log(arr);
console.log(arr[4],arr[5]);
//2.修改下标新增
var arr=[];
arr[2]=10;
console.log(arr);
//3.使用push 进行追加元素
var arr=[3,4,1,5,7,4];
var newArr=[];
for(var i=0;i<arr.length;i++){
if(arr[i]%2!=0){
newArr.push(arr[i]);
}
}
console.log(newArr);
//删除元素
var arr=[9,2,4,6,4,,8,0,9];
//从下标为2的位置开始,删除3个元素
arr.splice(2,3);
4.函数
//函数
function hello(){
console.log("hello");
}
hello();
//另一种定义方式
var add=function(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
console.log(add(10,20));
在JS中,函数是一等公民,可以用变量保存,也可以作为其他函数的参数或者返回值.
5.对象
在 JS 中, 字符串, 数值, 数组, 函数都是对象.
每个对象中包含若干的属性和方法.
属性: 事物的特征.
方法: 事物的行为.
//1.创建对象,使用{}
var a={};//创建了一个空的对象
var student={
name:'ss',
height:120,
weight:189,
sayHello:function(){
console.log("Hello");
}
};
//使用对象的属性和方法
console.log(student.name);
console.log(student['height']);
student.sayHello();
//2.创建对象,使用new Object
var student1=new Object();
student1.name="ss";
student1.height=189;
student1.weight=120;
student1.sayHello=function(){
console.log("hello");
}
//3.创建对象,使用 构造函数
var mimi={
name:"mimi",
type:"中华田园喵",
miao:function(){
console.log("喵");
}
}
function cat(name,type,sound){
this.name=name;
this.type=type;
this.miao=function (){
console.log(sound);
}
}
var xiaohei=new cat('xiaohei','波斯猫','喵呜');
三.获取元素
这部分工作类似于 CSS 选择器的功能.
querySelector
<div class="box">abc</div>
<div id="id">kjk</div>
<script>
//和css中选择器的选择方式一样
var element = document.querySelector('.box');
var element2 = document.querySelector('#id');
</script>
querySelectorAll
一次获取所有 / 多个.
和上边的使用一样.
四.事件
JS 要构建动态页面, 就需要感知到用户的行为.
用户对于页面的一些操作(点击, 选择, 修改等) 操作都会在浏览器中产生一个个事件, 被 JS 获取到, 从而进行更复杂的交互操作.
事件三要素
1. 事件源: 哪个元素触发的
2. 事件类型: 是点击, 选中, 还是修改?
3. 事件处理程序: 进一步如何处理. 往往是一个回调函数.
1.操作元素
1.获取 / 修改元素
innerText
// 读操作
var renderedText = HTMLElement.innerText;
// 写操作
HTMLElement.innerText = string;
<div>
<span>hello world</span>
<span>hello world</span>
</div>
<script>
var div = document.querySelector('div');
// 读取 div 内部内容
console.log(div.innerText);
// 修改 div 内部内容, 界面上就会同步修改
div.innerText = 'hello js <span>hello js</span>';
</script>
innerHTML
// 读操作
var content = element.innerHTML;
// 写操作
element.innerHTML = htmlString;
两者区别
innerText 只能获取内容
innerHTML 可以获取到HTML标签
赋值的时候:
innerText 不会解析HTML标签
innerHTML 会解析HYTML标签
2.获取 / 修改元素属性
直接通过属性获取属性的值
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
// console.dir(img);
console.log(img.src);
console.log(img.title);
console.log(img.alt);
</script>
直接修改属性
<img src="rose.jpg" alt="这是一朵花" title="玫瑰花">
<script>
var img = document.querySelector('img');
img.onclick = function () {
if (img.src.lastIndexOf('rose.jpg') !== -1) {
img.src = './rose2.png';
} else {
img.src = './rose.jpg';
}
}
</script>
3.获取/修改表单元素属性
表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改
- value: input 的值.
- disabled: 禁用
- checked: 复选框会使用
- selected: 下拉框会使用
- type: input 的类型(文本, 密码, 按钮, 文件等)
五.两个小案例
播放-暂停 按钮切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>暂停-播放切换</title>
</head>
<body>
<input type="button" value="播放"style=" width:100px; height:100px; border-radius:50px; background-color:orange">
<script>
var btn=document.querySelector('input');
btn.onclick=function(){
if(btn.value=='播放'){
btn.value='暂停';
}else{
btn.value='播放';
}
}
</script>
</body>
</html>
计数器--加一减一操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计数器</title>
</head>
<body>
<input type="text" value="0" id="value">
<input type="button" value="点我加一" id="add">
<input type="button" value="点我减一" id="sub">
<script>
var input =document.querySelector("#value");
var add=document.querySelector("#add");
add.onclick=function (){
var num=parseInt(input.value);
//num++;//自动隐式转换为number类型
num=num+1;//需要自己转换为number类型
input.value=num;
}
var sub=document.querySelector("#sub");
sub.onclick=function(){
var num=input.value;
num--;
input.value=num;
}
</script>
</body>
</html>