JavaScript：
/*
1.在js中，定义变量使用var来定义，var可以省略（因为js是弱类型语言 语法不严谨）
2.在js中，定义变量可以重复定义，后面的值会将前面的值覆盖掉
注意事项
在js中，查看一个变量的数据类型，使用函数typeof(变量名)
无论是整数还是小数都是number类型（基本类型）
无论是字符串还是字符都是string类型
undefined:未定义类型，就是定义变量，没有给变量赋值
object类型，（对象类型）new出来放在堆 方法放在栈
API--应用程序接口
*/
<!--
在head标签体中,书写script标签,
type省略不写的
-->
<!-- <script type="text/javascript"></script>
javascript使用方式第一种:内部方式,就是在head标签中指定script标签
书写,js的代码;
-->
<script>
//当行注释
/*
多行注释
*/和Java中很像
//js中常用的函数
//1)要向浏览器输出内容
document.write("helloworld!") ;
//2)可以在浏览器的控制台输出日志 ,使用控制台对象
console.log("helloworld") ;
//3)弹出一个提示框出来
//window对象属于浏览器内置对顶级对象,代表窗口,频繁调用可以不写
//window.alert("helloworld") ;
//简写为
alert("helloworld") ;
</script>
/* 在js中的内容，跟js数据类型有关系（特例）
1）整数类型number，如果是非0的整数，if成立，否则不成立
2）字符串类型string，如果是非空字符串，if成立，否则不成立
3）对象类型object,如果是对象,new Object(),if成立;如果是null,空对象!
*/
/* document.write(a>b?a:b)比较是两个相同的值则出现true或者false */
<!-- js使用方式第一种 内部方式:在head标签中指定script标签书写-->
<!-- <script type="text/javascript"></script> -->
<!-- js使用方式2 外部方式
1）单独在js文件夹中，单独创建后缀为.js的文件
2）在xxx.js文件中，书写js代码
3）在当前某个html页面中，导入这个xxx.js文件
必须有开始，结束标签
<script src="导入的外部xxx.js文件保存路径">
-->
js中的循环控制语句
<!--
分为三大类
顺序结构语句: js代码从上而下加载,比较简单的一类
选择结构语句:
if语句
三种格式
格式1
if(表达式){
语句1;
}
执行流程:
表达式是否成立,如果成立,才能执行语句1
格式2:开发中使用最多(针对两种结果判断) (java语言中的if格式2也是使用最多的)
if(表达式){
语句1;
}else{
语句2;
}
执行流程:
1)先判断表达式是否成立
成立,则执行语句1
2)否则不成立,执行语句2
格式3:针对多种结果判断的
if...else if...else
if(表达式1){
语句1;
}else if(表达式2){
语句2;
...
...
...
}else{
语句n;
}
执行流程:先判断表达式1是否成立,
如果成立,执行语句1
如果不成立,继续判断表达式2是否成立,
如果成立,执行语句2,不成立,依次执行下面的语句..
如果上面都不成立,执行else中的语句n;
//选择结构语句之if格式2:使用最多
/**
* 在js中if中的内容,跟js数据类型有关系,(特例)
* 1)整数类型number,如果是非0的整数,if成立;否则,不成立
* 2)字符串类型string,如果是非空字符串,if成立;否则,不成立
* 3)对象类型object,如果是对象,new Object(),if成立;如果是null,空对象!
*
*/
/*
if(null){
alert("成立") ;
}else{
alert("不成立") ;
} */
//if..eles...
/*
if...else的嵌套
if(表达式1){
if(表达式2){
语句1;
}else{
语句2;
}
}else{
if(表达式3){
语句3;
}else{
语句4;
}
}
*/
for循环 while do…while
/* var sum = 1;
var a =1 ; */
/* for(a=1;a<=5;a++){
sum*=a;
} */
/* while(a<=5){
a;
sum*=a;
a++;
}
*/
/* do{
sum*=a;
a++
}while(a<=5) */
//水仙花数
for(var i =100;i<=999;i++){
var ge=parseInt(i%10); 函数解析字符串并返回整数
var shi=parseInt(i/10%10);
var bai=parseInt(i/100%10);
if(i==ge*ge*ge+shi*shi*shi+bai*bai*bai){
document.write(i);
}
}
/* document.write(sum); */
switch语句
<script>
var week=8;
switch(week){
case 1:
document.write("周一");
break;
case 2:
document.write("周二");
case 3:
document.write("周三");
case 4:
document.write("周四");
case 5:
document.write("周五");
case 6:
document.write("周六");
case 7:
document.write("周日");
break;
default:
document.write("数据出错");
break;/* 可以省略 */
}
/* 执行流程：
1）首先判断变量的值和 case值1是否匹配
如果匹配，执行语句1，switch语句结束
2）如果不匹配，继续和case后面的值2进行比较，成立，则
执行语句2，break结束
3）循环--如果上面都不匹配，则执行语句n，语句结束
switch语句结束条件：
1）遇见break结束
2）程序默认执行末尾
default语句可以在语句中的任何位置，但是如果在语句中，break
最好别省略，否则case如果都不成立，可能执行default语句时会有case
穿透现象
*/
</script>
switch 语句判断季节
<script>
function getMonth(){
/* 分析：
1)获取文本输入框输入的值
此处js的核心技术：dom编程
获取标签对象，然后通过特有的方法改变标签对象的属性*/
var inputObj = document.getElementById("month");//固定格式，var后的变量名可以变
/* 通过dom操作，获取id="month"的这个标签对象，获取它的value属性的值 */
/* document。getElmentById("id属性值")固定的js的dom操作语法 */
content = inputObj.value;
//获取输入框的内容
//content是spring类型 case后面是number，不会自动将spring转
//为number，需要类型转换函数，将数字字符串转换为数字
content = parseInt(content)
switch(content){
case 3:
case 4:
case 5:
alert("spring");
break;
case 6:
case 7:
case 8:
alert("summer");
break;
case 9:
case 10:
case 11:
alert("fall");
break;
case 12:
case 1:
case 2:
alert("winter");
break;
default:
alert("非法数据");
break;
}
/* switch(content){
case 3:
case 4:
case 5:
alert("春天")
switch语句可以利用case穿透来写
} */
}
</script>
</head>
<body>
<input type="text" id="month" placeholder="请输入月份"/>
<input type="button" value="点击查询" onclick="getMonth()" />
</body>
css定位
/* 加入定位属性
position: relative; relative相对定位 针对原来位置进行移动
absolute绝对定位 针对父元素进行定位*/
/* 补齐对边
right: 400;
bottom: 50;
/* 固定定位 */
position: fixed;
事件：
<!-- 事件编程的三要素
1）事件源--指的是html标签
2）编写事件监听器--就写一个函数（js代码)function 函数名称（形式参数名1，形式参数名2）
要么空参/要么实参
3）绑定事件监听器--就是在标签中有一些onxxx属性 和函数名进行绑定
onxxx
事件：
单击点击 click
双击点击 dbclick
失去焦点 blur
获取焦点 focus
选项卡发生变化的事件…… change
-->
<script>
//function 函数名称（形式参数1,形式参数2,……){业务逻辑}
//编写函数,事件监听器
function myClik(){
alert("点击事件");
}
</script>
<!-- href=javascript:void(0):js中让超链接失效，让它的js方式
完成点击事件 onclick固定的属性-->
<a href="javascript:void(0)" onclick固定的属性="clickimg"></a>
示例 根据输入月份来判断季节
<script>
function getMonth(){
/* 分析：
1)获取文本输入框输入的值
此处js的核心技术：dom编程
获取标签对象，然后通过特有的方法改变标签对象的属性*/
var inputObj = document.getElementById("month");
/* 通过dom操作，获取id="month"的这个标签对象，获取它的value属性的值 */
/* document。getElmentById("id属性值")固定的js的dom操作语法 */
content = inputObj.value;
//获取输入框的内容
if(content==3||content==4||content==5){
/* alert("spring"); */
document.write("spring");/* 在js中= == 差距很大，js语法逻辑有一点错误，整体就会报错无法执行 */
}else if(content==6||content==7||content==8){
alert("summer");/* 在js中 字符串==整数，它会自动将字符串--整数 */
}else if(content==9||content==10||content==11){
alert("fall");
}else if(content==12||content==1||content==2){
alert("winter");
}else{
alert("非法数据");
}
/* switch(content){
case 3:
case 4:
case 5:
alert("春天")
switch语句可以利用case穿透来写
} */
}
</script>
</head>
<body>
<input type="text" id="month" placeholder="请输入月份"/>
<input type="button" value="点击查询" onclick="getMonth()" />
</body>
js inner标签
<!-- 任何标签都有innerHTML
innerText 都表示设置标签的文本内容
如何动态给span标签或者div标签等等添加文本内容呢？要使用dom操作
1）给标签设置id属性
通过一个固定的语法：获取id="属性值"的标签对var标签对象=document标签
对象=document.getElementById("id属性值");
2)标签对象 innerHTML = “<h1>hello</h1>” ;常用的）//可以加入html进行渲染
（标签对象 innerText = "设置普通文本" 不会将标签渲染
-->
js内置对象 Date
<script>
/* date对象，表示当前日期对象 如何创建js内置对象之Date
推荐第一张 dateObj = new Date()*/
var dateObj = new Date();//固定模板
document.write(dateObj+"<br />");
/* Date对象提供的功能 年份月份日期时分秒 */
var year = dateObj.getFullYear();
document.write(year);
/* getyear（）当前年份距离1900年之间的差距 */
var month = dateObj.getMonth();
/* 表示0-11的整数 结果得加1 */
document.write(month+1);
var date = dateObj.getDate();
document.write(date);
document.write(dateObj.getHours());
document.write(dateObj.getMinutes());
</script>
计时器 内置对象Date引用
<script>
function myGenDate(){
var time = new Date();
var myDate = time.getFullYear()+"-"+(time.getMonth()+1)+"-"+(time.getDay())+
" "+(time.getHours())+"-"+(time.getMinutes())+"-"+(time.getSeconds());
var span = document.getElementById("spantip");
span.innerHTML="<h3>"+myDate+"</h3>";
// 2)每经过1秒钟,重复性的执行,产生日期时间字符串(定时器)
//window对象里面setInterval(任务函数(),毫秒值) ;
//window.setsetInterval("任务函数()",毫秒值) ,每经过这个毫秒值后,重复执行任务函数(window省略)
//window.setTimeout("任务函数名称()",毫秒值);经过毫秒值后,执行一次任务!
//拼接功能 var s = "xxx"; alert（s.concat("xxx")）;
}
window.setInterval("myGenDate()",1000);//1000毫秒重复执行
</script>
js中自定义函数
<script>
/* js中定义函数 的写法 1
function 函数名称也就是方法（形式参数列表……）{
//业务代码 直接输出
}
调用函数：
单独调用
函数名称（实际参数列表）;
写法2：
function 函数名称也就是你的方法名（形式参数列表……）{
return具体结果
}
赋值调用
var 结果变量 = 函数（实际参数）;
直接输出 结果变量；
注意：
1）形式参数列表中不能带var的，直接写参数名称
2）在定义的函数里面可以直接输出内容
var 变量 = 形式参数进行运算;
直接输出结果;
或者是在js中函数里面是可以带return返回一个具体的结果值
在调用的时候，赋值调用
var结果 = 函数（实际参数）;
*/
function sum(a,b){
/* var c = a+b;
document.write(c); */
return a+b; /*结束方法 并给调用者一个结果 */
}
var result = sum(10,20);
document.write("两个数据之和为:"+result);
</script>
