首先我们要知道网页的标准:
HTML是网页的结构
Css是网页的表现,美化
Javascript是网页的动态结构,也就是行为。
本篇文章中简单的介绍了
1. js的基础语法
2. 变量的命名规范
3. 变量的赋值
4. js里面的简单数据类型(number,string,boolean,undfined)与数据类型的装换
我们学习Js之后我们能做什么?
我们可以给网页实现各种交互效果,可以给网页创建不同的命令,
Javascript是基于对象和事件驱动,运行在浏览器客户端的脚本语言
<script>
//书写js代码
</script>
<div 事件名=“js代码”><div>
只要把script标签写在网页中的任意位置都叫内嵌式写法
优点:把结构与效果分离,好维护好修改。
步骤:1.首先准备一个js文件,后缀名为.js的文件,在js文件里面写js代码就不需要些script标签。
2.将我们的js文件引入到HTML文件中
<script src="文件路径/文件名"></script>
3.内嵌式写法与外联式写法不能同用
<script src="./index.js">//引入了js文件
var zhu = 1;
console.log(zhu)
//注意里面有js代码了,又引入了js文件
</script>
4.实列:通过js方法在网页中弹出一句话
注意:在js中是严格区别字母大小写
<!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>
</head>
<body>
<script>
alert('你好,世界!');
//通过网页打开文件会弹出“你好,世界!”
console.log("你好,世界!");
//在浏览器的控制台中(Console)输出的消息
document.write(“你好,世界”);
//输出消息,在网页的主体输出,输出的是文本类型
</script>
</body>
</html>
注意:1.document.write可以在网页中设置HTML网页标签
2.prompt可以接收用户的输入内容
<script>
prompt('请输入')
</script>
3.confirm可以获取用户的选择
<script>
confirm('确定要走吗')
</script>
3.1 变量(字面理解):可以改变的一种数据,在网页中看到的任何信息我们都可以理解为是一种数据。
程序中的变量:变量也是一种容器,但是这个容器在程序中是用来保存数据的容器!!
3.2 变量的使用
3.2.1定义变量:关键字 var
<script>
var 自定义的变量名;
</script>
3.2.2 变量的赋值
var 自定义变量名 = 值(数据)
注意事项:
var fuXi = 123;
//此时x为大写
var xiaoZhu = 123;
//此时z为大写
//以上皆可以成为驼峰命名法
<script>
var fuXi = 123;
//此时我们定义了一个变量,变量名为“fuxi”,我们赋值为123.
//此时我们可以console.log输出“fuxi”,那么我们控制台或输出这个变量的值123。
console.log(fuXi);
</script>
赋值小案例:
交换两个变量的值
//交换两个变量的值
//思路:我们先定义两个变量,然后我们再定义一个变量来接取某个变量的值
var qw = 30;
var op = 20;
//接取qw的值,此时as=30
var as = qw;
alert(qw)
//如果qw=op,op=20,那么qw=20;
var qw = op;
//此时as=30,那么op=as=30;
var op = as;
console.log(op)
console.log(qw)
1.简单数据类型
<script>
//数字类型:如果一个变量的值是一个纯粹的数字,那么我们称这个变量为数字类型
var a = 1;
var b = -1;
var c = 1.1;
var d = -1.1;
//以上数据类型都为数字类型
</script>
数据类型转换
<script>
// Number(变量)--------->转换为数字类型
var a = '1';
console.log(typeof a)//string
a = Number(a);
console.log(typeof a)//number
//parseInt(变量)------->转换为数字类型
var a = '1';
a = parseInt;
console.log(typeof a)//number
//prseFloat(变量)------->转换数字类型
var a = '1';
a = parseFloat(typeof a)//number
//他们的值是不变的
</script>
<script>
//变量.toString
var a = 123;//number
a = a.toString
console.log(typeof a)//string
//String(变量)
var a = 123;//number
a = String(a)
console.log(typeof a)//string
</script>
<script>
//字符串类型:如果一个变量的值使用了引号,不管是单引号还是双引号,那么该变量的值就是字符串类型
var a = "1";
var b = 'adc';
//以上数据类型都为字符串类型
</script>
我们可以通过typeof来获取变量的数据类型
<script>
var a = "1";
var b = 1;
//获取变量的类型
console.log(typeof a)//string
console.log(typeof b)//number
</script>
<script>
//布尔类型
var a = true;
//在程序中true一般都是用来表示正确的或者条件满足的
//布尔类型
var b = false;
//false一般用来表示错误的或者用来表示条件不满足的
</script>
数据类型转换
布尔类型里面0,undefined,空字符串,NaN表示false,其它表示true
//类型转换
<script>
var a = 0;
//转布尔类型
a = Boolean(a);
console.log(a)//false
console.log(typeof a);//Boolean
</script>
<script>
var a;
console.log(typeof a);//undefined
//a是有值的它的值为undefined!!!!
</script>