
下载GoogleChrome:https://www.google.cn/chrome/
ES6教程连接:https://wangdoc.com/es6/
JavaScript教程连接:https://wangdoc.com/javascript/basic/index.html
标签包裹的代码,标签可以写在或标签中。通过内嵌式,可以将多行JavaScript代码写在标签中。内嵌式是JavaScript最常用的方式。DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript内嵌式title>
<script>
alert('内嵌式')
script>
head>
<body>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript外链式title>
<script src="outside.js">script>
head>
<body>
body>
html>
outside代码

页面打开自动弹出警告框:
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript行内式title>
head>
<body>
<input type="button" value="点击此处" onclick="alert('行内式')"/>
body>
html>

// ,快捷键为Ctrl + /

,快捷键Ctrl + shift + /

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鼠标移入移出改变背景颜色title>
<style>
#box{
width: 200px;
height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
margin: 100px auto;
}
style>
head>
<body>
<h1>引入JavaScript的三种方式之一:嵌入式h1>
<div id="box">试试鼠标移入移出div>
<script>
//mouseover、mouseout
document.getElementById('box').onmouseover = function(){
//元素对象.style.css样式名
// document.getElementById('box').style.background = 'pink';
// 单行注释:// Ctrl + /
/*
多行注释 Ctrl + Shift + /
*/
this.style.background = 'pink';
}
document.getElementById('box').onmouseout = function(){
this.style.background = '#ccc';
}
script>
body>
html>
<input type="button" value="click me" id="btnA">
<script>
document.getElementById("btnA").addEventListener("click",hello);
function hello(){
alert("hello world!");
}
script>
<input type="button" value="click me" id="btn2">
<script>
document.getElementById("btn2").attachEvent("onclick",hello);
function hello(){
alert("hello world!");
}
script>
<input type="button" value="click me" id="btn3">
<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
alert("hello 1"); //不执行
}
btn3.onclick = function(){
alert("hello 2"); //执行
}
script>
<input type="button" value="click me" id="btn4">
<script>
var btn4 = document.getElementById("btn4");
btn4.addEventListener("click",hello1);
btn4.addEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
script>
<input type="button" value="click me" id="btn5">
<script>
var btn5 = document.getElementById("btn5");
btn5.addEventListener("click",hello1);//执行了
btn5.addEventListener("click",hello2);//不执行
btn5.removeEventListener("click",hello2);
function hello1(){
alert("hello 1");
}
function hello2(){
alert("hello 2");
}
script>

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h1>js的输入输出h1>
<div><i>人工智能i>div>
<script type="text/javascript">
// (1)alert('输出内容')用于弹出一个警告框,确保用户可以看到某些信息
// alert('警告框');
// let a = 10;
// alert('a')
// (2)console.log('输出内容')用于在浏览器的控制台中输出内容。
console.log(680);
console.log(true);
console.log([1,2,3,4,5,6]);
console.log({a:1,b:2,c:3});
console.table({a:1,b:2,c:3});//以表格的形式输出
console.warn("这个是警告输出信息");//输出警告信息
console.error("输出错误信息");//这个是错误信息
script>
body>
html>


DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<h1>js的输入输出h1>
<div id="box"><i>人工智能i>div>
<script type="text/javascript">
// (1)alert('输出内容')用于弹出一个警告框,确保用户可以看到某些信息
// alert('警告框');
// let a = 10;
// alert('a')
// (2)console.log('输出内容')用于在浏览器的控制台中输出内容。
console.log(680);
console.log(true);
console.log([1,2,3,4,5,6]);
console.log({a:1,b:2,c:3});
console.table({a:1,b:2,c:3});//以表格的形式输出
console.warn("这个是警告输出信息");//输出警告信息
console.error("输出错误信息");//这个是错误信息
console.clear();
// (3)innerHTML和innerText获取标签内部的HTML和文本,但是innerText忽略HTML
const box = document.getElementById('box');
console.log(box.innerHTML);
console.log(box.innerText);
script>
body>
html>








DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素title>
<style>
ul li{
width: 50%;
border: 1px solid black;
}
style>
head>
<body>
<ul>
<li>1li>
<li>2li>
<li>3li>
<li>4li>
ul>
<ul id="list01">
<li>1li>
<li>2li>
<li>3li>
<li>4li>
<li>5li>
<li>6li>
<li>7li>
<li>8li>
ul>
<script>
let lis1 = document.getElementsByTagName('li');
//获取指定元素下面的元素
let lis2 = document.getElementById('list01').getElementsByTagName('li');
for(let i=0;i<lis2.length;i++){
if(i%2==0){
lis2[i].style.backgroundColor = '#ccc';
}else{
lis2[i].style.backgroundColor = 'white';
}
}
// var oddlis = document.querySelectorAll('ul#list01 li:nth-child(odd)')
script>
body>
html>


$})*2这里的(li>{$})意思就是在li下面在生成一个从1开始递增的数列
function name(参数1,参数2,参数3){
要执行的代码}
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#box{
width: 200px;
height: 200px;
background-color: #ccc;
text-align: center;
line-height: 200px;
margin: 100px auto;
}
style>
<script>//最后运行这个代码
window.onload = function(){
document.getElementById('btn').onclick = function(){
document.getElementById('box').style.color = 'pink';
}
}
script>
head>
<body>
<div id="box">改变颜色div>
<div><input id="btn" type="button" value="改变颜色"/>div>
body>
html>
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script>
function varTest(){
var a = 1;
if(true){
var a = 2; //同样的变量
console.log(a); //2
}
console.log(a); //2
}
function letTest(){
let b = 3;
if(true){
let b = 6;//不同的变量
console.log(b)
}
console.log(b)
}
script>
body>
html>


DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<input type="button" value="单击随机改变网页的背景颜色">
<script type="text/javascript">
//console.log(document.querySelector('input'));
document.querySelector('input').onclick = function(){
//[0,255]
let r = Math.floor(Math.random()*256); //[0,256) 0.4
//console.log(r);
let g = Math.floor(Math.random()*256);
let b = Math.floor(Math.random()*256);
//document.body.style.backgroundColor = 'rgb(200,200,200)';
//es5
//document.body.style.backgroundColor = 'rgb(' + r + ',' + g + ',' + b + ')';
//es6
document.body.style.backgroundColor = `rgb(${r},${g},${b})`;
}
script>
body>
html>
console.log(Math.floor(5.85));
//expected output: 5
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>改变盒子的大小title>
<style>
.box{
width: 50px;
height: 50px;
background-color: #eee;
margin: 0 auto;
}
style>
head>
<body>
<div id="box" class="box">div>
<script type="text/javascript">
var box = document.querySelector('#box');
var i = 0;
box.addEventListener('click',show);
function show(){
++i;
if(i%2){
this.style.width = '200px';
this.style.height = '200px';
this.innerHTML = '大';
}else{
this.style.width = '50px';
this.style.height = '50px';
this.innerHTML = '小';
}
}
script>
body>
html>
DOCTYPE html>
<html>
<head>
<title>title>
<style type="text/css">
#lzy{
width: 100px;
height: 100px;
border:1px solid black;
margin: 0 auto;
}
div{
text-align: center;
margin-top: 30px;
}
style>
head>
<body>
<div id="hello!" >div标签div>
<div><button id="changeb">填充内容改变边框button>div>
<script type="text/javascript">
window.onload=function(){
//给按钮添加点击事件
document.getElementById('changeb').onclick=function(){
//获取id名为hello!的div
document.getElementById('hello!').innerHTML = 'hello!';
document.getElementById('hello!').style.border='2px dotted red';
}
}
script>
body>
html>