1.新建 index.html

2.新建main.js

之后在 index 中引入main. js

引入的位置在</body>之前

图-1

在index 文件中添加

<h1></h1>

3.打开mian.js  敲入以下代码

var dom=document.querySelector('h1');

dom.innerText='Review word';

4.使用浏览器打开index页面。

图-2

整个过程可以简括为两布

var dom=document.querySelector('h1');

使用 querySelector 获取到 h1对象存放dom中，

dom.innerText='Review word';

使用innerText在 dom插入文字

其中 dom 可以称为一个变量

js 的变量有  字符、数字、数组、对象等并且任何的物体都可以存储在对象中

js 运算符

+  ：  1+1、  'sss'+'ss'

-  *  /  ：减乘除

= :赋值

===： 判断是否相等

！ 、 ！==   非运算

test：

varmain_noodles='noodles';

if(main_noodles==='noodles'){

alert('eat noodles')

}else{

alert('eat nothing')

}

结果

图-3

对话框：使用了alert() 函数弹出计算后的结果，下面使用prompt 来获取输入的值

var  name=prompt('input your name');

var namedom=document.querySelector('h3');

namedom.innerText=name;

获取到  输入的值 然后将它赋值为H3

图-4 图-5

如果你看到一些东西长得像变量名但是有括号 —()— 在后面，这可能就是一个函数。函数通常包括arguments— 一些必要的参数。它们在括号内部, 如果有一个以上参数则使用逗号分开。

使用localstorage  and  方法

function  useStorage(name) {

     ocalStorage.setItem('name',name);

}

useStorage(name)

调用函数将name 存在localstorage 中 key 为‘name’

var resultname=localStorage.getItem('name');

namedom.innerText=resultname;

图-6

6.获取 属性

在index 中添加一张图片

<img src='jboox.jpg'/>

              varimgdom=document.querySelector('img');

                   imgdom.onclick=function() {

                   varsrc=imgdom.getAttribute('src');

                     if(src==='jbook.jpg'){

                          imgdom.setAttribute('src','windows.jpg')

                        }else{

                          imgdom.setAttribute('src','jbook.jpg')

                     }

}

为 图片添加点击事件，判断src 属性，来进行图片替换。

图-7