一. JS介绍
1. 定义一个变量的形式:
var a;
2. Js是前台语言,用于页面的交互, 不能操作数据库
PHP,ASP,JSP 可以操作数据库, 能够进行增删改查. Node.js除外
3. Js的组成有三个部分
ECMAScript: JavaScript的语法标准. 包括变量, 表达式, 运算符, 函数, if语句, for语句等等
DOM: 操作网页上元素的API. 比如让一个盒子移动, 变色, 轮播图等等.
BOM: 操作浏览器部分功能的API. 比如让浏览器自动滚动.
二. Js代码
1. Js引入
方法1: 在页面中可以直接在body的标签中放入如下标签对:
<script type=”text/javascript”>
// js的代码段
</script>
方法2: 引入js文件
<script type=”text/javascript” src=”demo.js”><script/>
2.语法
a. js 对缩进 换行 空格不敏感
注意每一条语句末尾都要有分号, 为了以后压缩文件
b. 单行注释用 //单行注释
多行注释用 /*多行注释*/
3. js中输出信息的方式
a. 弹出警告框: alert语句
<script type="text/javascript”>
alert("哇哈哈");
</script>
b. 控制台输出: console.log()
console表示"控制台", log表示"输出", 控制台是程序员调试程序的地方,
程序员经常使用这条语句输出一些东西来测试程序是否正确
c. 用户输入:prompt()语句
prompt()就是专门用来弹出能够让用户输入的对话框, 代码如下:
<script type="text/javascript">
var a = prompt("今天是什么天气???")
console.log(a);
</script>
上面的代码中,用户输入的内容将被传递给变量a
prompt()语句中 不管输入什么内容, 都是字符串类型.
d. alert 和 prompt的区别:
alert("从前有座山"); //直接使用,不需要变量
var a = prompt("请输入一个数字"); //必须用变量接收用户输入的数值
4. 变量
a. 变量的声明和赋值
var a = 100;
b. 变量的类型
变量里面可以存数字,字符串等. 变量会自动根据存储内容的类型来决定自己的类型.
数字型:number
如果一个变量里存放了数字,那么这个变量就是数值型的
var a = 100; //定义了一个变量, 并且赋值100
console.log(typeof a); // 输出a 变量的类型, typeof()表示获取变量的类型
字符串型:string
用单引号 或双引号括起来的字符
var a = "abc";
var b = "123321";
var c = ""; //空字符串
console.log(typeof a, typeof b, typeof c);
c. 连字符和加号的区别
键盘上的+ 可能是连字符, 也可能是数字的加号
console.log("我"+"爱"+"你"); //连字符, 把汉字连在一起, 输出:我爱你
console.log("我+爱+你"); // 原样输出: 我+爱+你
console.log("我"+521); // 输出:我521
console.log(1+2+3); // 先计算并输出结果, 输出6
总结: 如果两边都是数值, 此时是加号, 否则就是连字符(用来连接字符串)
d. 变量值的传递(赋值)
语句: a = b; //把b的赋值给a, b值不变
e. 变量格式的转换
parseInt()可以将字符串转成数字, 例如parseInt("5");
parseInt()还具有以下的特征:
带有自动净化的功能: 只保留字符串最开头的数字, 后面的中文自动消失
例如: console.log(parseInt("2018你真帅")); 输出结果:2018
带有自动截断小数的功能:取整, 不是四舍五入
例如:
var a = parseInt(5.8) + parseInt(4.7);
console.log(a); // 输出：9
var a = parseInt(5.8 + 4.7);
console.log(a); // 输出：10
三. 数据类型:
数据类型包括:基本数据类型 和 引用数据类型;
基本数据类型是简单的数据段, 引用数据类型指的是有多个值构成的对象
当我们把赋值给一个变量的时候, 解析器首先要确认的就是这个值是基本类型还是引用类型
1. 基本数据类型:
a. number
var a = 123;
console.log(typeof a) //输出number
//特殊情况: infinity(无限大)是number类型
var a1 = 5/0;
console.log(a1) // 显示 infinity
console.log(typeof a1) //number
b. string
var str = "123"
console.log(typeof str) // string
c. boolean
var b1 = false;
console.log(typeof b1) //boolean
d. null
var c1 = null; //空对象
console.log(typeof c1) //object
e. undefined
var d1; //只有声明,没有赋值,表示变量未定义
console.log(typeof d1) //undefined
2. 引用数据类型
Function
Object
Array
String
Date
四. 运算符
1. 赋值运算符
=, +=, -=, *=, /=, %=
2. 算数运算符
+, -, *, /, %, ++, --
3. 比较运算符
==, ===(等同于:值和类型均相等), !=, !==, >, <, >=, <=
注意: ==(!=)比较的是值, ===(!==)比较的是值和数据类型. 例如:
var s = "1";
var n = 1;
console.log(s == n); //true
console.log(s === n); //false
4. 字符串拼接和字符串运算的特殊情况
a. 字符串类型的数值 和 数值类型相减 结果是数值. 例如:
var a = "3";
var b = 1;
console.log(a-b); //1
b. NaN(not a number)是一个number的类型
var b1 = "one";
var b2 = "two";
ret = b1*b2
console.log(ret, typeof(ret)) //NaN number
c. 字符串拼接
var name = "伊拉克";
var am = "美军";
//字符串拼接
var str = "3月20日," + name + "战争爆发,以" + am + "为主的部队击溃了军队";
console.log(str);
//es6 的模板字符串, tab键上面的反引号``, 添加变量名使用${变量名}
var str1 = "3月20日,${name}战争爆发,以${am}为主的部队击溃了军队";
console.log(str1);
五. 数据类型转换
1. 数值类型转字符串类型
a. 隐式转换
var n1 = 123;
var n2 = "123";
var n3 = n1+n2;
console.log(n3); // 123123
console.log(typeof n3); //string
b.强转换的两种方法: String(), .toString()
var n1 = 123;
var str1 = String(n1);
console.log(str1, typeof str1); //123 string
var num = 234;
str2 = num.toString()
console.log(str2, typeof str2); //123 string
2. 将字符串类型转换成数值类型: Number(), parseInt(), parseFloat()
var strNum = "789.123wasdfj"
var str = "666"
console.log(Number(strNum),Number(str)) //NaN 666
console.log(parseInt(strNum)) //789
console.log(parseFloat(strNum)); //789.123
3. 任何数据类型都可以转成boolean类型
//不是0的都是真
var b1 = "123"; //true
var b2 = 0; //false
var b3 = -123; //true
var b4 = Infinity; //true
var b5 = NaN; //false
var b6; //false
var b7 = null; //false
六. 流程图控制
1. if, if-else, if-else if-else
a. if语句, 例如:
var ji = 20;
if (ji >= 10){
console.log("恭喜你,吃鸡成功")
}
console.log("hello world"); //这里的代码也会执行
b. if-else例句:
var ji = 20;
if (ji >= 10){
console.log("恭喜你吃鸡成功")
}else{
console.log("很遗憾") //这行代码不执行
}
c. if-else if-else例句:
if(true){
//满足条件执行这行代码
}else if(true){
//满足条件执行这行代码
}else if(true){
//满足条件执行这行代码
}else{
//满足条件执行
}
2. 逻辑与(&&), 逻辑或(||)
a. 模拟如果总分 > 400分 并且数学成绩 >89 分就会被清华录取,例如
var sum = 405;
var math = 90;
if(sum > 400 && math >89){
console.log("清华大学录取")
}else{
alert("未被录取")
}
b. 模拟如果总分 > 500 分 或者 英语大于 85分 被复旦大学录取,例如
var sum = 530;
var english = 90;
if(sum > 500 || english >85){
console.log("被复旦大学录取")
}else{
aler("未录取")
}
c. switch语句
var game_score = "better";
switch(game_score){
case "good":
console.log("玩得很好")
break; // break表示退出, 如果不写就直接到遇见下一个break才退出
case "better":
console.log("玩的一般般")
break;
case "best":
console.log("恭喜吃鸡")
break;
default:
console.log("很遗憾")
}
4. while循环, do-while循环
a. while循环 例如:
var i = 1; //初始化循环变量
while(i <= 9){ //判断循环条件
console.log(i);
i = i+1; //改变循环条件
}
练习:1-100之间所有2的倍数
var i = 1;
while(i <= 100){
if(i%2 == 0){
console.log(i)
}
}
b. do-while循环
//不管有没有满足while中的条件, do里面的代码都会先执行一次
var i = 3; //初始化循环变量
do{
console.log(i)
i++; //改变循环条件
}while(i < 10) //判断循环条件
5.for循环
for(var i=1; i<=10; i++){
console.log(i)
}
练习:1-100 之间所有的数的和打印出来
sum = 0
for (var i=1; i<=100; i++){
sum += 1;
}
console.log(sum);
练习:在浏览器中输出直角三角形
for(var i = 1; i <= 6; i++){
for(var j=1; j<=i; j++){
document.write("*");
}
document.write("<br>");
}
练习: 浏览器中输出等腰直角三角形
for(var i = 1, i<=6; i++){ //控制行数
//控制空格数
for(var s=i; s<6; s++){
document.write(" ")
}
for(var j=1; j<=2*i-1; j++){
document.write("*")
}
document.write("<br>")
}
七. 常用内置对象
js中所有的事物都是对象: 字符串,数值, 数组, 函数......此外js允许自定义对象
js提供多个内置对象: String, Date, Array等等
对象是带有属性和方法的特殊数据类型
1. 数组对象
数组的创建形式有2种方式:
a. 字面量方式创建, 推荐使用
var colors = ["red","green","pink"];
b. 构造函数创建, 使用new关键词
var colors = new Array();
数组的赋值
var arr = [];
//通过下标进行赋值
arr[0] = 123;
arr[1] = "哈哈哈";
arr[2] = "嘿嘿";
数组的常用方法和示例
方法或者属性 描述
concat() 连接两个或多个数组,并且返回结果
var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity); // ["北京", "山东", "天津", "东莞", "深圳", "上海"]
join() 把数组的所有元素放入一个字符串里
var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str); // 98|78|76|100|0
toString() 把数组转换成字符串, 并返回结果
str1 = score.toString();
console.log(str1); // "98,78,76,100,0"
slice(start,end)选取数组的一部分,并返回一个新的数组
var arr = ['张三','李四','王文','赵六'];
var newArr = arr.slice(1,3);
console.log(newArr); // ["李四", "王文"]
pop() 删除数组的最后一个元素, 并返回删除的元素
var color2 = ['black', 'pink', 'deep blue'];
el = color2.pop();
console.log(el); //deep blue
console.log(color2); //['black', 'pink']
push() 向数组末尾添加一个或多个元素, 并返回新的长度
arr.push('小马哥');
console.log(arr); // ["张三", "李四", "王文", "小马哥"]
reverse() 反转数组的元素顺序
var names = ['alex','wusir','xiaoma','angle'];
names.reverse();
console.log(names); // ["angle", "xiaoma", "wusir", "alex"]
sort() 对数组的元素进行排序 按字母从a--z
var names = ['alex','wusir','xiaoma','angle'];
names.sort(names);
console.log(names) // ["alex", "angle", "wusir", "xiaoma"]
shift() 删除并返回数组的第一个元素
var color2 = ['black', 'pink', 'deep blue'];
el = color2.shift();
console.log(el); //black
console.log(color2);//{'pink', 'deep blue']
unshift() 向数组的开头添加一个或者多个元素,并返回新的长度
var color2 = ['black', 'pink', 'deep blue'];
new_length = color2.unshift('hot pink');
console.log(color2); //{['hot pink','black','pink', 'deep blue']
console.log(new_length); // 4
Array.isArray 判断对象是否为数组
var color2 = ['black', 'pink', 'deep blue'];
console.log(Array.isArray(color2)); //true
length 数组的一个属性,设置或返回数组元素的个数
var color2 = ['black', 'pink', 'deep blue'];
console.log(color2.length); //3
2. 字符串对象
charAt() 返回指定索引的字符串
var str = 'hello';
var charset = str.charAt(1);
console.log(charset); // e
concat() 返回字符串,表示两个或多个字符串的拼接
var str1 = 'al';
var str2 = 'ex';
console.log(str1.concat(str2,str1)); // alexal
replace(a,b) 字符串b 替换a
var a = '1234567755';
var newStr = a.replace('4567','****');
console.log(newStr); // 123****755
indexOf() 返回某个指定的字符串值在字符串中首次出现的位置,如果没有返回-1
var str = 'world';
console.log(str.indexOf('o')); // 1
console.log(str.indexOf('a')); // -1
slice() 返回start到end -1之间的字符串, 索引从0开始
var str = '正能量';
console.log(str.slice(1,2)); // 能
split() 把字符串分割为字符串数组
var str = '我的天呢，a你在说什么呢？a哈哈哈';
console.log(str.split('a')); // ["我的天呢，", "你在说什么呢？", "哈哈哈"]
substr(start,end)字符串截取, 顾头不顾尾
var str = '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.substr(0,4)); // 我的天呢
toLowerCase() 返回一个新的字符串,该字符串字母都变成了小写
var str = 'XIAOMAGE';
console.log(str.toLowerCase()); // xiaomage
toUpperCase() 返回一个新的字符串,字符串的所有字母变大写
var str = 'xiaomage';
console.log(str.toUpperCase()); // XIAOMAGE
match() 查找到一个或多个正则表达式的匹配
search() 查找与正则表达式相匹配的值
toString() 将number类型转换成字符串类型
var num = 1234.1234;
var str = num.toString();
console.log(str);
3. 日期对象
创建日期对象, 只有构造函数这一种方式, 使用new关键字
var myDate = new Date();
常用语法:
Date() 根据当地时间返回 日期和时间
console.log(Date());//Thu Sep 27 2018 10:07:43 GMT+0800 (中国标准时间)
getDate() 根据本地时间返回指定日期对象的月份中的第几天(1-31)
console.log(myDate.getDate());//27
getMonth() 根据本地时间返回指定日期对应的月份(0-11)
#注意 0表示1月
console.log(myDate.getMonth());//8
getFullYear() 根据本地时间返回指定日期对象的年份(返回4位数)
console.log(getFullYear());//2018
getDay() 根据本地时间返回指定日期对象的星期几的第几天(0-6)
#0代表 星期日
console.log(getDay());//4
getHours() 根据本地时间对象返回指定时间对象的小时(0-23)
console.log(myDate.getHours())//14
getMinutes() 根据本地时间对象返回指定时间对象的分钟(0-59)
console.log(myDate.getMinutes())//8
getSeconds() 根据本地时间对象返回指定时间对象的秒(0-59)
console.log(myDate.getSeconds())//24
toLocalString() 返回本地时间
console.log(myDate.toLocalString())
#使用循环定时器 在页面中显示动态时间
setInterval(function(){
document.getElementById("timer").innerText = Date().toLocalString();
},1000)
4. math(算数)对象
#常用内置对象
Math.floor() 向下取整,地板函数
var x = 1.789;
var new_x = Math.floor(x);
console.log(new_x)//1
Math.ceil() 向上取整,天花板函数
var x = 1.789;
var new_x = Math.ceil(x);
console.log(new_x)//2
Math.max() 取多个值中的最大值
console.log(Math.max(3,2,1,4,5,2))//5
Math.min() 取多个数的最小值
console.log(Math.min(3,2,1,4,5,2))//1
Math.random() 获取0-1之间的随机数
console.log(Math.random())//0.669789427291309
#获取100--300之间的随机数
min---max 之间的随机数: min+Max.random()*(max-min)
var start = 100;
var end = 300;
var num = start+Math.random()*(end-start);
console.log(Math.floor(num))
八. 函数
函数的定义:函数就是将一些语句进行封装,然后通过调用的形式,执行这些语句
1. 函数的定义
function 函数名(){
//函数体
}
2. 函数的调用
函数名();
3. 函数的参数
函数定义时的形参
function f(arg1,arg2){
console.log(arg1+arg2);
};
函数定义时的实参
f(100,200);
4. 返回值
function f(arg1,arg2){
return arg1+arg2;
}