适合新手前端学习JavaScript（第一天）

Javascript

js的历史

javascript

​ 为了处理表单的验证

1995年，网景公司 布兰登·艾奇 10天 Mocha

​ 9月 LiveScript

​ 12月 java的顺风车 javascript

微软： JScript

1997年 js1.1 为蓝本 欧洲计算机制造商协会 ECMAScript

js和es的关系

js和ECMAScript的关系:

​ ECMAScript规定了javascript的语法标准

​ javascript是ECMAScript的体现

js的概念

js是基于对象和事件驱动的解释性脚本语言;

特点

2.1 基于对象: 页面中所有的内容 自己创建的对象都可以来直接用

​ 一切皆对象 万物皆对象

2.2 事件驱动: 浏览器会直接对用户或者是客户端的行为进行一个响应

2.3 解释性: 浏览器可以直接执行js代码

2.4 跨平台性: 只要有浏览器就可以运行

组成部分

ECMAScript 语法标准

DOM Document Object Model 文档对象模型

BOM Browser Object Model 浏览器对象模型

引入方式

行内

基于事件 通过事件进行触发

​ 第一个鼠标事件: onclick

​ οnclick=“alert(‘hello js’)”

​ 缺陷： 单个事件的简单的代码触发 不推荐使用

<div style="width: 100px;height: 100px;background: red;" onclick="alert('hello js')">这是一个divdiv>

内嵌

内嵌： script 双标签 可以写在页面的任何位置 也可以有多个

​ 执行: 从上到下执行 遇到script标签就会去执行其中的代码 其中代码执行完成后，才会往后执行

​ 建议: body的结束标签之前

​ 没有遵循三分离

​ 常用： 学习 授课 结构和行为一一对应

w3c:

​ 实现分离: html–结构 css–样式 js–行为

<script>
    alert('3');
</script>

外链

1. 有js文件 后缀.js

2. script 双标签 src地址属性引入对应的文件地址

3. js文件中 直接写代码

推荐使用: 开发过程中

注意： 在外链的js中，如果再写代码 不会执行

<script src="./06.js">
    // 在外链的js中，如果再写代码 不会执行
    alert('2');
script>

注释

1. 行注释 //

2. 块注释 /* 注释代码 */

调试语言

alert

alert(‘内容’)

作用： 弹出提示内容

	  阻断页面

alert('hello js')"

console.log

console.log(‘内容’) 在控制台输入内容

console.log(值1, 值2, 值3, … ); 可以同时输出在控制台

// 鼠标移动
document.getElementById('box').onmousemove = function(){
     
    // alert('onmousemove');
    console.log('onmousemove');
} 

事件三部曲

1. 找 找到是谁来触发 鼠标操作谁就找谁

​ 通过id:

​ document.getElementById(‘id名’)

​ object HTMLDivElement—获取成功 将box从页面中拿到js中来使用

​ null—获取失败 检查单词 检查大小写

​ document–文档

​ get–获取

​ Element–元素

​ ById—通过id

2. 添加事件 鼠标操作谁就加给谁

​ 语法: 元素.事件 = function(){}

​ onclick

3. 具体做的事情:

​ function后面的{}中

// 1. 找
alert(document.getElementById('box'));
// alert(document.getElementById('box1'));

// 2. 加事件
document.getElementById('box').onclick = function(){
     
    // 3. 具体的事情
    alert('1');
}

window.onload

执行顺序： 代码从上往下执行 执行到script标签的时候 body还没有执行 页面中还没有元素 获取不到box

Cannot set property ‘onclick’ of null: 不能把onclick这个属性加给null

​ 元素没有获取到

window.onload作用: 等待页面及资源加载完成后, 在执行其中的代码

window.onload = function(){

​ 所有代码

}

window.onload = function () {
     
    // 1. 找
    alert(document.getElementById('box'));
    // alert(document.getElementById('box1'));

    // 2. 加事件
    document.getElementById('box').onclick = function () {
     
        // 3. 具体的事情
        alert('1');
    }
}

事件

1. 点击事件 onclick

2. 双击事件 ondblclick

3. 滑入事件 从元素外面进入到元素里面 onmouseover onmouseenter

4. 滑出事件 从元素里面出去到元素外面 onmouseout onmouseleave

5. 鼠标按下 onmousedown

6. 鼠标抬起 onmouseup

7. 右键菜单 oncontextmenu

8. 鼠标移动 onmousemove 一直不间断触发

// 找元素
// alert(document.getElementById('box'));
// 加事件  元素.事件 = function(){}
document.getElementById('box').onclick = function(){
     
    // 具体做的事情
    alert('单击');
}

// 加事件  元素.事件 = function(){}
document.getElementById('box').ondblclick = function(){
     
    // 具体做的事情
    alert('双击');
}

// 滑入滑出
// 滑入
document.getElementById('box').onmouseover = function(){
     
    // 具体做的事情
    alert('mouseover');
}
document.getElementById('box').onmouseenter = function(){
     
    // 具体做的事情
    alert('mouseenter');
}

// 滑出
document.getElementById('box').onmouseout = function(){
     
    // 具体做的事情
    alert('mouseout');
}
document.getElementById('box').onmouseleave = function(){
     
    // 具体做的事情
    alert('mouseleave');
}

// 按下
document.getElementById('box').onmousedown = function(){
     
    alert('mousedown');
}

// 抬起
document.getElementById('box').onmouseup = function(){
     
    alert('mouseup');
}

// 右键菜单
document.getElementById('box').oncontextmenu = function(){
     
    alert('contextmenu');
}

// 鼠标移动
document.getElementById('box').onmousemove = function(){
     
    // alert('onmousemove');
    console.log('onmousemove');
} 

over与enter区别

over与enter的区别： over会用子元素触发父元素身上的事件 enter不会

document.getElementById('box').onmouseover = function(){
     
    console.log('over');
}
document.getElementById('box').onmouseenter = function(){
     
    console.log('enter');
}


document.getElementById('box').onmouseout = function(){
     
    console.log('out');
}
document.getElementById('box').onmouseleave = function(){
     
    console.log('leave');
}

变量

概念

变量：用来存储数据的容器

​ 用关键字 var 声明

声明方式

1. 先声明，后赋值;

​ var 变量名; 变量名 = 值;

2. 声明的同时并赋值;

​ var 变量名 = 值;

3. 同时声明多个;

​ var 变量名1, 变量名2, …;

​ 变量名1 = 值1;

​ 变量名2 = 值2;

4. 同时声明多个的同时并赋值;

​ var 变量名1 = 值1, 变量名2 = 值2, …;

// 先声明 后赋值
var box; box = 1;
console.log(box);

// 声明的同时并赋值
var obox = 2;
console.log(obox);

// 同时声明多个
var a,b,c;
a = 10;
b = 20;
c = 30;
// console.log(a);
// console.log(b);
// console.log(c);
console.log(a, b, c);

// 同时声明多个并赋值
var x = 30, y = 40, z;
z = 50;
console.log(x, y);

命名规范

命名规范:

​ \1. 由字母、数字、_、$组成, 数字不能够开头的

​ \2. 不能使用关键字和保留字 top

​ \3. 不能重复, 重复的话 后面的会覆盖前面的

建议:

​ \1. 具有语义化 userName password isLogin

​ \2. 遵循小驼峰命名法 多个单词组成一个变量名, 从第二个单词开始首字母大写 userName

// continue;
// break;
// case

var top = 10;
console.log(top); // 得不到10

var abc = 20;

var abc = 40;
console.log(abc); // 40

场景

1. 用来存储元素 元素有多个地方用到的时候 将元素存储到一个变量中 只获取一次元素 多次操作

2. 需要存储数据的时候

操作表单内容

1. 获取表单内容: var 变量名 = 元素.value;

2. 设置表单内容: 元素.value = ‘要设置的内容’;

3. 注意:

   1. 步骤：先获取元素 在获取/设置内容
   2. 获取下拉列表的值 没有value属性的情况下 获取到的是option中的内容，如果有value 获取的就是value的值
   3. 设置下拉列表的值 有value写value的值 没有value就写option的内容 值与选中的项必须一模一样 不一样的话就选不中出现空白

// 获取表单内容  
// 1. 获取元素
var inp = document.getElementById('inp');
console.log(inp);
// 2. 获取表单的值  内容
var inpValue = inp.value;
console.log(inpValue);

// 3. 设置表单内容
inp.value = '古力娜扎';

// 获取文本域的值
var txt = document.getElementById('txt');
console.log(txt);
var txtValue = txt.value;
console.log(txtValue);
// 设置文本域的值
txt.value = '这是古力娜扎的私人领域';

// 获取下拉列表的值  没有value属性的情况下 获取到的是option中的内容
// 如果有value  获取的就是value的值
var city = document.getElementById('city');
console.log(city);
var cityV = city.value;
console.log(cityV);

// 设置下拉列表的值
//    city.value = 'gz '; // option中的内容 还是value的内容  有value写value的值  没有value就写option的内容  值与选中的项必须一模一样  不一样的话就选不中出现空白
city.value = 'gz'; 

操作闭合标签内容

闭合标签: 双标签 有起始标签有结束标签就是闭合标签

闭合标签的内容： 起始标签和结束标签中间

innerText

获取闭合标签的内容:

​ var 变量名 = 元素.innerText;

设置闭合标签的内容:

​ 元素.innerText = ‘值’;

// 获取内容  先获取元素
var box = document.getElementById('box');
console.log(box);
var txt = box.innerText;
// box.innerText; // 不会报错 没有任何作用 既没有输出在控制台 也不会显示在页面中
console.log(txt);

// 设置box的内容为: 新的内容
box.innerText = '新的内容';

innerHTML

获取闭合标签的内容:

​ var 变量名 = 元素.innerHTML;

设置闭合标签的内容:

​ 元素.innerHTML = ‘值’;

// 获取ul的内容
var oul = document.getElementById('oul');
console.log(oul);
var oulHTML = oul.innerHTML;
console.log(oulHTML);

// 设置ul的内容
oul.innerHTML = '新的内容';

区别

1. 都是获取闭合标签的内容，innerText不能获取标签 innerHTML可以获取标签

2. 都可以设置闭合标签的内容 innerText不识别标签的 innerHTML可以识别标签

3. 设置内容的时候 后面的会覆盖前面的

​ 不想覆盖 累加

​ 语法：元素.innerHTML = 元素.innerHTML + ‘新的内容’;

var oulHTML = oul.innerHTML;
console.log(oulHTML);

var oulTxt = oul.innerText;
console.log(oulTxt);
// 设置ul的内容
// oul.innerHTML = '新的内容';
// oul.innerHTML = '
新的内容
';
// oul.innerText = '
新的内容
';

// 累加: 语法：元素.innerHTML = 元素.innerHTML + '新的内容';
oul.innerHTML = oul.innerHTML + '新的内容';
oul.innerHTML = oul.innerHTML + '
新的内容
';

变量拼接

1. 删除 被替换的内容删除掉
2. 加 加两个引号(与最外层引号一致) 以及两个加号
3. 拼接 在加号中间 加上变量名

// 变量不能直接写在引号中  相当于是英文字符  而不是变量
// 变量拼接： 1. 删除 被替换的内容删除掉  2. 加  加两个引号(与最外层引号一致)  以及两个加号 3. 拼接 在加号中间 加上变量名
oul.innerHTML = oul.innerHTML + '
' + txt + '
';

操作属性

属性： 写在起始标签上 除了起始标签名以外的都是属性

操作属性：

​ \1. 获取属性: var 变量名 = 元素.属性名;

​ var 变量名 = 元素[‘属性名’]; var 变量名 = 元素[变量];

​ \2. 设置属性: 元素.属性名 = ‘值’;

​ 元素[‘属性名’] = ‘值’; 元素[变量] = ‘值’;

点和[]的区别： []里面可以是变量 可以是’属性名’ 点后面只能是属性名

操作id

   \1. 获取属性: var 变量名 = 元素.id;

​ \2. 设置属性: 元素.id = ‘值’;

var div = document.getElementById('abox');
console.log(div);
var txt = div.id;
console.log(txt);

var btn = document.getElementById('btn');
console.log(btn);
// 加事件
btn.onclick = function(){
     
    // 具体做的事情  元素.属性名 = '值';
    div.id = 'bbox';
}

操作class

   \1. 获取属性: var 变量名 = 元素.className;

​ \2. 设置属性: 元素.className = ‘值’;

class: 是关键字 所以不能直接用

需要用 className

场景：

​ \1. 修改多个样式 2个以上

​ \2. 样式跟随鼠标改变 点击div让div的背景色变蓝 点击其他按钮让某个元素的样式改变

var div = document.getElementById('abox');
console.log(div);

// var txt = div.class;  错误
var txt = div.className;
console.log(txt);

// 设置类名
div.className = 'ab';

操作src

   \1. 获取属性: var 变量名 = 元素.src;

​ \2. 设置属性: 元素.src = ‘值’;

绝对地址： 以盘符为开头

​ file:///E:/%E4%B8%AD%E5%85%AC%E6%95%99%E8%82%B2/1207/day01/img/1.jpg

相对地址：

​ ./ 同一个

​ …/ 上一个

// 获取元素
var img = document.getElementById('img');
console.log(img);
// 获取src的值
var txt = img.src;
console.log(txt); // file:///E:/%E4%B8%AD%E5%85%AC%E6%95%99%E8%82%B2/1207/day01/img/1.jpg  没用

var txt1 = img['src'];
console.log(txt1);

var a = 'src';
console.log(a);
var txt2 = img[a];
console.log(txt2);

// 设置的时候写相对地址
// 点击img  改变img为第二张图
img.onclick = function(){
     
    // img.src = './img/2.jpg';
    // img['src'] = './img/3.jpg';
    var a = 'src';
    img[a] = './img/4.jpg';
}

操作样式

单个属性操作

修改style属性的某一个属性

操作样式属性: 只能操作行内

​ \1. 获取样式属性: var 变量名 = 元素.style.属性名;

​ \2. 设置样式属性: 元素.style.属性名 = ‘值’;

在js中 没有连字符 转换成驼峰命名法 font-size —> fontSize

var box = document.getElementById('box');
console.log(box);
var w = box.style.width;
console.log(w); // 空

box.style.width = '300px';
box.style.background = 'blue';
box.style.height = '300px';

多个属性操作

\1. 获取： var 变量名 = 元素.style.cssText;

\2. 设置： 元素.style.cssText = ‘值’;

值:写的样式，样式的语法与css中语法一致 width:100px; font-size: 21px;

直接给style赋值, 原先写在行内的样式就会被覆盖掉

var box = document.getElementById('box');
console.log(box);
// 批量操作样式
var txt = box.style.cssText;
console.log(txt);

// 设置样式
box.style.cssText = 'width:300px; height: 300px; font-size: 40px; color: #fff;background: black;';