JavaScript基础知识

最新推荐文章于 2021-07-07 20:27:03 发布

weixin_44197665

最新推荐文章于 2021-07-07 20:27:03 发布

阅读量298

点赞数

分类专栏： Web前端入门笔记文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44197665/article/details/109622402

版权

Web前端入门笔记专栏收录该内容

11 篇文章 1 订阅

订阅专栏

JavaScript基础

什么是JavaScript

虽然名字带个“Java”，但是它和Java是完全不同的语言，它是是一种解释性脚本语言（代码不进行预编译）。主要用来向HTML页面添加交互行为。

JavaScript能用来干什么？

JavaScript的主要用途有：

改变HTML页面的内容
改变CSS样式
对浏览器事件做出响应
验证和提交数据到后端
控制cookies，包括创建和修改等。
基于Node.js技术进行服务器端编程。

JavaScript的引入方式

1.使用<script>标签

<script type="text/javascript">
    document.write("<h1>Hello，JavaScript</h1>");
</script>

2.外部JS文件

<script src="export.js"  type="text/javascript"></script>

3.直接在HTML标签中

<input name="btn" type="button" value="弹出消息框"   
   onclick="javascript:alert('欢迎你');"/>

JavaScript的基本语法

1. 变量

你可以直接使用var声明各种类型的变量，var声明的变量会根据你赋给它的值自动决定类型，你也可以先声明再赋值，赋值前类型为“undefined”。

<script>
var a=5;
var b;
b=3;
</script>

你也可以将var替换成let、const，这两者声明的变量作用域只在它所在的｛｝内，const声明的变量不能改变。

2. 数据类型

JavaScript有如下几种数据类型：

①undefined：示例：var width;

变量width没有初始值，将被赋予值undefined

②null：表示一个空值，与undefined值相等

③number：

var iNum=23; //整数

var iNum=23.0; //浮点数

④Boolean：true和false 但是JS会把他们解析成1；0

⑤String：一组被引号（单引号或双引号）括起来的文本 var string1=“This is a string”;

你可以使用typeof检测变量的返回值：

<script>
var a=5;
typeof a; #返回number
</script>

3.数字类型

与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等，而是始终以双精度浮点数来存储数值。

常用方法

toString() 方法

以字符串返回数值。

var x = 123;
x.toString();            // 从变量 x 返回 123
(123).toString();        // 从文本 123 返回 123
(100 + 23).toString();   // 从表达式 100 + 23 返回 123

toExponential()

返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

参数定义小数点后的字符数：

var x = 9.656;
x.toExponential(2);     // 返回 9.66e+0
x.toExponential(4);     // 返回 9.6560e+0
x.toExponential(6);     // 返回 9.656000e+0

toFixed() 方法

toFixed() 返回字符串值，它包含了指定位数小数的数字：

var x = 9.656;
x.toFixed(0);           // 返回 10
x.toFixed(2);           // 返回 9.66
x.toFixed(4);           // 返回 9.6560
x.toFixed(6);           // 返回 9.656000

4. String对象

即字符串，用单引号或双引号都可

<script>
var a='5';
typeof a; #返回string
</script>

常用字符串方法：

<script>
var a='12345';
a.length #返回长度
a.search('3'); #返回第一个3所在位置
a.split; #将a切割成字符串数组并返回
</script>

4. 数组

数组是一种特殊的变量，其类型是对象，它能够有序存放多个值，每一个值都可以是任意类型的量。

为数组元素赋值：

var fruit= new Array[“apple”, “orange”, " peach",“banana”];

修改其中某一个元素的值：

fruit [0] = " apples";

第一个元素的序号是0

常用数组方法：

toString()

把数组转换为数组值（逗号分隔）的字符串。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.toString(); 
//结果：Banana,Orange,Apple,Mango

join()

将所有数组元素结合为一个字符串。
类似 toString()，还可以规定分隔符：

var fruits = ["Banana", "Orange","Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * "); 
//Banana * Orange * Apple * Mango

Popping 和 Pushing

Popping:
pop() 方法从数组中删除最后一个元素,返回“被弹出”的值：

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

Pushing:
push() 方法（在数组结尾处）向数组添加一个新的元素,返回新数组的长度

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Kiwi");       //  向 fruits 添加一个新元素

5. 运算符

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	系数
++	递加
–	递减

6. 逻辑控制语句

①if条件语句

if(条件)
 
{  //JavaScript代码;  }
 
else
 
{  //JavaScript代码;  }

If·中0，null，” ”，undefined，NaN，false--------结果是false；其他的都是true！

②switch多分支语句

switch (表达式)
 
{  case 常量1 :
 
      JavaScript语句1;
 
  break;
 
   case 常量2 :
 
        JavaScript语句2;
 
  break;
 
default :
 
      JavaScript语句3;  }

③for、while循环语句

for(初始化;  条件;  增量)
 
 {  JavaScript代码;  }
 
while(条件)
 
 {  JavaScript代码;  }
④for-in

var fruit=[ "apple", "orange", "peach","banana"];
 
for(var i in fruit){
 
   document.write(fruit[i]+"<br/>");  }

i就是数组的下标，in这个数组要查询所有的数组下标

7. 注释

单行注释以 // 开始，以行末结束
多行注释以 /* 开始，以 / 结束，符号 /…… */ 指示中间的语句是该程序中的注释

8. 输入输出

输出

alert()
将弹出一个警告框

alert('helloworld')

console.log()
将在控制台显示输出的值

console.log('helloworld')

document.write()
将输出写入到 HTML文档中

<!DOCTYPE html>
<html>
<body>
<h2>js输出测试</h2>
<p>计算5+6结果并显示</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

innerHTML：
将输出写入到 HTML文档中

<!DOCTYPE html>
<html>
<body>
<h2>js输出测试</h2>
<p id='demo'>计算5+6结果并显示</p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

输入

prompt()：产生附带有输入框的弹框
prompt(“提示信息”, “输入框的默认信息”);

prompt("请输入你喜欢的颜色","红色");

9. 语法约定

①代码区分大小写

小写写成大写会报错：Uncaught SyntaxError: Unexpected identifier

②变量、对象和函数的名称

当声明变量、对象和函数的名称时大小写，数字，下划线，美元符号都可以，但是必须以字母，下划线，美元符号开头

否则会报错：Uncaught SyntaxError: Invalid or unexpected token

③分号

如果不写会报错：Uncaught SyntaxError: Invalid or unexpected token

weixin_44197665

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识

JavaScript基础JavaScript基础什么是JavaScriptJavaScript能用来干什么？JavaScript的引入方式JavaScript的基本语法1. 变量2. 数据类型3. String对象4. 数组5. 运算符6. 逻辑控制语句①if条件语句②switch多分支语句③for、while循环语句7. 注释8. 输入输出输出输入9. 语法约定JavaScript基础什么是JavaScript虽然名字带个“Java”，但是它和Java是完全不同的语言，它是是一种解释性脚本语言（代码
复制链接

扫一扫