3 JavaScript基础使用

简介: 读前思考!在使用之前要先明白2个问题:在哪里写(用)JavaScript代码?如何写JavaScript代码?

读前思考!


在使用之前要先明白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 οnclick=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);
名称 字符串 数值型 布尔型 未定义 对象类型
类型 基本类型





引用类型
关键字 String Number Boolean Undefined Null Object
示例

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”;


true

1


false

0


null

0


undefined NaN


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

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

使用Boolean()函数转换;

数据类型

通过Boolean()函数转后

备注
数值类型:0和NaN false


其他数值类型 true


字符串类型:空串 false


其他字符串 true


null和undefined false



目录
相关文章
|
6月前
|
JavaScript 前端开发
JavaScript基础
1 JavaScript书写位置 2 元素定位和样式设置 3 变量 4 事件 5 innerHTML属性 6 自定义函数
39 3
|
7月前
|
JavaScript 前端开发
JavaScript 基础
JavaScript 基础
|
存储 移动开发 JavaScript
一篇学完JavaScript基础
前言 学习Javascript也有好长时间了,遂把这一阶段的学习内容整理成笔记,巩固所学知识,同时也会参考一些博客,书籍上的内容,查漏补缺,给自己充充电🔋🔋 文章内容如有错误,欢迎指正批评✔️✔️
一篇学完JavaScript基础
|
存储 JavaScript 前端开发
JavaScript基础(中)
JavaScript基础(中)
156 0
JavaScript基础(中)
|
存储 移动开发 JavaScript
JavaScript基础(下)
JavaScript基础(下)
164 0
JavaScript基础(下)
|
存储 JavaScript 前端开发
JavaScript基础(上)
JavaScript基础(上)
149 0
JavaScript基础(上)
|
JavaScript 前端开发
JavaScript基础之for
JavaScript基础之for
100 0
|
JSON JavaScript 前端开发
155个JavaScript基础问题(106-115)
155个JavaScript基础问题(106-115)
170 0
155个JavaScript基础问题(106-115)
|
JavaScript 前端开发 API
155个JavaScript基础问题(86-95)
155个JavaScript基础问题(86-95)
144 0
155个JavaScript基础问题(86-95)
|
存储 JavaScript 前端开发
155个JavaScript基础问题(21-25)
155个JavaScript基础问题(21-25)
144 0
155个JavaScript基础问题(21-25)