js基础使用

Zinksl
149 阅读4分钟

读前思考！

在使用之前要先明白2个问题：

  • 在哪里写（用）JavaScript代码？
  • 如何写JavaScript代码？

1 编写JavaScript的三类位置

1.1 写在HTML页面内的JavaScript

JavaScript作用于显示页，必然可以嵌在页面中，在HTML页面是通过写入的，代码写在两个标签之间；这种方式也叫【JavaScript的内嵌式】

嵌入HTML中的js示例:

<!DOCTYPE html>
<html>
  <head>
    <!-- 设置字符集 -->
    <meta charset="utf-8" />
    <!-- 页面标题 -->
    <title>hello word</title>
    <!-- js标签 -->
    <script type="text/javascript" >
      // 弹窗警告提示
      alert("hello word!");
      // 往页面中写入内容
      document.write("你好我是，小Z学长！");
      // 控制台打印内容
      console.log("我们一起学习JavaScript啊");
    </script>
  </head>
  <body>

  </body>
</html>

代码的执行顺序在默认情况下是由上往下逐条执行【在执行页面显示效果可以说明】

1.2 写在某个控件里的JavaScript

以下两个示例我们可以看出来，JavaScript代码也可以写入控件内部执行；这种方式叫【JavaScript的行内式】

JavaScript代码写入控件示例：

<!DOCTYPE html>
<html>
  <head>
    <!-- 设置字符集 -->
    <meta charset="utf-8" />
    <!-- 页面标题 -->
    <title>hello word</title>
  </head>
  <body>
    <!-- 点击按钮弹出警示框 -->
    <button onclick=alert("嘿，点我就一起学习吧！") >谁敢点我试试！</button>
  </body>
</html>

JavaScript代码写入超链接示例：

<!DOCTYPE html>
<html>
  <head>
    <!-- 设置字符集 -->
    <meta charset="utf-8" />
    <!-- 页面标题 -->
    <title>hello word</title>
    <!-- js标签 -->
  </head>
  <body>
    <!-- 在超链接中写入JavaScript代码 -->
    <a href="JavaScript:alert('嘿，你还点')">再点我试试！</a>
    <a href="JavaScript:;">再点我试试！</a>
  </body>
</html>

1.3 单独文本里的JavaScript

单独JavaScript文档：

alert("我是外部JavaScript，你敢相信？");

HTML文档：

<!DOCTYPE html>
<html>
  <head>
    <!-- 设置字符集 -->
    <meta charset="utf-8" />
    <!-- 页面标题 -->
    <title>hello word</title>
    <!-- js标签 -->
    <!--  引入外部js代码 -->
    <script type="text/javascript" src="./js/firstJavaScript.js">
    </script>
  </head>
  <body>

  </body>
</html>

在HTML中通过script标签引入外部单独js的这种方式叫【外链式】

2 JavaScript怎么写呢

2.1 在知道如何写代码之前需要明白几个点：

（1）写js注意事项

①JavaScript严格区分大小写 ②“;”标志JavaScript语句结束 ③JavaScript忽略多个空格和换行[在代码间的空格or换行不影响代码执行效果]

（2）什么是字面量、变量和标识符

根据字面意思我们就可以得出结果，字面量就是不可改变的量好比数字“1”永远是1； 变量好比是年龄，今年18明年就19了，此处“年龄”就是一个变量与数学中的未知量类似； 标识符就是给变量、对象等起的名字就是标识符，好比以下示例中的age；标识符必须满足三个规定： ①组成只能是字母大小写、数字“$”和“_”； ②不能以数字开头； ③不能是关键字或者保留字；最后命名建议使用驼峰命名规范要做到见名知意（一看标识符就知道是什么意思）；

在JavaScript中变量如何声明呢，通过关键字var声明，声明一个年龄age如下：

//声明变量 var age; //声明并赋值 var age = 18；

（3）JavaScript的六类数据类型

在拿到某个变量不知其数据类型时，可通过typeof运算符进行检测；

示例：

// 弹警示框
alert("我是外部JavaScript，你敢相信？");
// 定义字符串
var name = "zinksl";
// 使用typeof运算符得到name数据类型
alert(typeof name);
名称字符串数值型布尔型未定义空对象类型
类型基本类型引用类型
关键字StringNumberBooleanUndefinedNullObject
示例var name = "z";
var name1 = 'z';		var numb = 18;var flag= false;
var flag1= true;
备注：单引号和双引号都可以表示字符串；NaN、Infinity都是num类型；分别是：not a number和无穷大布尔类型只有两个值true和false表示未定义表示空对象

🚩强制类型转换：

①其他数据转String类型

通过调用被转换数据类型的toString方法实现转换；

示例：

//定义数值类型age var age = 18; //强制转换为String类型 var str = age.toString(); console.log(typeof str);

注意：【null和undefined不能用使用toString方法,但是可以调用String()函数】
示例：

//定义变量
var temp = null;
//接受函数返回值
var a = String(temp);
//在控制台输出运算结果
console.log(typeof a);

②其他数据转Number类型

通过Number()函数实现转换；

数据类型通过Number()函数转后备注
纯数字：直接转数值型；
含有其他字符：则转为NaN；
空串或者空格：转为“0”；
true1
false0
null0
undefinedNaN

针对字符转数值的两个函数：parseInt()只取整数、parseFloat()

③其他数据类型转为Boolean类型；

使用Boolean()函数转换；

数据类型通过Boolean()函数转后备注
数值类型：0和NaNfalse
其他数值类型true
字符串类型：空串false
其他字符串true
null和undefinedfalse

🚩运算符：

一元运算符、算术运算符、逻辑运算符、关系运算符、赋值运算符、条件运算符、逗号运算符

avatar
文章
阅读
粉丝