JavaScript 的简述与基础语法

2020-4-6 前端达人

目录

JavaScript

JS 发展历史
JS 的特点
JS 的组成
JS 的基础语法

a. 两种引入方式 type src

b. 三种输出方式 console.log document.write alert

c. 变量声明 var let const typeof undefined

d. 数据类型简介 string number boolean object undefined

e. 运算符 + - * / % = < > && || !

i. 全等符与不全等符 === !==

f. 流程控制语句

i. 条件语句 if else switch case default break

ii. 循环语句 while dowhile fori forin forof

JavaScript
- JS 用于完成页面与用户的交互功能；
1. JS 发展历史
JavaScript 在 1995 年由 Netscape 公司的 Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作，Netscape 管理层希望它外观看起来像 Java，因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近；
欧洲计算机制造联盟（ECMA）在 1997 制定脚本语言规范 ECMA Script1 (ES1)，2009 年发布了 ECMA Script5（ES5），在 2015 年发布了 ECMA Script 2015（ES6），所有的浏览器的都支持 ES6；
JS 的特点

JS 设计模仿了 Java 语言，不同如下：

JS 不需要编译，由浏览器直接解释执行；

JS 是弱类型语言，JS 变量声明不需要指明类型，不同类型的数据可以赋值给同一变量；
JS 的组成

ECMA Script 是 JS 的基础语法；

BOM（Brower Object Model）是浏览器对象模型；

DOM（Document Object Model）是文档对象模型；

JS 的基础语法

a. 两种引入方式 type src

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS两种引入方式</title>
</head>
<body>
<!-- JS两种引入方式：JS和CSS一样都需要引入到html页面中，浏览器才会解释执行，JS有两种引入方式：
    1.内嵌(内部)脚本:在script标签中写js代码,script标签推荐放置在body标签的底部,理论上和style标签一样可以放置位置任意；
    2.外部脚步:使用script标签的src属性引入外部js文件,使用注意事项: script标签使用了src属性以后内部的代码不再被浏览器解释执行，script引入外部脚本时不能使用自闭合格式 -->
<!--告诉浏览器把解析器切换为js解析器 type="text/javascript"可以省略-->
<script type="text/javascript"> document.write("<h1>内部脚本</h1>");//向body中追加html内容 </script>
<script src="../js/外部脚本.js"></script>
</body>
</html>

b. 三种输出方式 console.log document.write alert

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS三种输出方式</title>
</head>
<body>
<!-- JS三种输出方式：
    1.输出到浏览器控制台；
    2.输出html内容到页面；
    3.浏览器弹框输出字符 -->
<script>
//1.输出到浏览器控制台
console.log("1. 输出到浏览器控制台");//开发者专用
//2.输出html内容到页面
document.write("2. 输出html内容到页面");//向body中追加html内容
//3.浏览器弹框输出字符
alert("3. 浏览器弹框输出字符");//阻塞执行
</script>
</body>
</html>

c. 变量声明 var let const typeof undefined

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS变量</title>
</head>
<body>
<!-- JS变量用来存放数据；
    es5以前变量声明使用var；
    es6之后变量声明使用let，常量声明使用const。他们用于替代es6的var声明方式；
 JS是弱类型语言: 
    声明变量时不知道变量的类型(undefined),只有在赋值之后js变量才确定类型；
    typeof(a) 或 typeof a 输出变量的类型；
    undefined表示变量未赋值,未知类型 -->
<script>
//字符串 Java声明 String str ="张三";
let str ="张三";
console.log(str);
//整数 Java声明 int k = 5;
let k = 5;
console.log(k);
//小数 Java声明 float f = 7.5;
let f = 7.5;
console.log(f);
//常量 Java声明 final Integer PI = 3.14;
const PI = 3.14;
console.log(PI);
//演示弱类型语言
let a;//声明变量不需要指明类型
console.log(typeof a);//undefined 未赋值类型,未知类型
a = "你好";
console.log(typeof a);//string
a = 123;
console.log(typeof a);//number
a = true;
console.log(typeof a);//boolean
a = new Object();
console.log(typeof a);//object
</script>
</body>
</html>

d. 数据类型简介 string number boolean object undefined

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS数据类型</title>
</head>
<body>
<!-- JS数据类型,常用数据类型:
    1.string 字符串类型;
    2.number 数字.包括整数和小数类型;
    3.boolean 布尔类型.值只有true和false两个;
    4 object 对象类型,空对象使用null表示,有两种格式:
        new Object(); 
        JSON格式.例如:{name:"张三",age:18};
    5.undefined 变量未赋值 -->
<script>
//1. string 字符串
let str = "你好";
console.log(str);
console.log(typeof str);//string
// 2. number 数字
let n = 123.456;
console.log(n);
console.log(typeof n);//number
// 3. boolean 布尔类型
let boo = false;
console.log(boo);
console.log(typeof boo);//boolean
// 4. object 对象类型，空对象使用 null表示
let obj = null;//或 new Object();
console.log(obj);
console.log(typeof obj);//object
// 5. undefined 变量未赋值
let u = undefined;
console.log(u);//值是undefined
console.log(typeof u);//类型是undefined
// Object类型
let stu = new Object();//创建一个js对象,js对象的属性想要直接加上
stu.id = 1;
stu.name = "刘一";
stu.age = 18;
console.log(stu);//{id: 1, name: "刘一", age: 18}
console.log(typeof stu);//object
// JS对象取属性值有两种方式:
// 1. obj.key
console.log(stu.name);//刘一
// 2. obj["key"]
console.log(stu["name"]); //刘一 == stu.name
let b = "age";
console.log(stu[b]);//可以取不定属性的值
</script>
</body>
</html>

e. 运算符 + - * / % = < > && || !

i. 全等符与不全等符 `===` `!==`

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
   <title>JS运算符</title>
</head>
<body>
<!--
JS运算符
js运算符和Java运算符基本相同
只有一个特殊的比较运算符
=== 判断js变量的值和类型都相等才为true
!== 不全等，判断js变量的值和类型有一个不等就为true
-->
<script> let a = 3;
let b = "3";
console.log(a == b);//true
// 全等 运算符 ===
console.log(a === b);//false
// 不全等 运算符 !==
console.log(a !== b);//true
// 三元(三目)运算符 布尔表达式?真:假
let str = a===b?"全等":"不全等";
console.log(str);//不全等
</script>
</body>
</html>

f. 流程控制语句

i. 条件语句 if else switch case default break

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>条件语句</title>
</head>
<body>
<!-- 条件语句JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别 JS中对各种数据类型作为布尔值的特点:(重点掌握) 1. string 空字符串""为false,其余都为true 2. number 数字 只有0为false,其余数字都为true 3. boolean 布尔类型 值只有 true和false 两个
循环语句

object 对象类型空对象null表示false,其它对象都是true 5. undefined 变量未赋值为false 常用语法格式 if ... else if ... else switch case break default -->
<script>
//if ... else
//if(true){
//if(""){// string 只有空字符为假
//if(0){number 只有0为假
//if(false){//boolean false为假 true为真
//if(null){//object null为假
//if(undefined){//undefined永为假
if("undefined"){//undefined永为假
console.log("满足条件");
}else{
console.log("不满足条件");
}

//switch case break default
let k =1;
switch (k) {
case 1:
console.log("111");break;
case 2:
console.log("222");break;
default: console.log("其它情况"); }
</script>
</body>
</html>

ii. 循环语句 while dowhile fori forin forof

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循环语句</title>
</head>
<body>
<!-- 循环语句
    while，do while，fori 和Java一样；
    forin
        1.遍历出数组中的索引和元素
        2.遍历出对象中的属性和元素
    forof 
        1.遍历出数组中的元素
    forin 与 forof 区别:
        1.forin可以遍历对象,forof不能遍历对象
        2.forin可以遍历出数组中的索引,forof只能遍历出数组中的元素 -->
<script>
//while 和Java一样
let k=1;
while (k<3){
    console.log(k++);
}

//do while 和Java一样
k =1;
do{
    console.log(k++);
}while (k<3)

//fori 和Java一样
for(let i=0;i<3;i++){
    console.log(i);
}

//forin 可以遍历数组和对象
let arr = ["刘一","陈二","张三"];//JS数组使用中括号[]定义
let stu = {id:5,name:"李四",age:18};//JS对象使用大括号定义
    //1.forin 遍历出数组中的索引
for(let index in arr){
    console.log(index);//数组的索引 0,1,2
    console.log(arr[index]);//数组中的元素
}
    //2.forin 遍历出对象中的属性名key
for(let k in stu){
    console.log(k);//字符串属性 id,name,age
    console.log(stu[k]);//对象中的属性值
}

//forof 可以遍历数组
for(let e of arr){
    console.log(e);//数组中的元素
}</script>
</body>
</html>

————————————————
版权声明：本文为CSDN博主「Regino」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Regino/article/details/105321573

原文链接：https://blog.csdn.net/Regino/article/details/105321573

分享本文至：

« call、apply、bind 原理实现产品简化改版怎么做？ »

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com