JavaScript Study

最新推荐文章于 2021-09-26 19:06:31 发布

gk_boke

最新推荐文章于 2021-09-26 19:06:31 发布

阅读量711

点赞数

分类专栏：前端三件套文章标签： javascript dom html

本文链接：https://blog.csdn.net/gk_boke/article/details/108063038

版权

这篇博客详细介绍了JavaScript的学习路径，从基础语法、数据类型到面向对象编程，特别是DOM操作和BOM对象的使用。重点讲解了字符串、数组、对象、函数的用法，以及如何操作BOM中的location、document和cookie。此外，还提到了jQuery库的使用。

摘要由CSDN通过智能技术生成

JavaScript Study

1、简介

JavaScript是世界上最流行的脚本语言

最新版本已经到es6，但大部分浏览器只停留在支持es5代码上

开发环境~线上环境版本不一致

廖雪峰完整JavaScript教程

https://www.liaoxuefeng.com/wiki/1022910821149312

2、快速入门

2.1 引入JavaScript

1、内部标签

<!--不用显式定义type，也默认是javascript-->
    <script type="text/javascript">
        //...
    </script>

2、外部引入

abs.js

//...

test.html

<script src="qj.js"></script>

测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--script标签快，写javascript代码-->
    <!--<script>-->
        <!--alert('hello,world!');-->
    <!--</script>-->

    <!--外部引入-->
    <!--注意：script：标签必须成对出现-->
    <script src="js/qj.js"></script>
    <!--不用显式定义type，也默认是javascript-->
    <script type="text/javascript">
        //...
    </script>
</head>
<body>
</body>
</html>

qj.js

alert('hello,world');

2.2 基本语法入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.定义变量 类型变量 变量名=变量值
        var score = 1;
        //alert(num);
        //2.条件控制
        if(score>=60 && score<70){
    
            alert("及格");
        }else if(score>=70 && score<80){
    
            alert("良好");
        }else if(score>=80 && score<90){
    
            alert("优秀");
        }else {
    
            alert("other!")
        }
        //console.log(score) 在浏览器控制台中打印变量
    </script>
</head>
<body>
</body>
</html>

2.3 数据类型

变量

可以_ $ 开头，不能数字开头

var _

数值，文本，图形，音频，视频…

number

js不区分小数和整数，Number

123	//整数123
123.1 //是浮点数123.1
1.123e3 //科学计数法
-99 //负数
NAN //not a number
Infinity //表示无限大

字符串

’abc‘ “abc”

布尔值

true ，false

逻辑运算

&& 两者为真，结果为真
|| 一个为真，结果为真
！ 真即假 假即真

比较运算符

=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样结果为true）

这是js的一个缺陷，坚持不要用==进行比较

NaN===NaN 这个与所有的数都不相等，包括它本身

浮点数问题：

console.log((1/3)===(1-2/3));

尽量避免使用浮点数进行比较，存在精度问题

Math.abs(1/3===(1-2/3))<0.0000001;

null 和 undefined

null 空

undefined 未定义

数组

var arr = [1,2,3,'hello',null,true];

对象

对象是大括号{}，数组是中括号[]

每个属性之间用逗号隔开，最后一个不需要添加

var person = {
   
    name: "ngk",
    age:1,
    tags:['js','java','linux']
}

取对象的值 person.name;

2.4 严格检查模式

<!--
    前提：IDEA支持ES6
    'use strict' 严格检查模式，预防JavaScript的随意性导致的一些问题
    必须写在JavaScript第一行
    局部变量尽量使用let去定义
-->
<script>
    'use strict'
    let i = 1;  //ES6 let
</script>

3、数据类型

3.1 字符串

1、正常字符串使用单引号、双引号包裹

<script>
    'use strict'
    console.log('a');
    console.log("a");
</script>

2、注意转义字符

\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符

3、多行字符串编写（用反引号包裹）

<script>
    'use strict'
    let msg = `
        aa
        bb
        cc
        dd
        ee
    `;
    alert(msg);
</script>

4、模板字符串

 'use strict'
 let name = "ngk";
 let msg = `你好呀，${
     name}`;

5、字符串长度

str.length;

6、字符串的可变性（不可变）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9sI62qXk-1597665231160)(C:\Users\NongGuangKan\AppData\Roaming\Typora\typora-user-images\image-20200816154539706.png)]

7、大小写转化

student.toLowerCase()	//小写
student.toUpperCase()	//大写

8、获取指定下标

student.indexOf('t');

9、substring

[)
 //student
student.substring(1); //1个末尾元素 tudent
student.substring(1,3);	//tu

3.2 数组

Array可以包含任意的数据类型

let arr = [1,2,3,4,5,6];
arr[0]	//取值
arr[0]=1 //赋值

1、长度

arr.length

注意：给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oapai3c7-1597665231163)(C:\Users\NongGuangKan\AppData\Roaming\Typora\typora-user-images\image-20200816160532675.png)]

2、indexOf() 通过元素获得下标指引

3、slice() 截取Array的一部分，返回一个新数组，类似于String中的substring

4、push、pop 尾部

push: 压入尾部
pop:  弹出尾部元素

5、unshift，shift 头部

unshift: 压入到头部
shift: 弹出头部元素

6、排序 sort()

arr.sort(0)

7、元素反转 reverse()

arr.reverse()

8、concat()

arr.concat([1,2,3])
(6) ["a", "b", "c", 1, 2, 3]
console.log(arr)
(3) ["a", "b", "c"]

注意：concat()并没有修改数组，只是会返回一个新的数组

9、连接符 join

(3) ["a", "b", "c"]
arr.join('-')
"a-b-c"

10、多维数组

var arr1 = [[1,2],[3,4]];
console.log(arr1[1][1]);
4	//输出4

3.3 对象

若干个键值对

let person = {
   
    属性名: 属性值,
    属性名: 属性值,
    属性名: 属性值
}

let person = {
   
    name: "ngk",
    age: 3,
    email: "927937414@qq.com"
}

多个属性之间用逗号隔开，最后一个不要用逗号，

JavaScript的对象键都是字符串&

最低0.47元/天解锁文章

gk_boke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript Study

JavaScript Study1、简介JavaScript是世界上最流行的脚本语言最新版本已经到es6，但大部分浏览器只停留在支持es5代码上开发环境~线上环境版本不一致廖雪峰完整JavaScript教程https://www.liaoxuefeng.com/wiki/10229108211493122、快速入门2.1 引入JavaScript1、内部标签 <script type="text/
复制链接

扫一扫