JS学习day01——js初识

1、javascript介绍

1、网站组成

• HTML:（HyperText Markup Language）超文本标记语言 结构
• CSS：（Cascading Style Sheets）层叠样式表 样式
• javaScript：简称js，用于网页交互的解释性脚本语言 行为

2、什么是JavaScript

JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。更具体一点，它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。

3、JavaScript的诞生

时间：1995

作者：布兰登·艾奇 (网景)

Javascript诞生记

http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.html

4、ECMAScript和JavaScript

ECMAScript：标准

JavaScript：实现

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

5、JavaScript 的组成

DOM：document object model (文档对象模型)

BOM：browser object model (浏览器对象模型)

ECMAScript：核心，定义这门语言的语法、关键字、语句等等

6、JavaScript的特点

1、解释性：

编译性：在代码执行之前，要将整个代码进行编译，编译完成之后，再交给计算机执行

解释性：在代码执行的时候，会逐行解释代码，解释完一行，就执行一行

2、基于对象

js中存在一些事先设置好的对象（工具），这些对象可以提供给我们一些方法，来实现一些最基本的效果。

3、事件驱动

通过事件驱动来解决用户和浏览器页面之间的交互的问题

4、跨平台

只要能运行浏览器，就能运行js

2、javascript初识

1、引入

1、内联（行内）

<!-- 1、内联（行内） 不推荐使用 -->
<div id="box" style="" onclick="alert('哥们，点我了')"></div>

2、内嵌

<!-- 2、内嵌 项目中不推荐使用，但是课上用 -->
<script>
    alert('我弹出了');
</script>

3、外链

<!-- 3、外链 项目中必须用 -->
<script src="js/a.js"></script>

总结：

1、代码从上向下执行

2、alert是弹出窗，它具有阻塞代码的作用，如果不点确定，代码不会向下走

3、js代码可以放在页面的任何地方，但是我们推荐放在</body>的前面，或者放在</head>的前面

4、如果一个script标签用作了外链，就不要再将它用作内嵌

<script src="">
// 不要再用作内嵌
</script>

2、入门三步曲

1找: 找到谁: document.getElementById(“id名”)

2加: 加什么事件（做什么操作）: 标签.事件

3做: 做什么事: 标签.事件 = function(){ 要做的事情 }

<!-- 需求：我有一个box，点击它，弹出一句话 -->
<div id="box"></div>

<script>
    // 1、找到box元素
    // document.getElementById('id名')
    // document 文档
    // get 获取
    // Element 元素
    // ById 通过id
    // 在这个文档里面，通过ID获取一个元素


    // 2、添加什么事件
    // 元素.事件

    // 3、干什么事
    // 元素.事件 = function () { 要做的事 }

    document.getElementById('box').onclick = function () {
        alert('点我了');
    }
</script>

3、window.onload

window.onload的作用是，当文档和资源都加载完成后执行。

<script>
    // 当整个文档加载完成之后，再执行的代码
    // 整个文档加载完成，包括这个文档引入的js css 图片等等一切资源
    window.onload = function () {
        document.getElementById('box').onclick = function () {
            alert('点我了');
        }
    }
</script>

4、其它鼠标事件

onclick ：点击事件

ondblclick ：双击事件

onmouseover ： 鼠标移入元素

onmouseout : 鼠标离开元素

onmouseenter ：鼠标移入元素

onmouseleave ：鼠标离开元素

onmousemove: 鼠标在元素中移动

onmousedown： 鼠标按下

onmouseup： 鼠标抬起

oncontextmenu ：鼠标右键菜单事件

window.onload = function () {
    // 点击
    document.getElementById('box').onclick = function () {
        console.log('点击');
    }

    // 双击
    document.getElementById('box').ondblclick = function () {
        console.log('点击');
    }

    // 滑上
    document.getElementById('box').onmouseover = function () {
        console.log('滑上');
    }

    // 滑离
    document.getElementById('box').onmouseout = function () {
        console.log('滑离');
    }

    // 滑动 鼠标在元素上移动的时候会不断的触发这个事件
    document.getElementById('box').onmousemove = function () {
        console.log('滑动');
    }

    // 滑上 这一对滑上滑离和上面不同
    document.getElementById('box').onmouseenter = function () {
        console.log('滑上');
    }

    // 滑离
    document.getElementById('box').onmouseleave = function () {
        console.log('滑离');
    }

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

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

    // 右键 上下文菜单（环境菜单）
    document.getElementById('box').oncontextmenu = function () {
        console.log('按右键了');
    }
}

5、变量

变量是对“值”的具名引用。变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。变量的名字就是变量名。

var 变量名 = 值;

// 方式一：声明并赋值
var a = 10;
console.log(a);

// 方式二：先声明，再赋值
var b;
b = '小王';
console.log(b);

// 方式三：一次声明多个
var c = 20,
    d = '前端开发',
    e = '河南';
console.log(c);
console.log(d);
console.log(e);

变量名的命名规则

• 1、只能使用英文字母、数字、_、$组成
• 2、不能以数字开头
• 3、不能使用关键字、保留字 （关键字：这门语言正在使用的字 保留字：js是发展的，将来可能要用到的字）

就跟我们学css时的class命名一样，变量名的命名，也有一些建议

• 1、具有语义化，即见名知义。
• 2、小驼峰命名，如：userName passWord

关键字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QgY1Q7m5-1606740910482)(./关键字.png)]

保留字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oYMPyeAN-1606740910484)(./保留字.png)]

变量拼接

• 1、删除被替换的
• 2、写两引号（外面是什么引号，里面就写什么引号）
• 3、在引号之间，写两加号
• 4、在加号之间，写你的变量

6、注释

注释一般用于解释代码，提高可读性，不会被JavaScript解析；

也可以用于调试代码，例如代码出现了问题，但是又找不到具体出问题的代码，就可以注释掉可能出问题的代码，看程序是否正常运行，逐步排查。

7、调试命令

JavaScript中调试命令，用于调试代码，查看数据信息，常用的调试命令有alert()与console.log()。

alert命令直接在页面弹出信息，一次只能显示一个数据，并且没有点击确定之前，不能显示下一个数据。

console.log命令，在控制器台打印数据，一次可以打印多个，并且不会堵塞。

3、javascript元素操作

元素操作分为内容操作、属性操作、样式操作等。每种分为读和写的操作

1、内容操作

1、表单元素内容操作

• 获取：元素.value
• 设置：元素.value = 值

<input type="text" id="txt" />
<button id="btn1">设置</button>
<button id="btn2">获取</button>

// 第一步：获取元素
var txt = document.getElementById('txt');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
// console.log(txt, btn1, btn2);

// 设置
btn1.onclick = function () {
    txt.value = '平头哥';
}

// 获取
btn2.onclick = function () {
    console.log(txt.value);
}

案例：解密

2、双标签元素内容操作

• 获取：元素.innerHTML

• 设置：元素.innerHTML = 值

• 获取：元素.innerText

• 设置：元素.innerText = 值

innerHTML识别标签，而innerText不识别标签

会覆盖原来存在的内容，如果想要留下原来的，则要用原来的加上新的

var box = document.getElementById('box');
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
// console.log(box, btn1, btn2);

// 获取
btn1.onclick = function () {
    console.log(box.innerHTML);
    console.log(box.innerText);
}

// 设置
btn2.onclick = function () {
    // box.innerHTML = '平头<i>妹</i>';
    // box.innerText = '平头<i>哥</i>';

    box.innerHTML = box.innerHTML + ':平头哥'; // 保留原来的，同新的拼接起来
}

案例：留言

2、属性操作

属性：写在起始标签里，以 key=“value” 这种形式展示的就是属性

<div id="box" title="平头哥" class="abc">小王</div>

// 获取：元素.属性名
// 设置：元素.属性名 = 值

var box = document.getElementById('box');
console.log(box.title); // 获取

box.title = '平头妹';

特殊：class要换成className。图片的src属性在获取时，返回的是一个绝对的地址，一般只给图片设置src属性，而不获取src属性。

3、样式操作

• 设置：元素.style.样式名 = 值;
• 获取：元素.style.样式名;

var box = document.getElementById('box');
box.style.width = '200px';
box.style.height = '200px';
box.style.backgroundColor = 'red';
box.style.fontSize = '30px';
box.style.color = 'yellow';

// -----------------------------

// 简单，如果之前标签上有样式，会被覆盖，一般不用
box.style.cssText = 'width:200px;height: 200px;background-color: blue; font-size: 30px; color: white;'

4、点操作符和中括号操作符

• 元素[‘属性名’]
• 元素[‘属性名’] = 值

当属性是一个变量的时候，点的形式不能操作，只能用中括号的形式

<div id="box" title="平头哥">我就是我</div>

var box = document.getElementById('box');

// 点的操作形式
// console.log(box.title);
// box.title = '平头妹';

// ---------------------

// console.log(box['title']);
// box['title'] = '小高';

// ----------------------
// 当属性是一个变量的时候，点的形式不能操作，只能用中括号的形式
var t = 'title';
// box.t  这样写，代表box里有t这样一个属性
console.log(box[t]);
box[t] = '小张';

保留字

关键字