JavaScript入门



JavaScript简介

JavaScript简称JS,是一门面向对象的编程语言。

JavaScript 教程 | 菜鸟教程 (runoob.com)

JS是运行在客户端脚本语言(不需要编译),现在也可以基于 Node.js 技术进行服务器端编程

浏览器执行JS

  • 浏览器分成两部分:渲染引擎 和 JS引擎
    • 渲染引擎:用来解析HTML与CSS,俗称内核。比如 Chrome 浏览器的 Blink/Webkit,Firefox的Gecko内核。
    • JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码对其处理后运行。比如chrome 浏览器的V8

JS初识

ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,它规定了JS的语法核心。

JS书写位置

  • 行内式:将JS代码写在以 on 开头的属性中
    1. <button onclick="alert('我被点了一下')">点我</butt>
  • 内嵌式:将JS代码写在Script标签中
    1. <script>alert('Hi!我是警告框。')</script>
    2. script标签可以写在html文件的head和body中,推荐写在body的最下面
  • 外链式:将JS代码写在一个独立JS文件中,再用Script标签引入

JS基础语法

JS是一种弱类型语言,声明变量时不需要指定数据类型

JS声明变量的关键词 var

//JS代码示例:
var username = "root";

数据类型

  1. 简单数据类型:
image-20220621190656692
  1. 简单数据类型
数据类型检测

typeof 可用来获取检测变量的数剧类型

image-20220621190931006
NaN

NaN(Not a Number):代表一个非数值

var a=10;
var b="abc";
console.log(a - b); //NaN

isNaN :用来判断一个变量是否为非数字的类型,返回true 或 false

var a=NaN;
var b=10;
isNaN(a); //true
isNaN(b); //false

数据类型转换

  • 将其他类型转换为字符串
image-20220621193519929
  • 将其他类型转换为数值型
image-20220621194143911
  • 将其他类型转换为布尔型

Boolean() :将其他类型转为布尔值。

image-20220621195704912
<script>
    // 非空字符串 和 数值型转为 true
    console.log(Boolean('小白'));
    console.log(Boolean(12));
    console.log(Boolean(3.14));

    // 空字符串、0 转为 false
    console.log(Boolean(''));
    console.log(Boolean(0));

    // 其他转为 false
    console.log(Boolean(NaN));
    console.log(Boolean(null));
    console.log(Boolean(undefined));
</script>

运算符

算数运算符

image-20220622130626770

比较运算符

image-20220622132053687

逻辑运算符

image-20220622135620460

赋值运算符

image-20220622135835326

运算符优先级

image-20220622135923659

(53条消息) python基础:布尔运算和四个语句_sayhi:的博客-CSDN博客_python布尔运算

分支结构

image-20220622144646169

数组

数组的单元可以存放任意类型的数据。包括(布尔类型)

创建数组:数组字面量 和 new 关键字,单元之间使用“,”分割

//第一种
var arr1 = [1,2,3];
//第二种
var arr2 = new Array(1,2,3);
//数组的单元可以存放任意类型的数据
var arr3 = [1,"比亚迪","汉",true];

JS函数

函数:就是封装了一段可被重复调用执行的代码块

优点:一次编写随处调用。

JavaScript 函数 | 菜鸟教程 (runoob.com)

image-20220623164748226

变量作用域

全局作用域:在函数体外声明的变量,在整个script标签范围内都有效

局部作用域:在函数体内声明的变量,只在函数体内有效

// 全局作用域
var name = "小明";
var age = 8;
function fn(){
    console.log("我叫:" + name + ",今年" + age + "岁");
}
// 局部作用域
function fn(){
    var a = 1;
}

其他函数声明方式

image-20220623170839614
image-20220623171550532
image-20220623171929140

JS对象

JavaScript 对象 | 菜鸟教程 (runoob.com)

在JavaScript 中,对象是一组无序的相关属性方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等

创建对象的三种方式:字面量、构造函数、new Object()

字面量

image-20220623173013175

字面量声明的对象不需要实例化

调用属性:对项目.key

构造函数

funtion Person (name, age) {
    this.name = name;
    this.age  = age;
    this.sayHi = function () {
        console.log('大家好,我叫' + this.name + ',今年' + this.age + '岁');
    }
}

new Object()

// 1. 使用 Object 实例化对象
var obj = new Object();

// 2. 向对象中添加属性和方法
obj.name = 'zs';
obj.age  = 20;
obj.sayHi = function () {
    console.log('大家好,我叫' + obj.name + ',今年' + obj.age + '岁');
}

遍历对象

for…in 语句用于对数组或者对象的属性进行循环操作

image-20220623182003687

JS内置对象

内置对象就是JS本身提供的对象

JavaScript 提供了多个内置对象:Math、Date 等

JavaScript | MDN (mozilla.org)

Math 对象

image-20220623183035655
     // 向下取整(舍去法)
     console.log(Math.floor(6.9));
     // 向上取整(进一法)
     console.log(Math.ceil(6.1));
     // 四舍五入
     console.log(Math.round(5.4));
     console.log(Math.round(5.5));
     // 随机数(0~1之间)
     console.log(Math.random());

Date 对象

日期格式化
image-20220623184023500
时间戳

1970.01.01 00:00:00到现在时间的毫秒数

// 获取时间戳
var d = new Date();
console.log(d.valueOf());
// console.log(d.getTime());

// 获取指定时间时间戳
var d1 = new Date("2000-01-12 00:00:00");
console.log(d1.valueOf());
// 时间戳转换
var t1 = 947606400000;
var date = new Date(t1);
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
var i = date.getMinutes();
var s = date.getSeconds();
console.log(y + "-" + m + "-" + d + " " + h + ":" + i + ":" + s);

数组对象

image-20220623192811162
image-20220623194123941

字符串对象

image-20220623195026070
JavaScript入门-HuaのJava之旅
JavaScript入门
此内容为免费资源,请登录后查看
0
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片