javascript(上)
简介
语法
1.注释
单行注释://
多行注释/**/
2.常用输入和输出
//弹窗输出,
//弊端:弹出数组或者对象不详细.
windows.alert();
//在控制html页面输出
document.write();
//在控制台调试输出,最常用.
console.log();
//输入框
prompt();
//确认框,返回布尔类型的值.
comfirm();
javascript的引用方式.
1.直接在标签内引用,通常是事件触发.
<button onclick="alert('hellow word');">点击我</button>
<br>
<button onclick="fun1();">再点击我</button>
<script>
alert("hello world");
function fun1(){
alert("hello world 3");
}
</script>
2.内部使用.
<script>
// 内部使用
alert("hello world!");
</script>
3.外部引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的引用方式</title>
<script src="./waibu.js"></script>
</head>
<body>
</body>
</html>
js变量作用域
在函数外部声明的变量,在函数内部可以使用,在函数内部用var,let声明的,作用域只在当前函数内(局部变量内),在函数内部直接声明,入a=10此作用全局.
let a;
function sum() {
a = 10;
// let a=10;
// var a=10;
// document.write(a + "<br>");
}
sum();
document.write(a + "<br>");
3.js中的变量和常量
3.1常量的定义:程序运行过程中,值不发生变化的量.
const:通常定义常量,常量一经定义就不能修改,建议都用大写字母.
3.2变量的定义:程序执行过程中,值发生变化的量.
es5声明变量用 var
es6声明变量:let
let声明的变量是局部变量,只在当前块{}内生效,var在某些场合下(for循环或{}下)是全局变量.
变量的声明需要考虑两点:1.变量名2.变量类型.
3.3;是一句话的结束标志,也可以使用回车作为一句话结束的标志,尽量不要使用
3.4变量的命名规则:
1.必须以字母(
和
)
开
头
,
可
以
包
含
数
字
,
字
母
,
和_)开头,可以包含数字,字母,
和)开头,可以包含数字,字母,和下划线_,并且严格区分大小写.
2.不能包含其他非法字符(除了英文,数字,$和_外的字符,)或关键字.
//变量的命名规则
//1.可以:以字母/$/_开头,组成内容可以是字母(区分大小写)/数字/$/_
//2.不可以:不可以使用非法字符(除了字母/数字/$/_之外的字符)和关键字
//变量的定义
let name1;
let Name2;
// let $name3;
let _name4;
// let let; Uncaught SyntaxError: let is disallowed as a lexically bound name
//变量的赋值
name1=123;
Name2="你好 世界"
//变量定义并赋值
let $name3="hello world!"
//变量的使用,直接使用变量名
console.log(name1);
console.log($name3);
4.js的数据类型
只有规定的javascript类型才能使用,没规定的不可以使用.
打印没声明赋值的变量时,不会报错,java会报错
1.基本类型:字符串(string),数字(number),布尔(boolean),空(null),未定义(undefined)
2.数据类型:object(对象)array(数组)function(函数)
常用api:
typeof():typeof有两种写法:1.typeof(变量名) 2.typeof 变量名
1.字符串(string):内容使用单引号或者双引号包裹起来
注意事项:字符串中双(单)引号不能嵌套双(单)引号,要想嵌套只能使用转义字符(’’).
字符串常用api:
//字符串string
let name="王五";
let abc='aabbcc';
let aa='32';
//检测数据类型 typeof()
console.log(name,typeof aa);
2.数字:直接写数字:可以是整数或者小数或者科学计数法.
数字中常用api:
parse:解析
parseInt():强制转换为整数类型,全部转换,部分转换(只打印出数字),NAN
parseFloat()转换为小数类型,如果整数为小数或者.0不会转换成小数
//number数据类型
let num=1;
let num1=1.24;
let num2=2e1;//科学计数法
let s_num='12.0';
let s_num1='1e';
let s_num2="a1"
let s_num_=parseInt(s_num);
let s_num_1=parseInt(s_num1);
let s_num_1_2=parseFloat(s_num1);
let s_num_2=parseInt(s_num2);
console.log(num,typeof(num));
console.log(num1,typeof num1);
console.log(num2,typeof(num2));
console.log(s_num,typeof s_num);
console.log(s_num1,typeof s_num1);
console.log(s_num2,typeof s_num2);
console.log(s_num_,typeof(s_num_));
console.log(s_num_1,typeof(s_num_1));
console.log(s_num_1_2,typeof(s_num_1_2));
console.log(s_num_2,typeof(s_num_2));
3.布尔(boolean):可以是true,可以是false
let b=false;
let c=true;
console.log(b,typeof(b));
console.log(c,typeof(c));
api:
//强制类型转换Boolean();
//除了undefined,null,0,NaN,""都转换为true
document.write(Boolean(1) + "<br>");
document.write(Boolean(0.0) +"<br>");
document.write(Boolean("")+"<br>");
document.write(Boolean(NaN)+"<br>");
document.write(Boolean(null)+"<br>");
document.write(Boolean(undefined)+"<br>");
document.write(Boolean({})+"<br>");
document.write(Boolean([])+"<br>");
4.空类型(null):打印出的内容是null,但类型是空对象(object)
let nuu=null;
console.log(null,typeof(nuu));
//null "object"
5.未定义(undefined;)输出undefined
let c=undefined;
console.log(c,typeof(c));
6.数组:用于存放多个元素的容器，其长度可变且没有类型的限制每个元素之间用逗号隔开.
let people=["张三",18,true]
console.log(people,typeof(people));
// let a=10;
// a=20;
// let b=20;
// document.write(a,b);
//array使用内置函数声明
let arr =new Array();
document.write(arr+","+typeof(arr)+"<br>");
let arr1=new Array(3);
//默认的内容是undefined;
document.write(arr1+"<br>");
let arr2=new Array("张三",10,20,'男');
document.write(arr2+"<br>");
// let arr3=['王五','赵六',true,100,'男','女',false,1.23];
//访问数组里面的元素语法:数组名[下标];
//给数组某元素重新赋值 数组名[下标]=值;
let arr3=['王五','赵六',true,100,'男','女',false,1.23];
arr3[1]='张三';//将第二个元素换成张三
document.write(arr3+"<br>");
// 求数组的长度 数组名.length
document.write(arr3.length+"<br>");
//循环输出数组中的值
for(let i=0;i<arr3.length;i++){
document.write(arr3[i]+"<br>");
}
常用api
let arr=['张飞','关羽','赵云'];
let name=['吕布','貂蝉','周瑜'];
let name1=['大乔','小乔'];
// concat()用处:连接两个或多个数组,
//参数:该参数可以是具体的值，也可以是数组对象。可以是任意多个。
//返回值:返回一个添加后的新的数组
let arr2=arr.concat("曹超");
let arr3=arr.concat(name);
let arr4=arr.concat(name).concat(name1);
document.write(arr2+"<br>");
document.write(arr3+"<br>");
document.write(arr4+"<br>");
//join()用处:把数组的所有元素放入一个字符串
//参数:指定要使用的分隔符,默认逗号
//返回值:返回分隔符分开的字符串.
document.write(arr2.join()+"<br>");
document.write(arr3.join("---")+"<br>");
//pop()用处:删除并返回元素的最后一个
//参数:无
//返回值:返回最后一个元素
document.write(arr3.pop()+"<br/>");
document.write(arr3+"<br>");
7.对象:javascript中万物皆对象.
let people = {
name:"张三",
age:18
}
console.log(people,typeof people);
8.方法:function aa(){}
5.js的运算符
1.算术运算符
+ - * / % ++ --
注意:js中的除法是整除.
+号既可以当运算符也可以当连接符,从左往右执行的.
2.赋值运算符
= += -= *= /= %=
3.比较运算符
> < >= <= == != === !==
整型==字符串
!=将字符串先转换成整型,再比较
====:既比较整型又比较类型
!==:不恒等
出现NaN首先检查输入的有没有字符串
4.短路逻辑运算符.
&&与:只要有一个为假,结果就为假.
||或:只要有一个是真,结果就为真.
!非:真假相反
6.选择.判断.
4.1选择
4.1.1单选:
格式:
if(条件语句){}
let age=19;
if(age>18){
document.write("成年人");
}
4.1.2.1二选一
if(条件语句){
}else if(条件语句){
}else{
}
let age = 17;
if (age > 18) {
document.write("成年人");
} else {
document.write("未成年人");
}
4.1.2.2多选:
格式:
if(条件语句){
}else if(条件语句){
}else{
}
if(age >=60){
document.write("老年人");
}else if(age>=45){
document.write("中老年");
}else if(age>=18){
document.write("中年人");
}else{
document.write("未成年人")
}
4.2判断句的简写
三元运算符:条件?值1:值2;
// 判断的简写
let a=10;
//如果省略了括号,就默认第一句是括号内的语句
if(a<10)
document.write("这是第一句");
document.write("这是第二句");
//三元运算符:格式:条件?条件成立时的语句:条件未成立时的语句;
//三元运算符
document.write(a>=10:?"a大于10":"a不大于10");
4.3:if条件的嵌套
let age;
age=prompt("请输入你的年龄");
if(age>18){
if(age>=60){
document.write("老年人");
}else{
if(age >=40){
document.write("中年人");
}else{
document.write("中年人");
}
}
}else{
document.write("未成年人");
}
4.4switch语句
// swith(表达式(一般是值的形式)){
// case 值1:
// 输出语句1;
// break;
// case 值2:
// 输出语句2;
// break;
// case 值3:
// 输出语句3
// break;
// default:
// 默认语句
// break;
// }
let season
season=prompt("请输入你最喜欢的季节");
// switch(season){
// case "春天":
// document.write("春天到了");
// break;
// case "夏天":
// document.write("夏天到了");
// break;
// case "秋天":
// document.write("秋天到了");
// break;
// case "冬天":
// document.write("冬天到了");
// default:
// document.write("你输入的有误会");
// break;
// }
// case穿透问题,case会先匹配case的值,当遇到break时候,结束.
switch(season){
case "春天":
document.write("春天到了");
// break;
case "夏天":
document.write("夏天到了");
// break;
case "秋天":
document.write("秋天到了");
// break;
case "冬天":
document.write("冬天到了");
break;
default:
document.write("你输入的有误会");
break;
}
循环语句
1.for循环
// 循环语句
// 表达式一:循环从什么地方开始
// 表达式二:循环到什么地方结束
// 表达式三:经历循环体后,循环变量有什么变化(循环趋于结束的条件)
// 执行顺序
// 首先执行表达式
// 执行表达式2
// 执行循环体
// 执行表达式3
// 执行表达式2
// 执行循环体
// 执行表达是3
for(表达式1:表达式2;表达式3){
循环语句
}
for (let a = 10; a < 20; a++) {
document.write(a + "<br>");
}
let b = 20;
for (; b > 10; b--) {
document.write(b + "<br>")
}
let i=1;
for(;;){
if(i>=5){
break;
}
document.write(i+"<br>");
i++;
}
//循环输出1-100
// for(let a=1;a<=100;a++){
// document.write(a+"<br>");
// }
//循环输出1-100的偶数
// for(let b=1;b<=100;b++){
// if(b%2==0){
// document.write(b+"<br>");
// }
// }
//输出1-100内的奇数
// for(let b=1;b<=100;b++){
// if(b%2!=0){
// document.write(b+"<br>");
// }
// }
// for(let b=1;b<=100;b+=2){
// document.write(b+"<br>");
// }
// 求1-100偶数的和
// let sum=0;
// for(let i=1;i<=100;i++){
// if(i%2==0){
// sum+=i;
// }
// }
// document.write(sum);
//显示1-100 7的倍数 十为个位为7的数字
// for(let i=1;i<100;i++){
// if(i%7==0 || i%10==7 || parseInt(i/10)==7){
// document.write(i+"<br>");
// }
// }
增强for循环
let arr = ['张三','李四','王五'];
for(let i=0;i<arr.length;i++){
console.log(arr[i]);
}
//for in index：索引下标
for(let index in arr){
document.write(arr[index]+"<br>");
}
//for of val:数组的值
for(let val of arr){
document.write(val+"<br>");
}
2.while和do-while循环.
while循环:先判断,再循环
do-while循环:无论条件是否满足,循环体都会执行一次,先执行一次循环体,再去判断.
// while循环:先判断,再循环
// while(表达式){
// 循环体;
// }
// 循环输出1-10
// let a = 1;
// while (a <= 10) {
// document.write(a + "<br>");
// a++;
// }
//循环输出10-1
// let b=10;
// while(b>=1){
// document.write(b+"<br>");
// b--;
// }
// do-while循环
// do{
// 循环体;
// }while(表达式);
//无论条件是否满足,循环体都会执行一次,先执行一次循环体,再去判断.
//循环输出1-10;
// let c=1;
// do{
// document.write(c+"<br>");
// c++;
// }while(c<=10)
for常用于计数循环(已知固定次数的循环);
while和do-while常用于未知次数的循环;
3.循环嵌套
// for(let i=1;i<=8;i++){
// document.write("★★★★★★★★"+"<br>");
// }
//外层每循环一次,内循环循环一圈
//一般外循环控制的是行,每一行的显示,内循环控制.
// for(let i=1;i<=8;i++){
// for(let a=1;a<=i;a++){
// document.write("★");
// }
// document.write("<br>");
// }
// document.write("<hr>");
// for(let i=1;i<=9;i++){
// for(let a=1;a<=i;a++){
// document.write(a + "x"+i+"="+(a*i)+" ");
// }
// document.write("<br>");
// }
// for (let i = 8; i >= 1; i--) {
// for (let a = 1; a <= i; a++) {
// document.write(" ");
// }
// for (let k = 8; k >= i; k--) {
// document.write("★");
// }
// document.write("<br>");
// }
4.break和continue;
continue;//跳过本次循环,继续下一次循环.
//遇到3或者3的倍数,跳过本次循环,继续下一次循环
for(let i=1;i<=10;i++){
if(i%3==0){
continue;//跳过本次循环,继续下一次循环.
}
document.write(i);
}
break:跳出整体循环
// 求1-100的和 如过和大于2000退出循环break
let sum = 0;
for (let i = 1; i <= 100; i++) {
sum += i; //sum = sum+i;
if (sum >= 2000) {
document.write(i+"<br>");
document.write(sum+"<br>");
break;
}
}
continue:必须和循环一起使用.
break:一般和循环一起使用,switch语句也会使用到.
javascript函数:
//调用函数格式: 函数名();
// 声明函数的方式
// 函数名(参数,参数1){函数体}
// function sum(){
// document.write("你好");
// }
// 函数表达式声明方式
// let 函数名=function(){};
// // 构造函数声明;不常用
//let func = new Function ([arg1[, arg2[, ...argN]],] functionBody)
/*
let sum = new Function('a', 'b', 'return a + b');
alert( sum(1, 2) ); // 3
*/
// let 函数名 = new Function();
// sum();
//带参数的函数 函数体内的参数 形式参数
function aa(a) {
document.write(a + "<br>");
}
//调用函数
aa("hello world!"); //实际参数 实参
//多个参数之间用逗号(,)隔开,c为默认参数,可在实参中重新声明.
function bb(a, b, c = 5) {
document.write(a + b + c + "<br>");
}
bb(1, 2);
//带返回值的函数.
//返回值,谁调用,返回给谁,要写在函数体的底部,return后的代码不会被执行.
let sum=function(a,b){
return (a+b);
};
window.alert(sum);
java中的方法
// document.write(typeof {});
/*声明对象 语法:
let 变量名={属性名:属性值,
方法名:function(){}
}
*/
let people = {
name:"张三",
age:18,
sex:"男",
eat:function(){
return "好吃";
},
drink:function(){
return "好喝";
}
}
//使用内置函数声明对象
let obj=new Object();
obj.name="李四";
obj.say = function(){
return "说话";
}
/*
访问对象的方式:对象名.属性名/对象名['属性名']
*/
document.write(people.name+"<br>");
document.write(people['name']);
document.write("<br>"+people.eat())
javascript中的箭头函数
//箭头函数相当于 匿名函数， 简化了函数的定义
//x => x * x 相当于 function(x){return x*x}
//有一个参数
let aa = x => {
if (x > 0) {
return x * x
} else {
return x
}
}
document.write(aa(3));
//有多个参数
// 两个参数返回后面的值
(x, y) =>x*y + y*y
//没有参数
() => 999
// 可变参数
(x, y, ...rest) =>{
var i,sum = x+y;
for (i=0;i<rest.length;i++){
sum += rest[i];
}
return sum;
}
对象中的this
let people={
name:"张三",
age:20,
sex:"男",
eat:function(){
// 方法中的this指的就是该方法所属的对象
return this.name+this.age;
}
}
document.write(people.eat()+"<br>")
//箭头函数可以改变this的作用域
javascript常用的api
Math
//学习api就三点:1.函数的用法 2.函数的参数 3.函数的返回值
let num = -5
document.write(Math.abs(num) + "<br>");
// 1函数的用法:返回参数的绝对值
//2.函数的参数:x,必需且是数值
//3.函数的返回值:number类型.
let num1 = 1.1;
document.write(Math.ceil(num1) + "<br>");
//1.函数的用法:向上取整
//2.函数的参数:必需,且是数值
//3.函数的返回值:整数
let num2 = 1.9;
document.write(Math.floor(num2) + "<br>");
//函数的用法:向下取整
//函数的参数:必需,且是整数
//函数的返回值:整数
document.write(Math.round(num1) + "<br>");
document.write(Math.round(num2)+"<br>");
//函数的用法:四舍五入
//函数的参数:必需,且是数字
//函数的返回值:最接近的整数.
document.write(Math.random()+"<br>")
//函数的用法:返回一个0-1之间的随机数
//函数的参数:无
//函数的返回值:0.0-1.0(不包含)之间的一个随机数
扫一扫
10万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
