1. HTML的扩展属性
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 180px;
line-height: 50px;
background-color: red;
text-align: center;
border-radius: 20px; /* 设置圆角弧度*/
box-shadow: 30px 20px 20px gray; /*盒子阴影*/
}
body{
/* 创建单个背景图 */
/* background-image: url(../img/002.png);
background-repeat: no-repeat;
background-size: 100px 150px;*/
/*创建多张背景图 */
background-image: url(../img/002.png),url(../img/005.png);
background-repeat: no-repeat;
background-size: 100px 150px;
background-position: 0px 0px,100px 0px;
}
</style>
</head>
<body>
<div>创建圆角属性</div>
</body>
2.JS的基础语法
2.1 变量（重点）
<head>
<meta charset="UTF-8">
<title></title>
<!--<script src="../js/my.js"></script>-->
<script type="text/javascript">
/* js概述：是一种脚本语言，依附于浏览器中，进行一些触控效果
网页三剑客： html是基本架构 css是美化效果 js是触控效果
* */
/*alert("hello,js2");*/
/* 在页面中打印输出 */
document.write("hello,jsp3<br />");
document.write("hello,jsp4<br />");
var a;
document.write(a+"<br />"); //undefined关键字
/* 通过typeof求出值的类型 */
document.write((typeof a)+"<br />"); //undefined类型
//js是弱类型语言，在定义时，都是var类型 ；
//java是强类型语言，根据值的不同使用不同数据类型约束
var b = 1;
document.write(b+"<br />"); //1 和java类似，js也可以进行字符串拼接
document.write((typeof b)+"<br />"); //number
b = 3.14;
document.write((typeof b)+"<br />"); //number
b = "abc";
document.write(b+"<br />"); //abc
document.write((typeof b)+"<br />"); //string
b = true;
document.write(b+"<br />"); //true
document.write((typeof b)+"<br />"); //boolean
b = null;
document.write(b+"<br />"); //null
document.write((typeof b)+"<br />"); //object
document.write(a+1); //undefined+1==NaN not a number
document.write(a+"1"); //undefined1.字符串拼接
document.write("<br />");
document.write(typeof (a+1)); //number
document.write("<br />");
/* 引用对象的操作 （在js中没有类的概念，往往直接创建对象即可） */
var st = {id:1001,name:"zs",age:30}; //通过json格式创建对象
document.write(st.id+"<br />"); /* 获取对象的属性值 */
document.write(st.name+"<br />");
</script>
</head>
<body>
</body>
2.2 数组
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 数组静态赋值 */
var a = [1,2,3,4]; /* 定义数组 */
/* 通过下标操作元素,下标从0开始 */
document.write(a[0]+"<br />");
for(var i=0;i<a.length;i++){ //循环遍历
document.write(a[i]);
}
document.write("<br />");
a[1]=5; //修改元素
document.write(a); //直接打印对象
document.write("<br />");
a[5]=7; //添加元素 a[4]未赋值，为undefined
for(var i=0;i<a.length;i++){ //循环遍历
document.write(a[i]);
}
document.write("<br />");
delete a[5]; //删除元素
for(var i=0;i<a.length;i++){ //循环遍历
document.write(a[i]);
}
document.write("<br />");
a.length=0; //删除所有
for(var i=0;i<a.length;i++){ //循环遍历
document.write(a[i]);
}
/* 数组的动态赋值 */
var b = new Array();
b.push(1);
b.push(3,5,6);
document.write("<br />");
document.write(b);
/* 数组也可以存引用类型 */
var sts = [{name:"zs",age:30},{name:"ls",age:20}];
document.write("<br />");
document.write(sts[0].name+":"+sts[0].age+"<br />");
</script>
</head>
<body>
</body>
2.3 运算符
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 逻辑运算符 */
var a = false;
var b = true;
document.write(!a+"<br />"); //true
document.write((a&&b)+"<br />"); //false
document.write((a||b)+"<br />"); //true
/* 关系运算符 */
a = 3;
b = 4;
document.write((a>b)+"<br />"); //false
document.write((a>=b)+"<br />");//false
document.write((a<b)+"<br />"); //true
document.write((a<=b)+"<br />");//true
document.write((a==b)+"<br />");//false
document.write((a!=b)+"<br />"); //true
/* 关于==和===的区别:
==：只比较值，不比较类型
===：比较值和类型
* */
a = "1";
b = 1;
document.write((a==b)+"<br />"); //true
document.write((a===b)+"<br />"); //false
document.write((b===1)+"<br />"); //true
/* ++ --运算符 */
a = 3;
document.write(a++); //3
document.write(++a); //5
document.write(a--); //5
document.write(--a); //3
document.write("<br />");
/* 算数运算符与java一致，主要探讨数字字符串的运算
在进行数字字符串算数运算时，只有+是进行拼接的--拼接后为string类型
其他的，都会转为number，在进行运算
* */
a = "5";
document.write((a+2)+"<br />"); //52
document.write((typeof (a+2))+"<br />"); //string
document.write((a-2)+"<br />"); //3
document.write((typeof (a-2))+"<br />"); //number
document.write((a*2)+"<br />"); //10
document.write((a/2)+"<br />"); //2.5 可以得到小数
document.write((a%2)+"<br />"); //1
/* 三目运算符 */
a=3;
document.write((a>2)?true:false);
document.write("<br />");
/* 分支语句 */
if(a>1){
document.write(true+"<br />");
}else{
document.write(false+"<br />");
}
/* 注意：在js的if判断中除了6个值为false，其他都为true
false，null,undefined,0,NaN,""
* */
if("66"){
document.write("我是成立<br />");
}else{
document.write("我是不成立<br />");
}
/* 案例：打印1~10 */
for(var i=1;i<=10;i++){
if(i%3==0){
//continue; //跳过3的倍数
break; //3的倍数则退出
}
document.write(i)
}
</script>
</head>
<body>
</body>
3. 函数（重点）
3.1 函数基本使用
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/* 函数：用于代码的封装
* 好处：使结构清晰，方便复用
* 函数组成：函数调用和函数实现两个部分
* 函数分类：
* 1.无参数无返回值
* 2.有参数无返回值
* 3.有参数有返回值
* 与java中函数的不同之处：
* js中参数没有类型
* 返回值不用写返回类型
*/
//1.无参数无返回值方法
test(); //函数调用
//函数实现
function test(){
console.log("无参无返回值调用");
}
//2.有参数无返回值方法
show(666);
function show(a){
console.log(a);
}
//3.有参数有返回值方法
console.log(max(6,8)); //注意：如果没有return，则打印undefined
function max(a,b){
var m = (a>b)?a:b;
return m; //通过return返回值
}
/* 扩展：函数重载： 求两个数的和，求三个数的和，求四个数的和
结论：在js中函数没有重载，js执行时，只执行最后一个函数实现
如果要实现函数重载效果，需要使用arguments属性(数组，类似java可变参数用法)
* */
console.log(add(1,2)); //3
console.log(add(1,2,3)); //6
console.log(add(1,2,3,4)); //10
/*
function add(a,b){
return a+b;
}
function add(a,b,c){
return a+b+c;
}
function add(a,b,c,d){
return a+b+c+d;
}*/
function add(){
var sum = 0;
for(var i=0;i<arguments.length;i++){
sum += arguments[i];
}
return sum;
}
/* 另一种函数写法：类似匿名内部类 ; 注意：必须把函数实现放前面*/
var myTest = function(){
console.log("另一种函数实现");
}
myTest();
</script>
</head>
3.2 弹窗函数
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 弹窗函数：系统已写好具体实现，只需调用即可 */
/* 1.警告框： alert */
//alert("hello,js");
/* 2.确认框: confirm 根据确定与取消，做一些判断处理 */
/*if(confirm("你需要打开这个惊喜吗")){
console.log("恭喜你，点开了这个惊喜");
}else{
console.log("很遗憾，你取消了这个惊喜");
}*/
/* 3.提示框：prompt 参数1：提示信息 参数2： 默认值
点确定，则接收输入的内容；点取消，则接收null
* */
console.log(prompt("温馨提示，欢迎xxx来校参观","刘德华"));
</script>
</head>
3.3 系统预定义函数
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 系统预定义函数： 只需进行调用即可 */
//parseInt 数字字符串转整数
var a = "123";
a = parseInt(a);
console.log(a); //123
console.log(typeof a); //number
a = "3.14";
console.log(parseFloat(a)) //3.14
console.log(parseInt(a)); //3
//9进制的12，转10进制输出
console.log(parseInt("12",9)); //9进制的12转十进制输出
console.log(parseInt("12",8)); //8进制的12转十进制输出
console.log(parseInt("12",7)); //7进制的12转十进制输出
//isNaN: 是否为非数字 返回true或false
console.log(isNaN(NaN)); //true
console.log(isNaN(111)); //false
console.log(isNaN("111")); //false
console.log(isNaN("abc")); //true
</script>
</head>
4. 事件（重点）
4.1 事件的使用
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 事件：是html与js交互的桥梁; 触发事件的用法，就是函数的调用形式 */
//1.onchange事件
function change(){
alert("省份变更的触发");
}
/* onload:页面加载完毕后，系统会自动触发的方法
应用场景：可以拿到html当中的值，DOM的操作就是典型案例
* */
onload = function(){
alert("页面加载完毕后的触发");
}
</script>
</head>
<body>
<select onchange="change()">
<option>湖南</option>
<option>湖北</option>
<option>广东</option>
<option>广西</option>
</select>
<!-- 注意：在js中‘’也代表字符串；js中的字符串可以单引号包含双引号嵌套
也可以双引号包单引号嵌套； 但不能单包单，双包双
-->
<h1 onclick="alert('点击触发')" onmousemove="console.log('鼠标移入')">标题1</h1>
<h1 onmouseout="console.log('鼠标移出触发')" onmousemove="console.log('鼠标移动触发')">标题2</h1>
<input type="text" onkeyup="console.log('键盘弹起')" onkeydown="console.log('键盘按下')" />
</body>
4.2 提交事件
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* onsubmit:提交事件，用于表单提交的触发
应用场景：在前端js即可处理并判断；是否需要进入后台处理
* */
</script>
</head>
<body>
<form onsubmit="alert('xx')">
用户名：<input type="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
4.3 字符串常用函数
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//字符串的使用，基本上与java类似的
var a = "hello";
//常用方法
console.log(a.toUpperCase()); //转大写
console.log(a.concat("111")); //字符串拼接
console.log(" he 66 ".trim()); //去除左右空格
console.log(a.substring(2,4)); //提取子串
</script>
</head>
Java程序猿必学第三十二篇——JS(JavaScript)基础
猜你喜欢
转载自blog.csdn.net/m0_62718093/article/details/121520674
今日推荐
周排行