JavaScript相关简单语法（1）

最新推荐文章于 2024-04-19 16:51:59 发布

一只咸鱼12138

最新推荐文章于 2024-04-19 16:51:59 发布

阅读量114

点赞数

本文链接：https://blog.csdn.net/weixin_44230981/article/details/104174714

版权

一、JavaScript简介

在HTML页面中嵌入执行Javascript代码的两种方式：
使用javascript：前缀构建执行JavaScript代码的URL.。

       <a href="javascript:alert('运行Javascript！')">运行Javascript</a>

使用<script…/>元素来包含Javascript代码:

       <script type="text/javascript">
          alert("直接运行的Javascript！")；
       </script>

导入Javascript文件
与CSS文件导入方式类似，如下所示：

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

defer推迟执行脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="defer.js"></script>
</head>
<body>
     
</body>
    <div id="target"></div>
</html>

defer.js

var tg = document.getElementById("target");
tg.innerHTML = "sjdhajsdhasdhsad";
tg.style.backgroundColor = "#aab";

该代码是错误的，出现错误的原因是：当浏览器执行JavaScript脚本时，此时浏览器还没有去解析HTML页面后面的内容，他还不知道后面有id为target的元素。
有两种解决此问题的方法：
1.将script标签放进head标签中，此时Javascript脚本可以正常的获取到HTML对象。
2.将<script…/>脚本改为以下形式：

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

async异步执行脚本
当遇到以下js文件时,因为循环的次数过于多，会比较耗时，而async异步执行脚本会使script元素启动新线程，使代码运行时间，浏览器的显示时间减少。

    var sum = 0;
    for(var i = 0;i < 10000;i++)
    {
       sum+=i;
    }
    alert(sum):

在HTML中的用法：

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

二、数据类型和变量

定义变量的形式
隐式定义：直接给变量赋值。
显式定义：使用var关键字定义变量。

   <script>
     var a;//显式声明变量a
     a = true;//隐式定义变量a
     a = 123;
     a = "123";
     </script>

类型转换

   <script>
      var a = "3.145";
      var b = a - 2;
      var c = a +2;
      alert(b + "\n" + c);
    </script>

该代码的运行结果为：
在这里插入图片描述
这是因为c = a + 2;中的“+”被系统认为是字符串的连接符，所以c=3.145+2是字符串拼接的结果。
可是将该语句变为 :

          var  c = pareFloat(a)+2;

三种强制类型转换函数：
toString()：将布尔值、数值等转换成字符串；
parselnt()：将字符串、布尔值转换成整数。
parseFloat()：将字符串、布尔值等转换成浮点数。

变量作用域

   <script>
      var test = "全局变量";
      function myfun()
      {
        var test = "局部变量";
        alert(test);
      }
     checkScope();
      alert(test);
   </script>

该代码的执行结果会先输出“局部变量”，后输出“全局变量”。按照代码的执行顺序，首先会遇到myfun函数中的alert(test),该函数中的局部变量覆盖掉了同名的全局变量，所以输出“局部变量”。接着是代码最后的alert(test)，此时局部变量离开函数后，其失效，所以程序访问的就是全局变量。
变量提升

   <script>
     var scope = "全局变量";
     function test()
     {
       document.writeln(scope + "<br>");
       var scope = "局部变量";
       document.writeln(scope + "<br>");
     }
     test();
  </script>

上述代码运行结果
这就是变量提升的效果，在test函数中，第一个writeln中的scope虽然没有声明，但是由于变量提升的机制，var scope 语句在该函数体的顶部是存在的，所及即使没有声明，也会有undefined值。
新增的let变量
let变量与var的区别：
let定义的变量有块作用域。
let定义的全局变量不会自动添加全局window对象的属性。
let定义的变量会提前装载。
使用const定义常量
定义常量时，只有唯一的正确格式：
const a = 120;

三、基本数据类型

** 数值类型:** 包含整数和浮点数。
a = 5E2; 采用科学技术法表示，5E2=510^2
b = 1.23e-3; 1.2310^-3
以 0x开头的数代表十六进制数
以0开头的数代表八进制数
无穷大数：当数值超出范围 Infinitely、-Infinitely
布尔类型： 只有true或false两个值。
** 字符串类型：** 字符串变量必须用括号括起来，引号可以是单引号，也可以是双引号。
String（）：类似面向对象语言的构造器，使用该方法可以构建一个字符串。
charAt（）：获取字符串特定索引处的字符。
charCodeAt（）：返回字符串特定索引处的字符的Unicode值。
length：属性直接返回字符串长度。
toUpeerCase（）：将字符串所有字母换成大写。
toLowerCase（）：将字符串所有字母换成小写。
formCharCode（）：静态方法，直接调用String类调用该方法，将一系列Unicode值转换成字符串。
indexOf（）：返回字符串特定字符串第一次出现的位置。
lastIndexOf（）：返回字符串特定字符串最后一次出现的位置。
substring（）：返回字符串的某个字串。
slice（）：返回字符串的某个字串。功能比substring更强大，支持负数参数。
match（）：使用正则表达式搜索目标子字符串。
search（）：使用正则表达式搜索目标子字符串。
concat（）：用于将多个字符串拼接成一个字符串。
split（）：将字符串分割成多个子字符串。可以指定分隔符。
replace（）：将字符串中某个子串以特定字符串替代。
indexOf（a [b]）:搜索目标字符串a出现的位置，其中指定不搜索左边b个字符。
lastIndexOf（a [b]）:搜索目标字符串a最后一次出现的位置，如果没有则返回 -1。
substring（ a [b]）:从a索引处开始截取到b（不包括）索引处。
slice（a [b]）：与substring（）的功能相似，区别slice（）可以接受负数。

undefined类型： 专门用来确定一个已经创建但是没有初值的变量。
null类型： 用于表明某个变量的值为空。
正规则表达式
在这里插入图片描述

四、复合类型

 Object:对象。
 Array：数组。
 Function：函数。

数组
var a = [3, 5, 23];//定义并赋值
var b = [];//定义一个空数组
var c= new Array();//定义一个空数组

一只咸鱼12138

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript相关简单语法（1）

一、JavaScript简介在HTML页面中嵌入执行Javascript代码的两种方式：> 使用javascript：前缀构建执行JavaScript代码的URL.。 <a href="javascript:alert('运行Javascript！')">运行Javascript</a>...
复制链接

扫一扫