javaScript
JavaScript是运行在浏览器上的.功能就是控制页面和用户之间进行交互~~现在JavaScript俨然就成了前端的一哥!!
js的语法内容
通过浏览器开发者工具 console
js的书写位置
1.内联JS：写到html里面
<div onclick="console.log('hello')">
hello
</div> onclick 点击事件
2.内部js：写到HTML
<div >
hello
</div>
<script>
var div=document.querySelector("div");
div.onclick=function(){
console.log("hello");
}
</script>
3.外部js：写在单独文件 通过
<div > hello</div>
<script src="0607.js"> </script>
JS的执行顺序和在HTML中的出现顺序密切相关.和是否是外部JS/内部JS无关.
script标签，一旦使用src属性,标签内部的JS就不会执行了~~
JS的基本语法
变量 、类型
使用var关键字表示这是一个变量~
这个变量的类型是在赋值/初始化的时候确定的.
num的类型就是number
s的类型就是string
变量的类型会随着赋的值的类型变化 动态类型 js python ruby php
<script>
var num=10;
var s="hello";
</script>
js在进行一些运算时 会进行隐式转换boolen转换为0/1 弱类型
java go 静态 强类型
python 强类型 动态
js php 动态 弱类型
c静态 弱类型
动态类型 小程序开发更灵活
静态类型 大程序 接口之间相互约束 多人开发
let num=1；
减少了var的bug 有作用域 不能够重复定义
num=1 省略关键字就变成全局变量
let num=null；
let num=undefine；
js的类型
boolen number string object（对象）
typeof查看变量 的类型 null是object undefined 就是单独类undefined
条件语句
let num=10;
if（num<20）{
console.log("num<20");
}else{
console.log("num>=20");
}
if中的条件不一定是boolen 0 null undefined ‘’ 都是false
js字符串可以直接比较==
java中比较类型（instanceof）
**循环语句 **类似java
let n=1;
while（n<10）{
console.log(n);
n++;
}
for(let num=1;num<10;num++){
console.log(n);
}
数组
let arr=[1,'hello',true];
let arr2=new Array(10);
允许不同类型的元素
arr.length 获取长度 长度可以修改
多出来的长度会填充undefined
下标越界不会产生异常
如果下标是负数或者是字符串, 此时相当于给数组对象添加了新的属性～(新增了一个键值对进去)
插入元素 尾插
arr.push(20);
函数
函数定义
function hello（num）{
consonle.log(num); 函数支持多种类型
}
函数调用
hello（100）；
NaN not a number
a ll b整个表达式的值:
如果a为真,整个表达式就返回a (而不是true)
如果a为假,整个表达式就返回b的值(也不是boolean)
JS是为数不多的几个两个整数相除,结果是小数的编程语言~~
匿名函数类似匿名类 lambda表达式
（function （num）{
consonle.log(num); 函数支持多种类型
}）（）；匿名函数自调用
let fun=function（）{ 函数表达式
consonle.log(num);
}
fun（）；
对象
js中不需要类 直接创建对象 不支持继承 动态 封装 不是面向对象的语言 都是object类型
使用构造函数
创建对象, 通过构造函数来创建
// function Cat(name, color, type) {
// this.name = name;
// this.color = color;
// this.type = type;
// this.eat = function (food) {
// console.log("小猫在吃" + food);
// }
// }
// let cat = new Cat('小黑', '白色', '中华田园猫');
JSON不是一个和编程语言强相关的东西.
仅仅是一种字符串的格式.各种语言都可以使用JSON这种格式. JSON格式是基于JS对象的格式发展出来的~~
JSON是目前一种非常常见的数据交换格式~~
由于JSON仅仅是字符串,可以被多种语言都去使用.JSON就可以用于网络通信,也可以用于跨语言调用～~
let str = JSON.stringify(cat2); cat2转换为json格式字符串
DOM API 文档对象模型
事件：用户的操作 移动鼠标 点击鼠标 刷新页面 调整窗口大小
处理事件的方式
-
在html标签中通过onXXX属性进行捕获
onXXX属性的值就要对应到一个具体的函数当该事件触发了，就会自动调用对应的函数~~
<div onclick="clickDiv()">hello</div> <script> // 回调函数~~ function clickDiv() { console.log("hello"); } </script> -
先获取dom对象
<div >hello</div> <script> // 回调函数~~ function clickDiv() { console.log("hello"); } // 先获取到页面上的 div 对象 let divTag = document.querySelector("div"); // 此处的代码, 也不是立刻要调用 clickDiv, 而是把这个函数赋值给 onclick 属性 // 还是由浏览器决定何时进行调用. (clickDiv 仍然是一个回调函数) divTag.onclick = clickDiv; </script> -
先获取对象 接下来addEventListener的方式来进行
<div >hello</div> <script> // 回调函数~~ function clickDiv() { console.log("hello"); } // 先获取到页面上的 div 对象 let divTag = document.querySelector("div"); // divTag.addEventListener("click", clickDiv); </script>选中对象
document.querySelector 选中多个对象的时候 只返回第一个标签
document.querySelectorAll 选择多个对象 是一个数组
let buttons = document.querySelectorAll("button"); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = clickDiv; } for (let button of buttons) { button.onclick = clickDiv; } for (let i in buttons) { buttons[i].onclick = clickDiv; }getElementByld / getElementByClass / 早期API
修改元素内容 innnerHTML
<div>0</div>
<button onclick="add()">+</button>
<script>
function add() {
// 先获取到 div 内部的内容
let div = document.querySelector('div');
let num = parseInt(div.innerHTML); //div.innerhtml 得到string
num += 1;
div.innerHTML = num;
console.log(div.innerHTML);
}
</script>
修改元素属性
<script>
function changeHref() {
let a = document.querySelector('a');
a.href = 'http://www.sogou.com';
console.log(a.href);
}
function changeSrc() {
let img = document.querySelector('img');
if (img.src.indexOf('aaa/rose.jpg') >= 0) {
img.src = 'aaa/xiaojiejie.jpg'
} else {
img.src = "aaa/rose.jpg";
}
}
</script>
修改样式
1.修改行内样式 修改style 属性即可
<script>
function growUp() {
let img = document.querySelector('img');
let width = parseInt(img.style.width);
width += 50;
console.log(width);
// 设置这个属性的时候一定要带上单位~ 如果没单位, 就会失效
img.style.width = width + 'px';
}
</script>
2.修改元素css类名
获取dom对象 通过 classname属性设置元素css类名
<style>
div {
width: 100%;
height: 500px;
}
.light {
background-color: #fff;
color: #000;
}
.dark {
background-color: #000;
color: #fff;
}
</style>
<div class="light">
这是内容
</div>
<button onclick="turnOn()">关灯</button>
</script>
function turnOn() {
// 1. 获取到元素
let div = document.querySelector('div');
let button = document.querySelector('button');
// 2. 通过 className 决定如何切换样式
if (div.className == "light") {
div.className = "dark";
button.innerHTML = "开灯";
} else {
div.className = "light";
button.innerHTML = "关灯";
}
}
</script>
// 通过 JavaScript 把 ul 中已经存在的 li 给删掉
function removeLi() {
// 1. 先选中元素
let ul = document.querySelector('ul');
let li = document.querySelector('li');
// 2. 进行删除操作
ul.removeChild(li);
}
// removeLi();
// 通过 JavaScript 往 ul 中添加几个 li 元素
function addLi(content) {
// 1. 先创建出一个 li 标签
let li = document.createElement('li');
li.innerHTML = content;
console.log(li);
// 2. 把新创建好的标签给挂到 DOM 树上
let ul = document.querySelector('ul');
ul.appendChild(li);
}
// addLi("咬人猫");
// addLi("阿叶君");
// addLi("杨可爱");
表白墙案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墙</title>
<style>
.container {
width: 500px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #060;
}
.row {
display: flex;
justify-content: center;
}
.row {
padding: 5px 0;
font-size: 18px;
}
.row span {
width: 70px;
}
button {
margin: 10px auto;
/* button 默认是一个行内块元素, 类似于 img */
display: block;
width: 250px;
height: 40px;
background-color: orange;
color: #fff;
/* 去掉边框 */
border: none;
border-radius: 20px;
}
/* 伪类选择器 */
/* 当按钮被点击的时候就会触发该选择器 */
button:active {
background-color: #666;
}
.notice {
text-align: center;
margin-top: 30px;
}
</style>
</head>
<body>
<!-- 版心, 控制内容显示在页面居中位置 -->
<div class="container">
<h1>表白墙</h1>
<div class="row">
<span>谁</span>
<input type="text">
</div>
<div class="row">
<span>对谁</span>
<input type="text">
</div>
<div class="row">
<span>说了</span>
<input type="text">
</div>
<div>
<button>提交</button>
</div>
<div id="notices">
<!-- 这里假设已经有了一条结果了 -->
<div class="notice">
白猫 对 黑猫 说了: 喵
</div>
</div>
</div>
<script>
// 实现留言动作
// 1. 捕捉提交按钮的点击事件
let button = document.querySelector('button');
button.onclick = function () {
// 2. 获取到输入框里面的内容
let inputs = document.querySelectorAll('input');
let from = inputs[0].value;
let to = inputs[1].value;
let content = inputs[2].value;
if (from == '' || to == '' || content == '') {
return;
}
console.log(from + ", " + to + ", " + content);
// 3. 根据内容, 创建出一个 div 对象, 放到最下方的显示区中
let div = document.createElement('div');
div.innerHTML = from + " 对 " + to + " 说: " + content;
div.className = "notice";
let notices = document.querySelector('#notices');
notices.appendChild(div);
// 4. 要清空原来输入框的内容
for (let i = 0; i < 3; i++) {
inputs[i].value = '';
}
}
</script>
</body>
</html>
猜数字案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 500px;
margin: 0 auto;
}
h1 {
text-align: center;
color: #060;
}
.row {
display: flex;
justify-content: center;
padding: 5px 0;
}
.row .left-span {
width: 100px;
text-align: center;
}
.row .right-span {
width: 100px;
text-align: center;
}
input {
height: 50px;
width: 150px;
font-size: 20px;
line-height: 50px;
text-indent: 10px;
}
#guessButton {
height: 50px;
width: 50px;
}
#resetButton {
height: 50px;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<h1>猜数字</h1>
<div class="row">
<input type="text">
<button id="guessButton">猜</button>
</div>
<div class="row">
<span class="left-span">
次数:
</span>
<span class="right-span" id="count">0</span>
</div>
<div class="row">
<span class="left-span">
提示:
</span>
<span class="right-span" id="result"></span>
</div>
<div class="row">
<button id="resetButton">重置</button>
</div>
</div>
<script>
// 0. 页面加载的时候先生成一个随机数 [1-100]
// Math.random [0, 1) => [1, 100]
// Math.floor 进行向下取整
let toGuess = Math.floor(Math.random() * 100) + 1;
console.log("toGuess = " + toGuess);
// 1. 捕获 button 的点击事件
let button = document.querySelector('#guessButton');
button.onclick = function () {
// 2. 获取到 input 的内容
let input = document.querySelector('input');
if (input.value == '') {
return;
}
// 转成 整数 再去比较
let num = parseInt(input.value);
// 3. 拿 input 的内容和随机数进行对比
let message = '';
if (num < toGuess) {
// 提示低了
message = '低了';
} else if (num > toGuess) {
// 提示高了
message = '高了';
} else {
// 猜对了
message = '猜对了';
// 4. 如果猜对了, 禁止按钮和编辑框
// 通过 disabled 属性做出禁止点击和编辑的动作
input.disabled = true;
button.disabled = true;
}
// 5. 根据对比结果在页面上给出提示
let result = document.querySelector('#result');
result.innerHTML = message;
// 6. 每点击一次, 都要更新猜的次数
let count = document.querySelector('#count');
let countNum = parseInt(count.innerHTML);
countNum += 1;
count.innerHTML = countNum;
};
// 点击重置按钮, 刷新页面
let resetButton = document.querySelector('#resetButton');
resetButton.onclick = function () {
// 控制页面刷新
// 这是一个 BOM API
location.reload();
};
</script>
</body>
</html>
378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
