1. 初始JavaScript

1.1 什么是 JavaScript

JavaScript (简称 JS)

是世界上最流行的编程语言之一
是一个脚本语言, 通过解释器运行
主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行

1.2 发展历史

JavaScript 之父布兰登 * 艾奇 (Brendan Eich)

1.3 JavaScript 和 HTML 和 CSS 之间的关系

HTML: 网页的结构(骨)
CSS: 网页的表现(皮)
JavaScript: 网页的行为(魂)

1.4 第一个程序

<script>
        alert("hello");
    </script>

2. JavaScript 的书写形式

1. 行内式

直接嵌入到 html 元素内部

<input type="button" value="点我一下" onclick="alert('你还真点')">

点击之后会显示提示框

2. 内嵌式

写到 script 标签中

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

3. 外部式

写到单独的 .js 文件中

<script src='1.js'></script>

1.js代码

alert('hello');

3. JavaScript 基本语法

3.1 注释

**单行注释: ** //
**多行注释: ** /* */

// 单行注释
        /*
            多行注释
            多行注释
        */

3.2 输入: prompt

弹出一个输入框

<script>
        let name = prompt("请输入你的姓名");
        alert(name);
    </script>

3.3 输出: alert

弹出一个警告框

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

3.4 输出: console.log

在控制台打印一个日志

<script>
        console.log("这是打印日志的");
    </script>

在浏览器中按 F12 ====> 找到 Console 窗口
这里就是显示日志的

3.5 其他注意事项

.表示取对象中的某个属性或者方法. 可以直观理解成 “的”. console.log 就可以理解成: 使用 “控制台” 对象 “的” log方法
大小写敏感,JavaScript 对字母的大小写敏感.例如: username 和 userName是两个不同的变量
每行结尾的分号,JavaScript中并不要求必须使用分号(;)作为语句结束的标记.
JS 中字符串常量可以使用单引号表示, 也可以使用双引号表示
let 和 var的区别参考文章: 具体文章

4. JavaScript 语法概述

4.1 基本用法

变量声明

let a = 20;
	let b = "helloworld";

变量的使用

let name = prompt("请输入你的姓名");
        let age = prompt("请输入你的年龄");
        let cl = prompt("请输入你的班级");
        console.log(name);
        console.log(age);
        console.log(cl);

4.2 理解动态类型

Java是一种静态类型,一旦开始定义了类型，后面就无法改变了
而JavaScript是动态类型，类型可以改变。

<script>
        let a = 20; // 数值类型
        console.log(a);
        a = "helloworld"; // 字符类型
        console.log(a);
    </script>

4.3 基本数据类型

JS 中内置的几种类型

类型	描述
number	数字. 不区分整数和小数.
boolean	true 真,false 假.
string	字符串类型.
undefined	只有唯一的值 undefin. 表示未定义的值.
null	只有唯一的值null.表示空值

① number 数字类型

JS 中是不区分整数和浮点数,统一都使用"数字类型"来表示

数字进制表示

二进制: 以 0b 或 0B开头
八进制: 以 0 开头
十六进制: 以 0x 或 0X 开头

<script>
        // 十六进制 以 "0x" 或 "0X" 开头
        let a = 0xff;
        let b = 0X123;

        // 八进制 以 "0" 开头
        let c = 07;
        
        // 二进制 以 "0b" 或 "0B" 开头
        let d = 0b1010;
        let e = 0B1111; 
    </script>

浮点型数据

科学计数法的表示方法,在实数后面跟随字母e或者E,后面加上一个带正号或负号的整数指数,正号可以省略.

<script>
        // 普通的浮点型
        let a = 1.2;
        let b = 6e3;
        // 科学计数法的表示
        let c = 7e+3;
        let d = 8E-3;
    </script>

特殊的数字值

Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围.
-Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围.
NaN: (Not a Number)表示当前的结果不是一个数字.

<script>
        let max = Number.MAX_VALUE;
        // 得到 Infinity
        console.log(max * 2);
        // 得到 -Infinity
        console.log(-max * 2);
        // 得到 NaN
        console.log('hehe' - 10);
    </script>

② string 字符串类型

基本规则

字符串字面值需要使用引号引起来, 单引号双引号均可

<script>
    let a = 'hello';
    let b = "hello";
    let c = hello; // error 这里出错
</script>

包含字符串的引号必须匹配,如果字符串前面使用的是双引号,那么在字符串前面使用的是双引号,那么在字符串后面也必须使用双引号,反之都使用单引号.

转义字符

转义字符	描述
\b	退格
\n	换行符
\t	水平制表符,Tab空格
\f	换页
’	单引号
"	双引号
\v	垂直字符表
\r	回车符
\	反斜杠

求长度

使用String的length属性即可

<script>
        let a = "hehe";
        let b = "哈哈";
        console.log(a.length);
        console.log(b.length);
    </script>

字符串的拼接

使用 + 进行字符串拼接

<script>
        let a = "hehe";
        console.log(a + "world");
        console.log(a + 10);
    </script>

③ boolean 布尔类型

<script>
        console.log(1 == 1);
        // 下面的写法不科学 不建议使用
        console.log(true + 1);
        console.log(false + 1);
    </script>

④ undefined 未定义数据类型

<script>
        let a;
        console.log(a);
        // undefined 和 字符相加
        console.log("hello" + a);
        // undefined 和 数字相加
        console.log(1 + a);
    </script>

⑤ null 空值类型

<script>
        let a = null;
        console.log(a);
    </script>

5. 运算符

5.1 算术运算符

+ 加 - 减 * 乘 / 除 % 求模

<script>
        console.log(1+2);
        console.log(3-2);
        console.log(2*3);
        console.log(4/4);
        console.log(4%3);
    </script>

5.2 赋值运算符 & 复合赋值运算符

=``+=``-=``*=``/=``%=

<script>
        let a = 1;
        console.log(a);
        a+=1;
        console.log(a);
        a-=1;
        console.log(a);
        a*=2;
        console.log(a);
        a/=2;
        console.log(a);
        a%=2;
        console.log(a);
    </script>

5.3 自增自减运算符

++: 自增1 --: 自减1

<script>
        let a = 1;
        // 前置的时候 先加1 再使用
        // 后置的时候 先使用 再加1
        a++;
        console.log(++a);
        a--;
        console.log(--a);
    </script>

5.4 比较运算符

< 小于
> 大于
<= 小于等于
>= 大于等于
==比较相等(会进行隐式类型转换)
!= 不等于
===比较相等(不会进行隐式类型转换)
!== (不会进行隐式类型转换)

<script>
        console.log("5" == 5);
        console.log("5" === 5);
    </script>

5.5 逻辑运算符

&& 与: 一假则假
|| 或: 一真则真
! 非

5.6 位运算

& 按位与 同为1时为1,否则为0
| 按位或 同为0时为1,否则为0;
~ 按位取反 当是1就取0,是0就取1
^ 按位异或 相同就为0,相异为1

<script>
    // 1 =>  001
    // 3 =>  011
    console.log( 1 & 3);
    console.log( 1 | 3);
    console.log( 1 ^ 3);
</script>

5.7 移位运算

<< 左移
>> 有符号右移(算术右移)
>>> 无符号右移(逻辑右移)

6. JavaScript 基本语句

6.1 条件判断语句

if 语句

// 形式1
	if (条件) {
		语句
	}
	// 形式2
	if (条件) {
		语句1
	} else {
		语句2
	}
	// 形式3
	if (条件1) {
		语句1
	} else if (条件2) {
		语句2
	} else if .... {
		语句...
	} else {
		语句N
	}

三元表达式

是 if else 的简化写法.
条件 ? 表达式1 : 表达式2

switch 语句

switch (表达式) {
	case 值1:
	语句1;
	break;
	case 值2:
	语句2:
	break;
	default:
	语句N;
}

6.2 循环语句

while 循环

while (条件) {
	循环体;
}

continue 结束当前这次循环,继续其他循环
break 结束整个循环

for 循环

for (表达式1; 表达式2; 表达式3) {
	循环体
}

7. 数组

7.1 数组的创建

使用 new 关键字创建

// Array 的 A 要大写
let arr = new Array();

let arr = [];
	let arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

7.2 获取数组元素

<script>
        let arr =[1,2,3];
        console.log(arr[0]);

        console.log(arr[-1]);
        console.log(arr[3]);
    </script>

7.3 新增数组元素

1. 通过修改 length 新增

<script>
        let arr = [1,2,3];
        arr.length = 6;
        console.log(arr);
    </script>

2. 通过下标新增

<script>
        let arr = [1,2,3];
        arr[5] = 6;
        console.log(arr);
    </script>

3. 使用 push 进行追加元素

<script>
        let arr = [1,2,3];
        let newarr =[];
        for(var i = 0; i < arr.length; i++){
            newarr.push(arr[i]);
        }
        console.log(newarr);
    </script>

7.4 删除数组中的元素

<script>
        let arr = [1,2,3];
        arr.splice(0,1);
        console.log(arr);
    </script>

8. 函数

8.1 语法格式

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
	函数体
	return 返回值;
}
// 函数调用
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值

代码示例:

<script>
        function sayHello() {
            console.log("hello");
        }
        sayHello();
    </script>

8.2 关于参数个数

**实参和形参之间的个数可以不匹配.**但是实际开发一般要求形参和实参个数要匹配
代码示例:

<script>
        function Add(a,b,c) {
            a = a | 0;
            b = b | 0;
            c = c | 0;
            return a + b + c;
        }
        console.log(Add(1,2,3));
        console.log(Add(1,2));
    </script>

8.3 函数表达式

另外一种函数的定义方式

<script>
        let add = function(a,b) {
            let sum = 0;
            for (let i = 0; i < arguments.length; i++) {
                sum += arguments[i];
            }
            return sum;
        }
        console.log(add(10,20));
        console.log(add(1,2,3,4,5));
        console.log(typeof add);
    </script>

9. 对象

在 JS 中, 字符串, 数值, 数组, 函数都是对象.

9.1 使用字面量创建对象

创建对象代码:

var student = {
            name:'蔡徐坤',
            heigth: 200,
            weight: 300,
            sayHello: function() {
                console.log("hello");
            }
        }

使用对象的属性和方法代码:

console.log(student.name);
        console.log(student.heigth);
        student.sayHello();

9.2 使用 new Object 创建对象

<script>
        var student = new Object();
        student.name = "蔡徐坤";
        student.height = 200;
        student.weight = 300;
        student.sayHello = function() {
            console.log("hello");
        }

        console.log(student.name);
        console.log(student.weight);
        student.sayHello();
    </script>

9.3 使用构造函数创建对象

基本语法:

function 构造函数名(形参) {
	this.属性 = 值;
	this.方法 = function...
}
var obj = new 构造函数名(实参);

代码示例:

<script>
        function Student(name,id,say){
            this.name = name;
            this.id = id;
            this.say = function() {
                console.log(say);
            }
        }

        let xiaoMing = new Student('小明',1,'hello');
        let xiaoHong = new Student('小红',2,'嗨害嗨');
        let xiaoQiang = new Student('小强',3,'你好!');

        console.log(xiaoMing);
        console.log(xiaoHong);
        xiaoQiang.say();
    </script>

前端 --- JavaScript 语法基础

1. 初始JavaScript

1.1 什么是 JavaScript

1.2 发展历史

1.3 JavaScript 和 HTML 和 CSS 之间的关系

1.4 第一个程序

2. JavaScript 的书写形式

1. 行内式

2. 内嵌式

3. 外部式

3. JavaScript 基本语法

3.1 注释

3.2 输入: prompt

3.3 输出: alert

3.4 输出: console.log

3.5 其他注意事项

4. JavaScript 语法概述

4.1 基本用法

变量声明

变量的使用

4.2 理解动态类型

4.3 基本数据类型

① number 数字类型

数字进制表示

浮点型数据

特殊的数字值

② string 字符串类型

基本规则

转义字符

求长度

字符串的拼接

③ boolean 布尔类型

④ undefined 未定义数据类型

⑤ null 空值类型

5. 运算符

5.1 算术运算符

5.2 赋值运算符 & 复合赋值运算符

5.3 自增自减运算符

5.4 比较运算符

5.5 逻辑运算符

5.6 位运算

5.7 移位运算

6. JavaScript 基本语句

6.1 条件判断语句

if 语句

三元表达式

switch 语句

6.2 循环语句

while 循环

for 循环

7. 数组

7.1 数组的创建

7.2 获取数组元素

7.3 新增数组元素

1. 通过修改 length 新增

2. 通过下标新增

3. 使用 push 进行追加元素

7.4 删除数组中的元素

8. 函数

8.1 语法格式

8.2 关于参数个数

8.3 函数表达式

9. 对象

9.1 使用 字面量 创建对象

9.2 使用 new Object 创建对象

9.3 使用 构造函数 创建对象

基本语法:

代码示例:

相关文章

热门标签

最新文章

目录

9.1 使用字面量创建对象

9.3 使用构造函数创建对象