JS是一种“解释性”的编程语言,和Java一样,需要运行在虚拟机上
JS运行的虚拟机统称为“JS引擎”
主流的浏览器 | JS引擎 |
---|---|
Chrome | V8(最主流) |
Firefox | SpiderMonkey |
IE | Chakra |
Microsoft Edge(Windows默认浏览器) | ChakraCore |
Safari (macOS默认浏览器) | SquirrelFish |
JS的用处:
JS的内容:
<input type="button" value="按钮" onclick="alert('hello,world!')">
<script src="Guo.js"> script>
标签中 <script>
alert('hello,world!')
script>
prompt('请输入名字')
alert('hello,world!')
console.log
console.log('hello,日志')
JS中的变量都是动态类型的,
变量的类型是在程序运行时才确定的;变量的类型可以在程序运行时发生改变
Java中的变量都是静态类型的,
变量的类型在程序运行时,不能改变
var a = 'qust';
let b = 'material';
c = 1;
//b的类型转换了
b = 2022;
Number | 数字,不分整数和小数 |
Boolean | true和false |
String | " "也行,’ ‘也行,JS中字符串建议使用’ ’ |
Undefined | 表示未定义的值 |
null | 表示空值 |
var max = Number.MAX_VALUE;
console.log(max * 2) // Infinity 无穷大,表示数字已经超过了JS能表示的范围
console.log(-max * 2); //-Infinity 负无穷大,表示数字已经超过JS能表示的范围
console.log('hello' - 10); //NaN 表示当前结果不是一个数字
//字符串与字符串拼接
let a = 'nice';
let b = 'material';
console.log(a + b); //nicematerial
//数字与字符串拼接
let m = 6;
let n = 'laker';
console.log(m + n); // 6laker
//Boolean类型变量与字符串拼接
let d = true;
let e = 'laker';
console.log(d + e); //truelaker
let f = true;
let g = 2;
console.log(f + g); //3
let l = true;
let k = false;
console.log(l + k); //1
// a未初始化
let a;
console.log(a); // undefined
console.log(b); //运行时报错
console.log(a + 'qust'); //undefinedqust
console.log(a + 6); //NaN
console.log(a + true); //NaN
let a = null;
console.log(a); //null
console.log(a + 6); //6
console.log(a + 'qust'); // nullqust
console.log(a + true); //1
let a = '6';
a += 2;
console.log(a); //8
比较字符串时,无论是== 还是 === ,无论是 != 还是 !== ,比较的都是字符串的内容
== 和 != 比较相等,会进行隐式类型转换
=== 和 !== 比较相等,不会进行隐式类型转换,比较类型和值(类型不同,直接返回)
逻辑运算符
&& || !
计算多个Boolean表达式的值
Java中是返回true或false
JS中是返回表达式的值(不一定是true和false)
类型 | |
---|---|
Number | 非0为真,0为假 |
String | 非空字符为真,’ ’ 空字符为假 |
undefined | 为假 |
null | 为假 |
let a = 6;
let b = 7;
let d = a||b;
console.log(d);
let x = null; // let x;
x = x||0;
console.log(x); //0
与Java相同
//1.
let array1 = new Array();
//2.
let array2 = [1,"forever",null,true]
let array = [1,"forever",null,true];
array[100] = 100; // array长度变为101,其中下标为4~99处均为undefined
console.log(array[50]); //undefined
console.log(array);
尾插
array.push("青稞");
let array = [1,"forever",null,true];
array.splice(2,1); //第一个参数是下标为2的位置开始删除(包含下标2),第二个参数是删除长度为1
//删除后,后面的元素向前占据删除元素的位置
for(let i = 0; i < array.length; i++){
console.log(array[i]);
}
for(let j in array){
console.log(array[j]);
}
for(let value of array){
console.log(value);
}
//添加属性,数组长度不变
array[-2] = 8; //属性名: -2 属性值: 8
console.log(array[-2]);
array['qust'] = 66;
console.log(array['qust']); //属性名: qust 属性值:66
function 函数名(参数列表){
函数体
}
console.log(add("hello", "world"));
console.log(add(4, "love"));
function add(x, y) {
return x + y;
}
function print(x, y){
console.log(x);
console.log(y);
}
print(1); // 1 undefined
print(1,2,3); // 1 2
函数不立即调用,在未来的某个时机去调用
div.onclick = function(){
}
JS中的函数可以像变量一样赋值的,与普通变量没什么区别
函数表达式就是定义了一个匿名函数,然后赋值给一个变量
//1.
let add = function(x, y){
return x + y;
}
console.log(add(1, 2));
//2.
function test(x, y){
return x - y;
}
let add2 = test;
console.log(add2(1, 2));
{}
中){}
中) //var
function test(){
{
var a = 6;
}
console.log(a);
}
test(); //6
//a
function test(){
{
a = 6;
}
}
test();
console.log(a); //6
function add(){
let b = 9;
function add2(){
console.log(b);
}
add2();
}
add(); //9
JS的对象是不依赖类的
,
分割,可有可无 //创建空对象
let college = {}
let student = {
name: 'Westbrook',
age: 32,
team: 'laker',
type: 'force',
sayHello: function(){
console.log('forever');
}
}
function Team(name, location){
this.name = name;
this.location = location;
this.play = function(){
console.log('开打开打');
}
}
let laker = new Team('湖人', '洛杉矶');
let jazz = new Team('爵士', '盐湖城');
let sun = new Team('太阳', '菲尼克斯');
console.log(laker);
console.log(jazz);
console.log(sun);
new的执行:
在内存中创建一个空的对象{ }
this指向这个对象
执行构造函数中的代码,给对象创建属性和方法
返回这个对象(没有return,new代劳)
let student = {
name: 'Westbrook',
age: 32,
team: 'laker',
type: 'force',
sayHello: function(){
console.log('forever');
}
}
console.log(student.name);
console.log(student.team);
student.sayHello();
console.log(student['name']);
console.log(student['type']);
student.oldteam:'雷霆';
获取单个对象,如有重复,取第一个 querySelect(’ 选择器 ')
多个对象放在一个数组中 querySelectAll(’ 选择器 ')
0下标是第一个对象、1下标是第二个对象
console.log(对象)打印HTML语句
console.dir(对象) 打印对象,可以看到对象的属性
<div class="container">
<div class="one">齐风陶韵,生态淄博div>
<div class="two">孙子故里,生态滨州div>
div>
<script>
//获取单个对象,如有重复,取第一个
let one = document.querySelector('.one');
//获取多个对象 伪数组
let two = document.querySelectorAll('.two');
//log打印HTML语句
console.log(one);
//dir打印对象,可以看到对象的属性
console.dir(one);
script>
操作元素的前提是创建对象
<div>齐风陶韵,生态淄博div>
<div>
<span>齐风陶韵,生态淄博span>
<span>孙子故里,生态滨州span>
div>
开始标签和结束标签之间的部分是内容,内容可以是文本,也可以是嵌套的标签
<div>
<span>西北工业span>
<span>长安大学span>
div>
<script>
let lick = document.querySelector('div');
console.log(div.innerHTML); //西北工业
//长安大学
console.log(div.innerText); //西北工业 长安大学
//修改文本内容,会把标签当成文本内容
//页面为 陕西科大
div.innerText = '陕西科大';
//修改HTML结构
//页面为 陕西科大
div.innerHTML = '陕西科大';
//HTML结构均为
//
// 陕西科大
//
script>
案例
<style>
div {
width: 200px;
height: 200px;
background-color:aqua;
text-align: center;
line-height: 200px;
}
style>
<script>
let div = document.querySelector('div');
div.onclick = function(){
if(div.innerHTML == "公诚勇毅"){
div.innerHTML = "考得上!";
}else{
div.innerHTML = "公诚勇毅";
}
}
script>
<img id="one" src="火箭威少.jpg" alt="二哥" title="火箭威少">
<script>
let img = document.querySelector('#one');
//获取元素的属性 用 .
console.log(img.title);
img.onclick = function(){
img.src = '威少.png';
img.alt = '神龟';
img.title = '雷霆威少';
}
script>
实现显示密码效果
<input id="password" type="password">
<input id="button" type="button" value="显示密码" >
<script>
let password = document.querySelector('#password');
let button = document.querySelector('#button');
button.onclick = function(){
if(button.value == '显示密码'){
password.type = 'text';
button.value = '隐藏密码';
}else{
password.type = 'password';
button.value = '显示密码';
}
}
script>
全选/取消全选
<input type="checkbox" class="city">徐州
<input type="checkbox" class="city">淮安
<input type="checkbox" class="city">盐城
<input type="checkbox" class="city">连云港
<input type="checkbox" class="city">宿迁
<input type="checkbox" class="all">全选
<script>
let all = document.querySelector('.all');
let city = document.querySelectorAll('.city');
all.onclick = function(){
for(let i = 0; i < city.length; i++){
city[i].checked = all.checked;
}
}
for(let i = 0; i < city.length; i++){
city[i].onclick = function(){
all.checked = checkCity();
}
}
//判断city中的元素是否都被选中
let checkCity = function(){
for(let i = 0; i < city.length; i++){
if(!city[i].checked){
return false;
}
}
return true;
}
//city[i].onclick 是给元素添加属性的,点击操作发生时则对应属性发挥作用
//错误代码
// if(all.checked){
// for(let i = 0; i < city.length; i++){
// city[i].onclick = function(){
// all.checked = false;
// }
// }
// }
script>
点击计数
<input type="button" id="jian" value="-">
<input type="text" id="text" value="0">
<input type="button" id="jia" value="+">
<script>
//计数
let text = document.querySelector('#text');
let Bjia = document.querySelector('#jia');
let Bjian = document.querySelector('#jian');
Bjia.onclick = function(){
let value = parseInt(text.value);
value++;
text.value = value;
}
Bjian.onclick = function(){
let value = parseInt(text.value);
value--;
text.value = value;
}
script>
由于JS中变量没有脊柱命名法,所以CSS中的变量如 font-size 在JS中写作 fontSize,background-color 写作 backgroundColor
<div>他朝若是同淋雪,此生也算共白头div>
<script>
let div = document.querySelector('div');
div.style.color = 'red';
div.style.backgroundColor = 'green';
script>
案例
<div>他朝若是同淋雪,此生也算共白头div>
<script>
let div = document.querySelector('div');
div.onclick = function(){
let size = parseInt(div.style.fontSize);
size += 100;
div.style.fontSize = size + 'px';
}
script>
<style>
.light {
background-color:aqua;
}
.dark{
background-color: blueviolet;
}
style>
<div class="light">他朝若是同淋雪,此生也算共白头div>
<script>
let div = document.querySelector('div');
div.onclick = function(){
if(div.className == 'light'){
div.className = 'dark';
}else{
div.className = 'light';
}
}
script>
<script>
let div = document.createElement('div');
div.innerHTML = '枣庄';
div.className = 'ShanDong';
div.style.fontSize = '20px';
console.log(div);
script>
迁户口操作
<div class="container">
<div class="HeNan">商丘div>
<div class="JiangSu">徐州div>
div>
<script>
let div = document.createElement('div');
div.innerHTML = '枣庄';
div.className = 'ShanDong';
div.style.fontSize = '20px';
console.log(div);
//插入到所有子元素的后面
let container = document.querySelector('.container');
container.appendChild(div);
//将新增节点插入到指定子元素前面
// let JiangSu = document.querySelector('.JiangSu');
//注意div的子元素的另一种表现方式
let JiangSu = container.children[1];
container.insertBefore(div,JiangSu);
//再插入一次,迁户口操作,操作的是同一个对象,只是移动了位置,不会再添加一个标签的
let HeNan = container.children[0];
container.insertBefore(div,HeNan);
script>
let 删除的元素 = 父元素.removeChild(子元素)
<div class="container">
<div class="HeNan">商丘div>
<div class="JiangSu">徐州div>
div>
<script>
let container = document.querySelector('.container');
let JiangSu = container.children[1];
let removed = container.removeChild(JiangSu);
script>