浅谈前端 | JavaScript基本语法和数据类型

932 阅读4分钟

这是我参与更文挑战的第29天,活动详情查看: 更文挑战

微信公众号搜索【程序媛小庄】,领取全套python全栈教程,还有小庄整理的不断更新的电子书、面试资料等你来拿哦~

前言

基本的网页框架和网页基本美化已经做过简单介绍了,接下来一起学习如何使用JavaScript控制网页的行为吧!

JavaScript简介

JavaScript是一门非常流行的脚本语言,是可以插入到HTML页面的编程代码,简称js,是一门面向对象的编程语言,JavaScript同python一样是编程语言,大家可以对比来学哦,更多关于JavaScript的发展历史感兴趣的小伙伴可自行了解,小庄这里不做过多的介绍啦~

JavaScript基本语法

注释

// JavaScript的单行注释

/*
JavaScript多行注释
多行注释和CSS的注释写法相同
*/

基本语法

JavaScript代码的中用分号作为每一个语句的结束,但是这个分号不写也不会报错。

如何运行JavaScript代码???

在pycharm中无法运行JavaScript代码,那么到底如何运行呢?这里小庄告诉大家哦,打开谷歌浏览器,然后按F12或者右击网页,选择检查,出现下面的界面之后选择console,在这里不仅能够书写js代码还可以直接运行哦。

image-20210628180015009

HTML中如何使用JavaScript

HTML中引用JavaScript代码有两种方式:

第一种,是在

<script>
  在这里写JS代码
</script>

第二种,引入外部js文件:

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

JavaScript变量和常量

变量

首次声明变量时需要使用关键字,但是不用也不会报错的鸭...let关键字是ES6新版本增加的,用法和var关键字相同都是用来声明变量的来着。

var name = 'python';
// 或者
let name = 'javascript';

常量

JavaScript中的常量和python中就不一样了,JavaScript中的常量是需要明确声明的,声明常量的关键字是const:

const pi = 3,14;

命名规范

①变量名只能是数字、字母、下划线和$组成

②推荐使用驼峰式命名,比如appleNumber

③变量名不能使用JavaScript关键字命名

JavaScript基本数据类型

typeof查看数据类型

在Python中是使用type关键字查看数据类型,在js中使用typeof查看数据类型。

let a = 11;
let b = 11.1;
let c = 'js';

image-20210628180342670

number数值类型

JavaScript中不区分整形和浮点型,就只有一种数字类型,比如:

let x = 1;
let y = 1.1;

typeof x;
"number"
typeof y;
"number"

如果想要将整数类型转换成所谓的浮点型或者将带小数的数字转换成整数怎么办呢?不要急,js也提供了相应的方法:

// 字符串转整形
let a = '123';
parseInt(a);  // 123

// 浮点型转整形
let a = "123.123";
parseInt(a);  // 123

// 带有非数字的字符串转整形,字符转开头有数字,即可将数字类型转为整形,如果数字不在中间就会返回NaN
let e = "123asd";
parseInt(e);  // 123

let f = "sf123";
parseInt(f);  // NaN,NaN表示不是数字,not a number

string字符类型

JavaScript支持单引号和双引号定义字符串,但是不支持三引号定义字符串。

let name = '''哈哈''';  // VM32638:1 Uncaught SyntaxError: Unexpected string
let name = '哈哈';
let age = "18";

模板字符串

模板字符串就类似于python的格式化输出,用反引号标识,即可以当做普通的字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

// ` 定义普通多行字符串`
var s3 = `
python
html
css
javascript
`

// 模板字符串除了可以定义多行文本之外,还可以实现格式化字符串的效果,${}会自动去前面找大括号里面的变量名对应的值,如果,欸有定义会直接报错
var name = 'js';
car age = 18;
var info = `
	my name is ${name} my age is ${age}
`

字符串的拼接

在Python 中不推荐使用+拼接字符串,但是js推荐使用+拼接字符串。

let name = 'js';
let good = 'good!'
let name = 'js';

name +  good
"jsgood!"

字符串常用方法 - 建议结合Python字符串方法

// 返回字符串长度
let a = "hello world";
a.length;

// 移除字符串两侧的空白 - .trim()
let b = "   jkajdk   ";
b.trim();
// 无法移除字符串两侧指定内容
let c = "**fhak**"
c.trim("*");
"**fhak**"

// .trimLeft() 移除左边的空白
var name = '  javascript  ';
name.trimLeft() // "javascript  "

// .trimRight() 移除右边的空白
var name = 'javascript';
name.charAt(1); // javascript

// .concat():拼接,相当于在字符串末尾追加内容,可以是数字类型,内部会自动转换成相同的数据类型进行操作
var name = 'javascript';
name.concat('hah') // "javascripthah";

// indexOf(substring):字符串内元素的位置
var name = 'chloe';
name.indexOf("d");  // 元素不存在返回-1
-1
name.indexOf("o");  // 查询元素是1个时,返回元素对应的索引值
3
name.indexOf("oe");  // 当查询元素为连续多个且包含在字符串内,返回小字符串的第一个元素的索引
3

// .substring(from,to):根据索引切片,无法识别负数
var name = 'chloe';
name.substring(0,-1);  // 不识别负数

// slice(start,end) 切片,可以识别负数
var name = 'chloe';
name.slice(0,-1);  // "chlo"

// .toLowerCase() 所有字母小写
var name = '12asDF.@';
name.toLowerCase(); // "12asdf.@"

// .toUpperCase() 所有字母大写
var name = '12asDF.@';
name.toUpperCase(); //  "12ASDF.@"

// .split(delimiter,limit):指定分隔符,及分割后获取的元素的个数,如果分隔符不存在也不会报错,不会分割
var name = 'python|html|css|javascript';
// 分割后获取元素个数小于总元素个数
name.split('|',2);  // (2) ["pytohn", "html"]
// 分割后获取元素个数大于总元素个数,取分割后所有的元素
name.split('|',10);  // (4) ["pytohn", "html", "css", "javascript"]

boolean布尔值

布尔值全部都是小写:

true
false

布尔值是false的情况:

0 空字符串 null undefined NaN

null & udefined

null:

​ 表示值为空,一般是指定或者清空一个变量时使用,可以理解为存了值,但是值被拿完了,但是留下了空的装值的盒子。

var name = 'javascript';
var name = 'null';

undefined:

​ 表示声明了一个变量,但是没有做初始化操作没有给装值的盒子,函数没有指定返回值的时候,返回的也是undefined。

结语

文章首发于微信公众号程序媛小庄,同步于掘金知乎

码字不易,转载请说明出处,走过路过的小伙伴们伸出可爱的小指头点个赞再走吧(╹▽╹)

image.png

image.png