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



目录
相关文章
|
10月前
|
JavaScript 前端开发
JavaScript基础总结
JavaScript基础总结
33 0
|
3月前
|
JavaScript 前端开发 Java
JavaScript基础(一)
javascript是一种运行在客户端(浏览器)的编程语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画等交互效果。
36 1
|
8月前
|
存储 JavaScript 前端开发
Javascript基础
Javascript基础
94 0
|
JavaScript 前端开发 Java
JavaScript的基础使用
JavaScript的基础 一、javascript简介 JavaScript简称js,最初由网景(现在的Mozilla)公司创建,由于商标冲突原因,其标准版本命名为ECMAScript,但是一般人们还是叫JavaScript,只在谈标准的时候说到ECMAScript这个名字。值得注意的是JavaScript与java没有任何关系,就像雷峰塔(神话中镇压白娘子的塔)和雷锋。此外js(JavaScript)和jsp(java servlet pages)也没有关系。   js的工作分为两部分,一部分属于js语言本身的特性,而另一部需要依靠宿主环境(web浏览器)才能完成。 二、javascri
JavaScript的基础使用
|
存储 移动开发 JavaScript
JavaScript基础(下)
JavaScript基础(下)
147 0
JavaScript基础(下)
|
JavaScript 前端开发 Java
你真的了解JavaScript基础吗?
你真的了解JavaScript基础吗?
84 0
|
存储 JavaScript 前端开发
JavaScript基础第02
JavaScript基础第02
125 0
|
JavaScript 前端开发
155个JavaScript基础问题(11-20)
155个JavaScript基础问题(11-20)
144 0
155个JavaScript基础问题(11-20)
|
JavaScript 前端开发
155个JavaScript基础问题(1-5)
155个JavaScript基础问题(1-5)
164 0
155个JavaScript基础问题(1-5)
|
JavaScript 前端开发
155个JavaScript基础问题(31-40)
155个JavaScript基础问题(31-40)
187 0
155个JavaScript基础问题(31-40)