第一章 JavaScript基础
本章内容
-
js基本语法
-
运算符的使用
第一节
1.javascript的介绍
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
2. javascript的作用
-
嵌入动态文本于HTML页面。
-
对浏览器事件做出响应。
-
读写HTML元素。
-
在数据被提交到服务器之前验证数据。
-
检测访客的浏览器信息。
-
控制cookies，包括创建和修改等。
-
基于Node.js技术进行服务器端编程。
3.使用javascript
-
使用内部js
<!DOCTYPE html> <html> <head> <title> 这是我的页面 </title> <style type="text/css"> </style> <!--定义内部的js脚本--> <script type="text/javascript"> //写js代码,弹出消息框 alert(123); </script> </head> <body> </body> </html> -
使用外部js
定义外部的js文件:test.js
/*定义js函数*/ function show() { alert(456); } alert(789);在js-2.html中引用test.js
<!DOCTYPE html> <html> <head> <title> 这是我的页面 </title> <style type="text/css"> </style> <!--引用外部js文件--> <script type="text/javascript" src="test.js"></script> <!--定义内部js块--> <script type="text/javascript"> show(); </script> </head> <body> </body> </html>
第二节 javascript 变量使用
1.变量的概念
变量来源于数据，在程序语言中是指通过变量来存储数据，并使用变量名来引用，是一个抽象概念。变量中的数据可以被改变。
2.变量的定义和使用
变量的定义有三种方式:var , let, const
语法:
var 变量名 = 数据;
var: 定义变量的关键字
变量名: 变量名是变量的标识,引用变量中的数据。命名规则:字母，数字，下划线，$，注意数字不能打头。
变量命中有多个单词时，用小驼峰命名法(minAge)。
=：赋值符号，用于将右边的数据存入左边的变量中
数据:"张三",'李四', 100,2.234, true,false, null ,new Date(),undefined
字符串类型的数据(string): “张三”,'李四'
数值类型的数据(number): 100, 2.234
布尔值类型数据(boolean):true,false
对象类型的数据(object):null, new Date()
undefined类型的数据：undefined
<script type="text/javascript">
/*定义变量
变量名为num1*/
var num1 = 1234;
//定义另外一个变量 num2
var num2 = 567;
alert(num1);
alert(num2);
alert(num1+num2);
</script>
typeof函数:用于测试数据类型，返回数据类型的字符串
<script type="text/javascript">
//定义一个变量
var bliang;
alert(bliang+" "+typeof(bliang));
bliang = "张三";
alert(bliang+" "+typeof(bliang));
bliang = 100;
alert(bliang+" "+typeof(bliang));
bliang = 2.234;
alert(bliang+" "+typeof(bliang));
bliang = null;
alert(bliang+" "+typeof(bliang));
bliang = true;
alert(bliang+" "+typeof(bliang));
</script>
使用let关键字定义变量
语法：
let 变量名 = 数据;
let 和 var的区别
-
都可以定义变量存储数据和使用数据
-
var是js5以下版本用的关键字，所有浏览器都支持。let是js6中加入的新关键字，只有高版本浏览器才支持
-
var可以重复定义变量，但是let不可以重复定义变量
-
var声明的变量都是全局变量，而let定义的变量如果在子级代码块中，则作用范围只存在于子级代码块中，在外部无法使用
使用const定义的变量称为常量，也就是一旦存储数据之后，就不能改变其中的内容。
语法:
const 变量名 = 数据;
<script type="text/javascript">
/*定义一个常量,const只在高版本浏览器可用*/
const num = 10;
alert(num);
/*对于常量再次赋值，则会报错*/
num = "张三";
alert(num);
</script>
3.数据类型转换
将字符串转为数值
<script type="text/javascript">
let num1 = "100.123";
let num2 = "200.456";
//alert(num1+num2);
//字符串转为数值:
//1.parseInt 将字符串转为整数
//2.parseFloat 将字符串转为小数
//3.Number 将字符转为数值
num1 = Number(num1);
num2 = Number(num2);
alert(num1);
alert(num2);
//alert(num1+" "+typeof(num1));
alert(num1+num2);
</script>
<script type="text/javascript">
var s = "abc";
//如果字符串无法转为数值，会返回NaN:Not a number
s = parseInt(s);
alert(s);
</script>
将数值转为字符串
<script type="text/javascript">
let num = 100;
//将数值转为字符串:
//1.用toString()方法
//2.String()
//3.数据+""
//num = num.toString();
num = String(num);
alert(num+" "+typeof(num));
</script>
4. javascript常用提示框
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<script type="text/javascript">
window.alert("你好");
var check=window.confirm("有女朋友吗");
alert(check+" "+typeof(check));
var height=window.prompt("你的身高是多少？",180);
alert(height+" "+typeof(height));
console.log("控制台");
document.write("嘿嘿嘿");
</script>
</head>
<body>
</body>
</html>
5.javascript的注释
//单行注释 /**/多行注释
第三节 运算符
1.算术运算符
+(加),-(减),*(乘),/(除),%(求余),++(自增),--(自减)
算数运算:针对数值进行四则运算，结果是是数值。
<!DOCTYPE html>
<html>
<head>
<title> 这是我的页面 </title>
<style type="text/css">
</style>
<script type="text/javascript">
var num1 = 10;
var num2 = 3;
/*document.write((num1+num2)+"<br/>");
document.write((num1-num2)+"<br/>");
document.write((num1*num2)+"<br/>");
document.write((num1/num2)+"<br/>");
document.write((num1%num2)+"<br/>");*/
var i = 1;
//i++; //自增 等价于 i = i+1;
//++i;//自增 等价于 i = i+1;
//alert(i);
//在表达式中，有多种运算时
//++在后，先使用变量赋值,再自增
//++在前, 先自增再赋值
//var x = i++;
//var x = ++i;
//--在后，先使用变量赋值,再自减
//--在前, 先自减再赋值
var x = --i;
alert(x+" "+i);
</script>
</head>
<body>
</body>
</html>
注意:加法的二义性
<script type="text/javascript">
var n = "100";
var x = '200';
//加号用于字符串就是做拼接
alert(n+x);
var a = 100;
var b = 200;
//加号用于数值就是做加法运算
alert(a+b);
</script>
2.关系运算符(比较运算符)
关系运算:用于比较两个数值的大小关系，运算结果是布尔值(true/false)
>,>=,<,<=,==,===,!=
<script type="text/javascript">
var num1 = 10;
var num2 = 3;
document.write(num1>num2);
document.write("<br/>");
document.write(num1>=num2);
document.write("<br/>");
document.write(num1<num2);
document.write("<br/>");
document.write(num1<=num2);
document.write("<br/>");
document.write(num1==num2);
document.write("<br/>");
document.write(num1!=num2);
document.write("<br/>");
</script>
==和===的区别
var x = 100;
var y = "100";
//两个等，只判断数值是否相等
//alert(x==y);
//三等除了判断数值是否相等，还要判断数据的类型是否相同
alert(x===y);
3.逻辑运算符
&&,||,!
4.赋值运算符
=,+=,-=,*=,/=,%=
5.三目运算符
? :
5371
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
