javascript前期基础内容
Posted Ageliu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript前期基础内容相关的知识，希望对你有一定的参考价值。
一、什么是javascript？
简述：javascript是一门解释性并且为弱型的编程语言。
BOM：是浏览器脚本语言。
DOM：是文本文档类型。
补充:在javascript中要注意大小写并且推荐使用驼峰体(如果是单独的样式使用全小写)
二、javascript在html中存在的方式
1、行间式:需要写在带有事件的标签内
<body id="body" onload="body.style.backgroundColor=‘blue‘">
2、内联式:需要写在script标签中
<body id="body">
<script>
body.style.backgroundColor=‘blue‘
</script>
</body>
3.外联式:需要写在一js为后缀的js文件中并通过script标签中的src=‘文件路径‘来使用.
js文件:00.js body.stylebackgroundColor=‘blue‘ HTML正文; <body id=‘body‘> <script src=‘./00.js‘></script> <body>
三,解释型语言决定js的位置
1,将script标签中的内容放在head中代表这种js为依赖型的js库是专门为下面提供需求的.
2,将script放在body中或放在body与HTML之间都是功能型js
<html>
<head>
<script>
var color=‘blue‘;
</script>
</head>
<body>
<div id=‘div‘>123</div>
<script>
div.style.color=color;
</script>
</body>
<script>
div.style.color=‘blue‘;
</script>
</html>
四,变量的四种定义方式
在Es5中有两种方式分别为:
var nn=100;代表的是局部变量
nn=100;代表的是全局变量
注意:在Es5中变量是没有块级作用域的可以通过自定义一个自调用的函数来产生块级作用域演示如下:
(function(){ var x=10; y=20; })() alert(x):报错 alert(y)正确
在Es6中的两种方式分别为:
let n=10;代表的是有块级的局部变量
const n=20;代表的有块级的常用变量
补充:在Es6中是存在块级作用域的如果再以以上为例的话都无法找到结果.
变量的命名规范:
1.1能以数字,字母,下划线以及$组成并且不能以数字开头推荐使用驼峰体命名.
1.2变量不能够使用js中的关键字以及保留字来命名.
1.3区分大小写.
五,三种弹出框
弹出框:alert弹出的消息中有确定键.
确认框:confirm弹出的下次中含有确定与取消键.
输入框:prompt弹出一个框可以用来填写内容.
六:查看变量的四种方式
alert:
console.log():能够拿到返回值
document.write():
断点调试
七:数据类型
// 一. 值类型 // 1.number:数字类型 var a = 10; // typeof()查看类型,可以省略() console.log(a, typeof a); // 判断 console.log(typeof a == ‘number‘); a = 3.14; console.log(a, typeof a); a = 314e2 console.log(a, typeof a); // 2.string:字符串类型 var a = ‘字符串‘; console.log(a, typeof a); a = "字符串"; console.log(a, typeof a); // ES6会检测变量的重复定义,报错 // let x = 10; // let x = ‘10‘; // 3.boolean:布尔类型 true|false a = true; console.log(a, typeof a); // 4.undefined:未定义类型 var b; console.log(b, typeof b); var c = undefined; console.log(c, typeof c); // 二.引用类型 // 5.function:函数类型 var m = function () {}; console.log(m, typeof m); // 6.object:对象类型 var obj = {}; console.log(obj, typeof obj); obj = new Object(); console.log(obj, typeof obj); // 判断 // instanceof:对象类型判断 console.log(obj instanceof Object); // 三.特殊的Object // Number() String() Boolean() Math // 7.null:空对象 var o = null; console.log(o, typeof o); // 判断 console.log(o == null); // 8.Array:数组对象 o = new Array(1, 2, 3, 4, 5); console.log(o, typeof o); console.log(o instanceof Object); // 判断 console.log(o instanceof Array); // 9.Date:时间对象 o = new Date(); console.log(o, typeof o); // 10.RegExp:正则对象 o = new RegExp(); console.log(o, typeof o);
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>类型转换</title>
</head>
<body>
类型转换
</body>
<script>
// 类型转换针对 值类型
// number string boolean
// 一.显性转化
// 1. num,bool => str
var a = 10;
var b = true;
// var c = new String(a);
// console.log(c, typeof c); // ‘10‘, object
var c = String(a);
console.log(c, typeof c); // ‘10‘, string
c = String(b);
console.log(c, typeof c); // ‘true‘, string
c = a.toString();
console.log(c, typeof c); // ‘10‘, string
c = b.toString();
console.log(c, typeof c); // ‘true‘, string
// 2.bool,str => num
var aa = true;
var bb = ‘10‘;
var cc = Number(aa);
console.log(cc, typeof cc); // 1 number
cc = Number(bb);
console.log(cc, typeof cc); // 10 number
cc = + aa;
console.log(cc, typeof cc); // 1 number
cc = + bb;
console.log(cc, typeof cc); // 10 number
// 针对字符串
cc = parseFloat(‘3.14.15.16abc‘);
console.log(cc, typeof cc); // 3.14
cc = parseInt(‘10.35abc‘); // 10
console.log(cc, typeof cc);
// 字符串以非数字开头,结果为NaN
// 1.非数字类型
// 2.不与任何数相等,包含自己
// 3.通过isNaN()进行判断
var res = parseInt("abc10def");
console.log(res, isNaN(res))
// 二.隐性转换(自动转换)
// 5 + null // 5
// "5" + null // "5null"
// "5" + 1 // "51"
// "5" - 1 // 4
console.log("5" - 1);
// "" + ? // "?"
</script>
</html>
八:运算符
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body>
运算符
</body>
<script type="text/javascript">
// 一.算数运算符
var a = 5;
var res = a / 2;
// 只存在number类型运算
console.log(res); // 2.5
var res = a % 2;
console.log(res); // 商为2余1 1
// 自增自减
// 总结:
// 1.++/--在前在后,自身值一定改变, a++/++a => a = a + 1
// 2.++/--在前先自运算,再他运算
// 1.++/--在后先他运算,再自运算
// a=5
var res = a++;
console.log("res:" + res + ", a:" + a); // 5, 6
// a=6
var res = ++a;
console.log("res:" + res + ", a:" + a); // 7, 7
// 二.赋值运算符
// 三.比较运算符
console.log(‘5‘ == 5); // true, 值相等即可
console.log(‘5‘ === 5); // false, 值与类型均要相等
console.log(‘5‘ != 5); // fasle
console.log(‘5‘ !== 5); // true
// 四.逻辑运算符
// 运算结果为true|false
var a = 10;
var b = 20;
var c = 30;
var res = a < b && c == 30;
console.log(res);
// 真,真 => 真
// 真,假 => 假
// 假,真 => 假 短路
// 假,假 => 假 短路
// &&运算,有假即假,所有前面为假,后面没必要被执行,所以被短路
// 短路
var res = a > b && ++c;
console.log(res, c); // c=30
// ||运算,有真即真,所有前面为真,后面没必要被执行,所以被短路
// 真,真 => 真 短路
// 真,假 => 真 短路
// 假,真 => 真
// 假,假 => 假
// !运算,真则假,假则真,负负得正
console.log(!1, !!1);
// 三目运算符(三元运算符)
// 结果 = 条件表达式 ? 结果1 : 结果2;
// 结果不一样要与表达式有关系,但表达式为真则结果为结果1,反之为结果2,
var tq = prompt("天气(晴|雨)")
var res = tq == ‘晴‘ ? "今天天气挺好" : "请假回家收衣服";
console.log(res);
</script>
</html>
以上是关于javascript前期基础内容的主要内容，如果未能解决你的问题，请参考以下文章
VSCode自定义代码片段12——JavaScript的Promise对象