Javascript

狂神说Js视频学习笔记

本文主要是介绍狂神说Js视频学习笔记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1. 什么是JavaScript

1.1 概述

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

Java、JavaScript

1.2 历史

JavaScript的起源故事

ECMAScript它可以理解为是JavaScript的一个标准

最新版本已经到es6版本~

但大部分浏览器还只停留在支持es5代码上!

开发环境——线上环境,版本不一致

关键字、变脸、流程控制、对象、数组、结构

2. 快速入门

2.1 引入JavaScript

1> 内部标签

<script>
	//...
</script>

2> 外部引入

abs.js

//....

test.html

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

测试代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- script标签内, 写JavaScript代码 -->
    <!-- <script>
        alert('hello,world');
    </script> -->
    
    
    <!-- 外部引入 -->
    <!-- 注意:script,必须成对出现 -->
    <script src="js/qs.js"></script>

    
    <!-- 不用显示定义type,也默认就是javascript -->
    <script type="text/javascript">
    
    </script>

</head>

<body>


<!-- 这里也可以存放 -->
</body>
</html>

2.2 基本语法入门

<!-- JavaScript严格区分大小写! -->
<script>
	// 1. 定义变量	变量类型		变量名 = 变量值;
	var num = 1;
	var score = "qinjiang";
	// 2. 条件控制
	if(score>60 && score<70){
		alert('60~70');
	}else if(score>70 && score<80){
		alert('70~80');
	}else{
		alert('other');

	// console.log(score) 在浏览器的控制台打印变量!	System.out.println(score)
	
	/*
		alt + shift + a 多行注释
	*/

浏览器必备调试须知:
在这里插入图片描述

2.3 数据类型

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

2.3.1 变量

var 王者荣耀 = ‘倔强青铜’;

2.3.1 number

js不区分小数和整数,Number

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

2.3.2 字符串(String)

‘abc’ “abc”

  • 正常字符串使用单引号或者双引号包裹
  • 注意转义字符 \
\'			// \'
\n			// n
\t
\u4e2d	\u#### 	Unicode字符
\x41		Asc11字符
  • 多行字符串编写
//反引号
var msg = 
	`hello
	world
	你好ya
	'你好'`
  • 模板字符串
// 反引号
let name = 'qinjiang';
let age = 3;
let msg = `你好呀,${name}`;  // 你好呀,qinjiang
  • 字符串长度
str.length
  • 字符串的可变性:不可变
    在这里插入图片描述
  • 大小写转换
// 注意: 这里是方法,不是属性
student.toUpperCase();
student.toLowerCase();
  • 查询字符首次出现的位置student.indexOf('t')
  • substring
// [a,b)
student.substring(1); // 从第一个字符串截取到最后一个字符串
student.substring(1,3)  // 从1到3  [1,3)

### 2.3.3 布尔值(Boolean)
true  ,  false
### 2.3.4 逻辑运算
```js
&&	两个都为真,结果为真
||	一个为真,结果为真
!	真即假,假即真

2.3.5 比较运算符

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

这是一个Js缺陷,坚持不要使用 == 比较
须知:

  • NaN===NaN,这个与所有的数值都不相等,包括自己
  • 只能通过isNaN(NaN)来判断这个数是否是NaN

浮点数问题:

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

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

console.log(Math.abs(1/3-(1-2/3))<0.000000001);		// true

2.3.6 null、undefined

  • null 空
  • undefined 未定义

2.3.7 数组(array)

Java的数值必须是相同类型的对象~,Js中不需要这样!

// 保证代码的可读性,尽量使用[]
var arr = [1,2,3,4,'hello',null,true];
new Array(1,2,3,4,'hello');
取数组下标:如果越界了,就会```undefined```

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

var arr = [1,2,3,4,5,6]; // 通过下标取值和赋值
arr[0]
arr[0] = 1
  • 长度
arr.length

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

  • indexOf,通过元素获取下标索引
arr.indexOf(2)  // 1

字符串的‘1’和数字1是不同的

  • slice() 截取Array的一部分,返回一个新数组,类似于String中的substring
  • push,pop
push:压入到数组尾部
pop: 弹出尾部的一个元素
  • unshift() ,shift() 头部
unshift:压入到头部
shift:弹出头部的一个元素
  • 排序sort()
['b','c','a']
arr.sort()
['a','b','c']
  • 元素反转 reverse()
['a','b','c']
arr.reverse();
['c','b','a']
  • concat() 拼接数组
['c','b','a']
arr.concat([1,2,3]);
['c','b','a',1,2,3];
arr
['c','b','a']

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

  • 连接符 jion()
    打印拼接数组,使用特定的字符串连接
['c','b','a']
arr.jion('-');
'c-b-a'
  • 多维数组
var arr = [[1,2],[3,4],['5','6']]'
console.log(arr[1][1]); // 4

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

2.3.8 对象(Object)

若干个键值对

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

// 定义了一个person对象,它有四个属性!
var person = {
	name: 'kuangshen',
	age: 3,
	email: '24736743@qq.com',
	score: 0
}

Js中的对象,(……)表示一个对象,键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号。
对象是大括号,数组是中括号

// 每个属性之间使用逗号隔开 最后一个不需要添加
// Person person = new Person(1,2,3,4,5);
var person = {
	name:'qinjiang',
	age:3,
	tags:['js','java','web','...']
}

取对象的值:

person.name
> 'qinjiang'
person.age
> 3

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

  • 对象赋值
person.name = 'qinjiang'  // qinjiang
person.name;  // qinjiang
- **使用一个不存在的对象属性,不会报错!**
```js
person.haha;   // undefined
  • 动态的删减属性,通过delete删除对象的属性
delete person.name
true
person
- **动态的添加,直接给新的属性添加值即可**
```js
person.haha = 'haha'
'haha'
person
  • 判断属性值是否在这个对象中! xxx in xxx!
'age' in person
true

'toString' in person
true
  • 判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
## 2.4 严格检查模式
```js
<!-- 前提:IEDA 需要设置支持ES6语法
'use strict';  严格检查模式,预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行!
局部变量都建议使用 let 去定义~
-->
<script>
	'use strict';
	// 全局变量
	i = 1; // undefined;
	// ES6 let
	let i = 1;
	console.log(i);  // 1

2.3.9 流程控制

var age = 3;
if( age>3 ){ 		// 第一个判断
	alert('haha');
}else if(age <5){		// 第二个判断
	alert('kuwa~');
}else{		// 否则,,
	alert('kuwa');
}
这篇关于狂神说Js视频学习笔记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!