JavaScript基础入门

JavaScript基础&入门

1、快速入门

1.1 引入script

  1. 内部标签

    <script>
        
    </script>
    
  2. 外部应用

aaa.js

//......

test.html

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

测试代码

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

<!--外部引入-->
<!--  注意:script标签必须成对出现  -->
    <script src="jk.js"></script>
</head>
<body>
<!-- script标签内  JavaScript代码 一般会放在bady内的最底部 -->

<script>
    alert('hello world');
</script>

</body>
</html>

1.2基本变量

基本变量只有一个var

    <script>
        //1 定义变量  变量类型  变量名 = 变量值
        var num =1;
        //2.条件控制
        if(2>1){
            alert("true")
        }
    </script>

1.3 数据类型

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

变量

var a = 1 //不能以数字开头

number

js不区分小数和整数,Number

123//整数
123.123//浮点数
1.223e3//科学计数法
-9932//复数
NaN  //not a number

字符串

‘abc’ “abc”

布尔值

true , false

逻辑运算

&&  两个都为证,结果为真
||  一个为真,结果为真
!  真即假,假即真

比较运算符

=
1 "1"
==  等于(类型不一样,值一样,也会判断为true)
===  绝对等于(类型一样,值一样,结果为true)

这是一个JS的缺陷,坚持不要使用 == 比较

须知:

NaN === NaN , 这个与所有的数值都不相等,包括自己

只能通过isNaN(NaN)来潘多这个数是否是NaN

浮点数问题:

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

尽量避免使用浮点数进行运算,存在精度问题

Math.abc(1/3-(1-2/3))<0.000000000001

null 和 undefined

null 空

nudefined 未定义

数组

Java中一些列相同类型的对象~,js中不需要这样

//保证代码的可读性,尽量使用[]
var arr = [1,2,3,4,5,'hello',true,null];

new Array(1,2,3,4,5,'fdsa');

取数组下标:如果越界了,就会

undefined

对象

对象是大括号,属猪是中括号

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

//Person person = new Person(1,2,3,4,5)
var person = {
    name: "hello",
    age: 3
}

取对象的值

person.name
> "hello"

1.4 严格检查格式

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

<!--
    前提:IDEA需要支持ES6语法
    'use strcit';严格检车模式,预防JavaScript的随意性导致产生的一些问题
    必须写在JavaScript的第一行
    局部变量都建议使用 let
-->

    <script>
        'use strcit'
        //全局变量
        var i = 1;
        //ES6  let
        let a = 1;
    </script>
</head>
<body>

</body>
</html>

2、数据类型

2.1 字符串

1、正常字符串我们使用单引号或者双引号包裹

*2、注意转义字符 *

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

3、多行字符串编写

//tab 上面  esc下面
var msg = 
`
hello
world
dfdsa
12435
`

4、模板字符串

let name = "hello world"
let age = 3;

let msg = `你好, ${name}`

5、字符串长度

console.log(str.length)

6、字符串的可变性,不可变

在这里插入图片描述

7、大小写转换

//注意,这里是方法,不是属性
student.toUpperCase()
student.toLowerCase()

8、substring

[)
student.substring(1)//从第一个字符串截取到最后一个字符串
 student.substring(1,3)  //[1,3)

2.2 数组

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

var arr = [1,2,34,45,5,]  //通过小标取值和赋值
arr[0]
arr[0] = 3

1、长度

arr.length

假如给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失

2、indexOf,通过元素获得下标索引

arr.indexOf(2)
1

字符串的"1" 和 数字1是不一样的

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

4、push,pop()

push: 压入尾部
pop:  弹出尾部的一个元素

5、unshift(),shift() 头部

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

6、排序sort

arr.sort()

7、元素反转

arr.reverse()
[1,2,3] → [3,2,1]

8、concat()

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

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

9、链接符join

打印拼接数组,使用特定的字符串连接

10、多维数组

arr = [[1,2],[3,4],["13","14"]]
arr[1][1]
4

数组:存储数据(如何存,如何取,方法都可以自己实现)

2.3 对象

若干个键值对

var 对象名 = {
    属性名:属性值,
    属性名:属性值,
    属性名:属性值,
    属性名:属性值  
}

var person = {
            name: "zhb",
            age : 18,
            email : "3187311481@qq.com",
            score: 0
        }

js中对象,{……}表示一个对象,键值对描述属性xxx:xxxxxxx,多个属性之间用逗号隔开,最后一个逗号不加逗号哦

JavaScript中的所有键都是字符串,值是任意对象

1、对象赋值

person.name = "zhb"
"zhb"
person.name
"zhb"

2、使用一个不存在的对象属性,不会报错!undefined

person.haha
undefined

3、动态的删减属性

delete person.name
true
person

4、动态的添加,直接给新的属性添加值即可

person.haha = "haha"
"haha"
person

5、判断属性值是否在这个对象中!

'age' in person
true
//继承
'toString' in person
true

6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true

2.4流程控制

if判断

        var age = 3;
        if(age > 3){
            alert("haha");
        } else{
            alert("┭┮﹏┭┮");
        }

while循环,避免程序死循环

var age = 3
while(age<100){
    age = age + 1
    console.log(age)
}
//避免while(true) 死循环

for循环

        for (let i = 0; i < 100; i++) {
            console.log(i);
        }

forEach循环

var h = [1,23,32,45,324,53,53,2]

h.forEach(function (value) {
    console.log(value)
})

2.5 Map 和 Set

ES6新特性

Map:

var map = new Map([['tom',100],['jack',97]]);
var name = map.get('tom');//通过key获得value
map.set('haha',13245);//添加值
map.delete("haha");//删除
console.log(name)

Set:无序不重复的集合

set.add(1);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含这个元素

2.6 iterator

遍历map

var map = new Map([['tom',100],['jack',97]]);
for (let x of map){
    console.log(x)
}

遍历数组

var map = [1,23,4,]
for (let x of map){
    console.log(x)
}

遍历set

var set = new set ([1,23,4,])
for (let x of set){
    console.log(x)
}

3、函数

3.1定义函数

定义方式一

绝对值方法

function ab(x){
    if(x>=0){
        return x
    } else {
        return -x
    }
}

一旦执行到return代表函数结果,返回结果

如果没有执行return,函数执行完也会返回结果,结果就是undefined

定义方式二

var a = function(x){
     if(x>=0){
        return x
    } else {
        return -x
    }
}

这是一个匿名函数,但是可以吧结果赋值给a,通过a就可以调用函数

方式一和方式二等价

调用函数

a(10)  //10
a(-10) //10

参数问题:JavaScript可以串任意个参数也可以不传递参数

rest

以前:

if(argument.length>2){
    for(var i = 2; i < arguments.length;i++){
        //.........
    }
}

ES6引入的新特性,获取除了已经定义的参数之外的所有参数…

function aaa(a,b,...rest){
    console.log("a=>"+a);
    console.log("b=>"+b);
    console.log(rest);
}

rest 参数只能写在最后,不许使用…标识

3.2 变量的作用域

局部作用域

function f() {
    for (var i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);// i出了作用于还可以使用
}
function f() {
    for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    console.log(i+1);// i出了作用于还可以使用
    
}

ES6 let关键字,结局了局部作用域的冲突问题!

建议大家都使用let去定义局部作用域

常量 const

在ES6之前,怎么定义常量:只有用全部大写字母命名的变量就是常量;建议不要修改这样的值

var pi='3.14'
console.log(pi);
pi = '242'//可以改变这个值
console.log(pi);

在ES6引入了常量关键字const

const pi='3.14'//只读变量
console.log(pi);
pi = '242'//可以改变这个值
console.log(pi);

3.3 方法

var yehl = {
    name:"叶鸿凌",
    bitrh: 2002,
    //方法
    age : function () {
        // 今年 - 出生年月
        var now = new Date().getFullYear();
        return now - this.bitrh;
    }
}
//属性
yehl.name
//方法,一定要带括号()
yehl.age()

this.代表什么? 把代码拆分开如下

function getAge() {
    // 今年 - 出生年月
    var now = new Date().getFullYear();
    return now - this.bitrh;
}

var yehl = {
    name:"叶鸿凌",
    bitrh: 2002,
    age: getAge
}

//yehl.age()  可以  是yehl调用的他
//getAge()    NaN   window是调用他的

this是无法指向的,是默认指向调用它的对象;

apple

在js中可以控制this的指向

function getAge() {
    // 今年 - 出生年月
    var now = new Date().getFullYear();
    return now - this.bitrh;
}

var yehl = {
    name:"叶鸿凌",
    bitrh: 2002,
    age: getAge
}

getAge.apply(yehl,[]);//this,指向了yehl,参数为空

4、内部对象

标准对象

typeof 123
"number"
typeof "13"
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"

4.1 Date

基本使用

var now = new Date();
now.getFullYear();//年
now.getMonth();//月  0~11 月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一  1970 1.1 0:00:00  毫秒数

4.2 JSON

json是什么

早期,所有的数据传输习惯使用XML文件!

  • JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
  • 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
  • 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。

在JavaScript一切皆为对象,任何s支持的类型都可以用son来表示;

格式

  • 对象都用{}
  • 数组都用[]
  • 所有的键值对 都是用key.value

JSON 字符串 和JS对象的转化

var user = {
    name:"jfdlksa",
    age: 3,
    sex: "男"
}

//对象转化为json字符串
var jsonUser = JSON.stringify(user);

//json 字符串转化为对象  参数为json字符串
JSON.parse('{name: "jfdlksa", age: 3, sex: "男"}')

4.3Ajax

  • 原生的js写法 xhr异步请求
  • jQuery封装号的方法his ${"#name"}.agaj("")
  • axios请求

5、 面向对象编程

5.1 什么事面向对象

javascript、 java、 c#、 … 面向对象 :javascript有些区别

类:模板

对象:具体的实例

在JavaScript这个需要大家换一下思维方式

原型:

var user = {
    name:"jfdlksa",
    age: 3,
    run : function () {
        console.log(this.name + "run");
    }
}

var xm = {
    name : "xm";
}

//小明的原型是user
xm._proto_ = user;

ES6之前的

function student(name) {
    this.name = name;

}

//给student新增一个方法
student.prototype.hello = function () {
    alert("hello")
}

class继承

class 关键字实在ES6引入的

//ES6
//定义一个学生的类
class student{
    constructor(name) {
        this.name = name;
    }
    hello(){
        alert("hello");
    }
}

var  xiaoming = new student("小明");
var  xiaoming = new student("小红");
xiaoming.hello()

继承

<script>



    //ES6
    //定义一个学生的类
    class student{
        constructor(name) {
            this.name = name;
        }
        hello(){
            alert("hello");
        }
    }

    class xiaoxue extends student{
        constructor (name,grade){
            super(name)
            this.grade = grade;
        }

        mygrade(){
            alert("我是一个小学生");
        }
    }

    var  xiaoming = new student("小明");
    var  xiaohong = new xiaoxue("小红",1);
</script>

原型链

_ proto _

在这里插入图片描述

已标记关键词 清除标记
相关推荐
<p style="color:#666666;"> JavaScript是一种网页交互语言,为网页增添了巨大的表现力和交互能力,极大提高了用户体验,如今很难在找到不使用JavaScript的网站了。本课程主要是为刚刚接触JavaScript的朋友准备,详细的讲解了JavaScript的基本语法,以及事件的处理操作。 </p> <p style="color:#666666;"> <br /></p> <p style="color:#666666;"> 本季课程为JavaScript基础语法篇,着重介绍了JavaScript脚本语言的基础语法部分<br /> 内容包含:<br /> ◆ 认识JavaScript脚本语言、发展史、编译工具<br /> ◆ JavaScript中的变量、数据类型、类型转换<br /> ◆ 条件选择(if--else, if--else if ,switch--case)<br /> ◆ 循环(while循环, do--while循环, for循环,循环嵌套 )<br /> ◆ 集合(Array基础常见操作、案例演示)<br /> ◆ set集合、map集合(集合的遍历、集合常用的方法)<br /> ◆ 课后习题 </p> <p style="color:#666666;"> <br /></p> <p style="color:#666666;"> 在本季课程的讲解部分结合了大量的案例演示,通过案例演示可以清楚的加深对JavaScript基本语言的理解; 建议在学习的过程中,一定要动手实战,这样才能真正的领悟到JavaScript的语法细节。 </p> <p style="color:#666666;"> <br /></p> <p style="color:#666666;"> <span style="color:#FF0000;"><strong>课程案例展示:</strong></span> </p> <p style="color:#666666;"> <br /></p> <p style="color:#666666;"> <strong><span style="color:#FF0000;">案例01:计算器</span></strong> </p> <p style="color:#666666;"> <img src="http://pic3.ablesky.cn/content/pic/communitythreadphoto/2019/07/20/17e34119-11b3-43b0-8dcf-d9cea3e86a84.gif" alt="" /></p> <p style="color:#666666;"> <span style="color:#FF0000;"><strong>案例02:生成学生成绩</strong></span> </p> <p style="color:#666666;"> <img src="http://pic4.ablesky.cn/content/pic/communitythreadphoto/2019/07/20/cf6e14dc-e492-417b-ae7a-7f463191ddeb.gif" alt="" /></p> <p style="color:#666666;"> <br /></p> <p style="color:#666666;"> <span style="color:#FF0000;"><strong>案例03:下拉菜单的联动</strong></span><img src="http://pic5.ablesky.cn/content/pic/communitythreadphoto/2019/07/20/d56761d2-2670-4ef4-8268-8c42bf4212d8.gif" alt="" /></p> <p style="color:#666666;"> <span style="color:#FF0000;"><strong>案例04:首页大图轮番</strong></span> </p> <p style="color:#666666;"> <img src="http://pic3.ablesky.cn/content/pic/communitythreadphoto/2019/07/20/8ba2ec2a-f482-45af-be4b-856433152a5d.gif" alt="" /></p> <p style="color:#666666;"> <img src="http://pic4.ablesky.cn/content/pic/communitythreadphoto/2019/07/21/fbc09717-d2fb-455b-8be5-a40334c09e4b.png" alt="" /></p>
<p><span style="font-family: 微软雅黑; margin: 0px; padding: 0px; font-size: 16px; color: #666666; background-color: #ffffff;">在本课程中,大喵将使用一款流行的JS动画框架GSAP.JS动画库,开发新手入门实战性质一个入门级炫酷动画项目,带着大家来体验使用Javascript来高效开发连续关键帧动画的过程;</span><br style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; margin: 0px; padding: 0px; color: #313d54; font-size: 16px; background-color: #ffffff;" /><br style="font-family: 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', Arial, sans-serif; margin: 0px; padding: 0px; color: #313d54; font-size: 16px; background-color: #ffffff;" /><span style="font-family: 微软雅黑; margin: 0px; padding: 0px; font-size: 16px; color: #666666; background-color: #ffffff;">我们会介绍GSAP.JS的基础知识及相关动画API的使用,包括每个动画细节的基本概念和作用,关键帧控制动画,多物体同时动画,随机动画,循环动画,往返动画,文字动画,回调动画的开发介绍;整个课程我们会从一个案例实战开始,带着大家从0到1,在开发过程中学习动画API的使用,更加高效快速地熟练掌握Javascript动画开发;</span></p> <p><span style="font-family: 微软雅黑; margin: 0px; padding: 0px; font-size: 16px; color: #666666; background-color: #ffffff;"><img src="https://img-bss.csdnimg.cn/202010120133435466.jpg" alt="" width="880" height="470" /></span></p>
<p style="font-size:16px;"> <span style="color:#7030A0;"><strong>本课程为 <span style="color:#FFFF00;background-color:#FF0000;">2020年</span> 新版</strong></span><span style="color:#7030A0;"><strong>录制,非常适合初学者的JavaScript视频课程,全面讲解<span style="color:#FFFF00;background-color:#FF0000;">JavaScript技术</span>,一站式学习,让你少走弯路,直达技术前沿!</strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="color:#FFFF00;background-color:#FF0000;font-size:20px;"><strong><span>以通俗易懂的方式全面讲解JavaScript技术,以知识讲解+实战案例的方式帮您快速入</span></strong><strong><span>门!</span></strong></span> </p> <p style="font-size:16px;"> <span style="color:#FF0000;font-size:18px;"><br /> </span> </p> <p style="font-size:16px;"> <strong><span style="font-size:18px;">课程内容包括:</span></strong> </p> <p style="font-size:16px;"> <span style="font-size:18px;">1.JavaScript简介</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">2.<span style="color:#313D54;">JavaScript基本用法</span></span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">3.变量和数据类型</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">4.运算符</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">5.数据类型转换</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">6.选择结构、循环结构</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">7.数组、函数</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">8.Debug调试</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">9.DOM操作</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">10.事件处理</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">11.BOM操作</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">12.自定义对象</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">13.原型prototype</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">14.内置对象</span> </p> <p style="font-size:16px;"> <span style="font-size:18px;">15.客户端存储Cookie、WebStorage</span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><span style="color:#FF0000;"></span></strong><strong><span style="color:#FF0000;">教学全程采用<span style="font-size:20px;color:#00B050;">笔记+代码案例</span>的形式讲解,每个知识点都有详细的讲解,通俗易懂!!!</span></strong></span> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090258436919.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259007133.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259114218.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259291679.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259474844.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <img src="https://img-bss.csdnimg.cn/202008090259582372.jpg" alt="" /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;font-size:24px;"><strong>全网500万学员的选择,好评如潮,专业更值得信赖......</strong></span> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;"><strong><img src="https://img-bss.csdnimg.cn/202008090300125864.jpg" alt="" /><br /> </strong></span> </p> <p style="font-size:16px;"> <br /> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><strong><strong>讲师介绍</strong></strong></strong></span> </p> <p style="font-size:16px;"> <span style="font-size:18px;"><strong><strong><strong><img src="https://img-bss.csdnimg.cn/202008090303376757.jpg" alt="" /><br /> </strong></strong></strong></span> </p> <p style="font-size:16px;"> <span style="background-color:#FF0000;"><strong><br /> </strong></span> </p>
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页