01-第一章初识Javasript

作者: 晚溪呀 | 来源:发表于2018-11-30 01:20 被阅读0次

一、JavaScript（JS）是什么

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。
JavaScript通常用来操作HTML页面，响应用户操作，验证传输数据等
java和JavaScript有什么关系？java和JavaScript没有关系
jQuery和JavaScript有什么关系？jQuery是由JS编写的一个js库。

二、JS代码写在哪里？

1. JavaScript代码可以写在页面的多个地方

JavaScript书写格式
和CSS书写格式一样, JavaScript也有三种书写格式, 分别是"行内式"、"内嵌式"、"外链式"

和CSS书写格式一样, JavaScript三种书写格式中也推荐大家使用"外链式", 遵守结构、样式、行为分离

1.行内式格式(不推荐)

<div onclick="alert('hello world');">我是div</div>

2.内嵌式格式

</body>
... ...
<script type="text/javascript">
       alert("hello world");
</script>
</body>

3.内嵌 js，

</body>
<script type="text/javascript">
       alert("hello world");
</script>
</body>

内嵌式注意点:

通常将js代码放在body的最后, 因为HTML是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);

HTML页面中出现<script>标签后，就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式，页面的下载和渲染都必须停下来等待脚本的执行完成才能继续, 所以如果把js代码写在head中, 那么js代码没有执行完毕之前后续网页无法查看

如果不愿意把js代码放在body的最后, 也可以放在head标签中, 但是为了保证执行js代码时HTML一定已经被加载了, 那么需要添加一些额外代码.(不推荐)

如果写在标签之前，你将会获取到一个空的值，就会报错，因为页面还没加载完这个标签，就是返回null

<head>
    <script>

        //  告诉浏览器在整个页面加载完成后才执行
        window.onload = function () { // 必须添加这句
            alert("hello world");
        }
    </script>
</head>

外链 js文件里面，利用src属性引入
标签属性里面（不推荐）；

1. script标签中的属性type="text/javascript"或language=”javascript”，HTML5新规则下可以什么都不用加；

2. script标签可以放置于任何位置，不同的位置要注意加载顺序，通常放在head或body结束之前；

三、写JS代码需要注意什么

1. 严格区分大小写；
2. 语句字符都是半角字符；（字符串里面可以使任意字符）
3. 某些完整语句后面要写分号 (;)；
4. 代码要缩进，缩进要对齐。

5. 和C语言一样, JS中严格区分大小写

alert("hello world"); // 正确 
Alert("hello world"); // 错误

6. 和C语言一样, 每一条JS语句以分号(;)结尾

如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
并且有些时候浏览器会加错分号，所以在开发中分号必须写

7. JS中会忽略多个空格和换行

alert
(
"hello world"
);

四、变量名的命名规范：

1..不能纯数字
2.不能以数字开头
3.严格区分大小写
4.不能使用关键字和保留字
5.可以使用符号（最好是英文符号）
6虽然可以使用中文作为名字，但是非常不推荐使用

应该是以为英文符号或者英文字母开头，中间可以有数字。但是开头不能有数字或者全部纯数字

五、 JS里的系统弹窗代码

.alert('内容');

.confirm('确定？');

.prompt('请输入您的姓名：');

console.log( )

JS中的常见输出方式

1. 在浏览器弹窗中显示内容

alert("hello world");

prompt("请输入内容：");

confirm("你好吗?");

2.在页面中显示内容

document.write("hello world2");

3.在控制台中显示内容

console.log("hello world3");
console.error("错误信息");
console.warn("警告信息");

image.png

六、变量

1.变量名的命名规范：

(1). 不能纯数字
(2). 不能以数字开头
(3). 严格区分大小写
(4). 不能使用关键字和保留字
(5). 可以使用符号（最好是英文符号）
(6). 虽然可以使用中文作为名字，但是非常不推荐使用

很多时候，当我们重复使用某个元素或者某个数据时，内容可能太长或者数据要进行改变，这时就需要定义变量来代替他们。
应该是以为英文符号或者英文字母开头，中间可以有数字。但是开头不能有数字或者全部纯数字

2. 语法：`var` + `变量名`

var 声明
变量命名规则：

可以使用$ , _ ,字母， 数字，不能以数字开头字母严格区分大小写见名知意

1.var abc; //申明不赋值
2.var obj = 123;//申明立即赋值

一个var可以声明多个变量，变量不一定要马上赋值

1.    var a,b,c,d;//一次声明多个变量
2.    var a = 1,b = 2, c = 3,d = 4;//一次声明多个申明即赋值的变量

3.. `var` `let` `const` 的作用

(1)都是需要先声明后使用
(2)已经声明的变量不需要再声明一次
(3)var 全局变量会自动的成为 window的属性
(4)let 和 const 声明的全局变量不会成为window的属性

4.`let` 和 `const`的区别

let 声明的叫做变量，可以重新赋值
const 声明的叫做常量，恒定不能重新赋值

5.注意

(1).全局变量只有一个，声明的全局变量是互通的
(2).var 声明的变量会挂载到顶层对象的身上，成为顶层对象的属性。
(3).这种行为仅仅是在用var声明全局变量的时候。
(4).同一作用域同一变量不能声明两次
(5).var 声明的全局变量没有这方面的限制
(6).let const 参与声明的变量。在同一作用域只允许声明一次
(7).const 声明的变量必须马上赋值，否则就会报错，而 let 可以先定义，后赋值
义，后赋值

注意：

es6：全IE基本不兼容

七、Js中的注释

单行 //
多行 /* */

八、获取元素

1. 获取元素

特殊的标签

document.body
document.head
document.title

一般标签

document.getElementById() 匹配ID名称…
ele.getElementsByTagName() 匹配标签名是…的集合动态方法
document.getElementsByName() 匹配name是…的集合动态方法
ele.getElementsByClassName() 匹配class名称…的集合动态方法
ele.querySelector(); 匹配css选择器的第一个
ele.querySelectorAll(); 匹配css选择器匹配的所有集合
. 及[]的运用

九、获取和修改元素HTML

1.元素HTML内容

ele.innerHTML 获取元素HTML
ele.innerHTML = ‘字符串’; 修改元素HTML

2.元素文本内容

标准

ele.textContent 获取元素文本
ele.textContent = ‘字符串’; 修改元素文本

非标准(ie低版本)

ele.innerText 获取元素文本
ele.innerText = ‘字符串’; 修改元素文本

3.document.write() ————————-能解析HTML

往body后追加东西，需要注意的是当文档流关闭后，会直接覆盖整个文档
关于文档流关闭，和window.onload的讲解

4.innerText 和 innerHTML的区别：

1. innerText是标签内的文本,输入输出的是字符串;可以解析标签 就是纯文本，不会解析标签
2. innerHtml是<标签内的文本,输入输出到该DOM内部纯HTML代码;可以解析标签
3. value是表单元素特有的属性,输入输出的是字符串;
（能获得焦点的基本都是通过value属性来获取）

点号代表选择它下面的
对象直接点号.选中的style是行内style;

不写等号=就是获取；写了=就是赋值

写了"" 表示选择的是这个字符串，不加就是选择的是对象！

十、需要注意：

1.写在window.load 中的信息和在body后面的信息。放在body中的信息会优先加载。因为window.load 是在监听这个页面加载完之后才会执行的。

    <script>
        window.onload = function (){
            console.log("这是文字");
        }
    </script>


     //  优先加载
    <script>
        console.log("我也是文字");
    </script>

2. 引入外部js文件时，如果同时输出一段内容，写在外部js的文件会优先加载，因为window.load是在整个窗口加载完成后才执行的，所以引入的文件先执行.

    <script>
        window.onload = function (){
            console.log("我是文字1");
        }
    </script>

//  先执行.
<script src="01.js"></script>

3. 一般写外部js都写在window.load中

window.onload = function (){
    let divbox = document.getElementById("box");
    divbox.onmouseenter = function (){
        console.log("这是文字");
    }
}

4.给引入js文件后面加一个defer属性,defer属性会在页面加载完之后，window.onload 之前执行。

defer 只对外部js文件有效

<script src="01.js" defer></script>

5.声明多个变量可以用逗号隔开，这样我们就不用每次都写定义变量符号了。

let box1 = document.getElementById("box1"), 
    box2 = document.getElementById("box2"),
    defaultColor = "pink",
    popColor = "blue";

6. 如果想通过js来设置样式的话，可以使用cssText
cssText的写法相当于我们平时在写css行内样式的写法

7.如果需要同时添加多条属性，我们可以调用cssText这个函数。

box2.style.cssText = "width: 300px;height: 400px;background-color: red;transition-duration: 2s;";

8.如果只需要添加某一条样式的话

box1.style.backgroundColor = "red";

01-第一章初识Javasript

一、JavaScript（JS）是什么

二、JS代码写在哪里？

1. JavaScript代码可以写在页面的多个地方

三、写JS代码需要注意什么

四、变量名的命名规范：

五、 JS里的系统弹窗代码

JS中的常见输出方式

六、变量

1.变量名的命名规范：

2. 语法：`var` + `变量名`

3.. `var` `let` `const` 的作用

4.`let` 和 `const`的区别

5.注意

注意：

七、Js中的注释

八、获取元素

1. 获取元素

特殊的标签

一般标签

九、获取和修改元素HTML

1.元素HTML内容

2.元素文本内容

标准

非标准(ie低版本)

3.document.write() ————————-能解析HTML

4.innerText 和 innerHTML的区别：

十、需要注意：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

01-第一章 初识Javasript

一、JavaScript（JS）是什么

二、JS代码写在哪里？

1. JavaScript代码可以写在页面的多个地方

三、 写JS代码需要注意什么

四、变量名的命名规范：

五、 JS里的系统弹窗代码

JS中的常见输出方式

六、变量

1.变量名的命名规范：

2. 语法：var + 变量名

3.. var let const 的作用

4.let 和 const的区别

5.注意

注意：

七 、Js中的注释

八、获取元素

1. 获取元素

特殊的标签

一般标签

九、获取和修改元素HTML

1.元素HTML内容

2.元素文本内容

标准

非标准(ie低版本)

3.document.write() ————————-能解析HTML

4.innerText 和 innerHTML的区别：

十、 需要注意：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

01-第一章初识Javasript

三、写JS代码需要注意什么

2. 语法：`var` + `变量名`

3.. `var` `let` `const` 的作用

4.`let` 和 `const`的区别

七、Js中的注释

十、需要注意：