一.js入门
1.1 介绍
JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程，多范式的动态脚本语言，并且支持面向对象，命令式和声明式（如函数式编程）风格。
1.2 主要功能
- 嵌入动态文本于HTML页面。
- 对浏览器事件做出响应。
- 读写HTML元素
- 在数据被提交到服务器之前对数据进行校验
- 检测访客的浏览器信息。控制cookies，包括创建和修改等。
- 基于Node.js技术进行服务器端编程。
二. JS的使用方式
1.1 两种方式
1.1.1方式1：内部方式
在页面中使指定script标签书写js代码
//：单行注释
/多行注释/
1.1.2方式2：外部方式
在js文件夹下新建一个.JS文件，书写JS代码。
在当前html页面导入指定JS文件
script标签（有开始，有结束）src 属性：js/xx.jsp文件
好处：html代码和js分离了（前端开发工程师：需要使用外部方式）
1.2 js常用函数
1.2.1 向浏览器输出内容
document.write(“hello,js!”);
1.2.2 在浏览器中控制台打印内容
console.log(“hello,javascript!”)；
1.2.3 弹对话提示框
window.alert(“hello,javacript!”)；
1.3 js中变量以及数据类型
1.3.1 js中变量如何定义的：
（1）用var来定义变量，var可以定义任何类型（js中创建对象也是var）
var可以省略不写（不建议）
（2）定义变量，是可以重复定义变量，后面的是会将前边的值覆盖掉（弱类型语言）
java语言：
int a=10；
int b=20；重复定义
（3）查询数据类型：使用函数typeof（变量名）
基本数据类型：
无论是整数还是小数，在js中都属于number类型，内置对象（引用 类型）：Number
无论是字符串还是字符，js中都属于string类型，内置对象：String
true/false，js中属于Boolean，内置对象：Boolean
object：内置对象：模板对象：Object
undefined：无意义，因为当前这个变量没有被赋值（未定义变量)
(4)js中的数据类型划分是通过值来确定的！
1.4 Js运算符
1.4.1 运算符
算术运算符
+,-,/,%
赋值运算符
=
比较运算符
<,>,<=,>=,==,!=
逻辑运算符
js中
&&: 有false,则false
||: 有true,则true
逻辑非: 非true,则false;非false则true
三元运算符
(表达式)? 执行true的结果:执行false的结果;
<script>
var a = 3 ; //将3赋值给Number类型变量a
var b = 4;
document.write("sum:"+(a+b)+"<br/>") ;
document.write("sub:"+(a-b)+"<br/>") ;
document.write("mul:"+(a*b)+"<br/>") ;
document.write("div:"+(a/b)+"<br/>") ;
document.write("%:"+(a%b)+"<br/>") ;
document.write("<hr/>") ;
var c = 1 ;
console.log(true+c) ;
console.log(1+false) ;
//true和false在js中代表两个常量:1,0 (弱类型语言体现)
document.write("<hr/>") ;
//比较运算符
console.log(a>=b) ;
console.log(a==b) ;
console.log(a<=b) ;
console.log(a!=b) ;
document.write("<hr/>") ;
//逻辑运算符
console.log((++a)==3 && (--b)==4) ;
document.write("<hr/>") ;
//三元运算符
var age = 18 ;
document.write((age>=18)?"成年人":"未成年人") ;
</script>
1.5 流程语句
1.5.1 选择语序结构
选择语序中的switch语句中case语句后面在js中既可以是常量也可以是变量
<script>
var week = 3 ;
var b = 3 ; //变量
switch(week){
case 1 :
document.write("星期一") ;
break ;
case 2:
document.write("星期二") ;
break ;
case b: //变量
document.write("星期三") ;
break ;
case 4:
document.write("星期四") ;
break ;
case 5:
document.write("星期五") ;
break ;
case 6:
document.write("星期六") ;
break ;
case 7:
document.write("星期日") ;
break ;
default:
document.write("非法数据") ;
break;
}
document.write("<hr/>") ;
js中—for-in 语句，很类似于java中的foreach语句：增强for
for（var 变量名 in 对象名称）{
使用这个变量名 对象名称[变量名]访问属性
}
js中：for-in是用来给自定义对象使用，遍历自定义对象中的属性
var arr = [10,20,30,40] ;
//普通for循环
for(var i = 0 ; i < arr.length ; i++){
document.write(arr[i]+"<br/>") ;
}
document.write("<hr/>") ;
for(var i in arr){
document.write(arr[i]+" ") ;
}
//定义对象
function Person(name,age,address,email){ //类似于 java中有参构造
//追加属性
this.name = name ;
this.age = age ;
this.adress=address;
this.email = email;
}
document.write("<hr/>") ;
//创建对象
var p = new Person("高圆圆",41,"西安市","gaoyuayuan@163.com") ;
//for-in
for(var i in p){
document.write(p[i]+"<br/>") ;
}
1.6 js中的函数
1.6.1 js中定义函数
js中的函数类似于java中定义方法（功能）
js中定义函数：
function 函数名称（形参列表）{
可以写return语句，也可以不写}
1.6.2 js中函数调用
函数调用
单独调用(函数里面没有return语句)
函数名称(实际参数) ;
赋值调用(有return语句)
var 变量名 = 函数名称(实际参数);
1.6.3 js中定义函数的注意事项
（1）形式参数列表中不能携带数据类型：var可以定义任何类型（弱类型语言）
在java中，形式参数必须携带
public static int add（int a，int b）
（2）函数中可以不用书写return语句
（3）js中不存在函数的重载，如果后边的方法名和前边相同，后边的会将前边覆盖掉
如果函数是形式参数个数大于实际参数个数，调用函数时，函数依然可以执 行由于某个形参没有被赋值，调用结果：NaN（没有意义）。
如果形式参数个数小于实际参数个数，调用函数依然执行，将多余实参去 掉，进行计算！
（4）在函数中有一个默认数组：arguments
作用就是将实际参数赋值形式参数：
java中的main方法
public static void main（String[] args）{}
定义求两个数据之和的函数
function add(var a,var b){
function add( a, b){
var result = a + b;
document.write("两个数据之和是:"+result) ;
// return result ;
}
function add(a,b,c){//a =10 ,b =20 ,c = 30
//alert(arguments.length) ;
for(var i = 0 ; i < arguments.length; i ++){
alert(arguments[i]) ;
}
var result = a+ b+ c;
document.write("数据之和是:"+result) ;
}
//调用
//单独调用
add(10,20) ;
1.7 js中的自定义对象
1.7.1 分类
内置对象：
js本身存在：Array，Date，String，Number，Boolean，正则表达式
自定义对象：
（1）类上Java中的有参构造方法
定义一个对象
function 对象（属性列表）{
追加属性…
追加方法…
}
创建对象 var 对象名= new 对象(实际参数列表) ;
1.7.2 定义对象
function Person(name,age){
//追加属性
this.name = name ;
this.age = age ;
//追加方法
this.play=function(){
alert("玩足球") ;
}
}
//创建对象
var p = new Person("赵又廷",41) ; //给属性赋值
//for-in遍历属性
/* for(var i in p ){
document.write(p[i]) ;
} */
//访问属性
document.write("name是"+p.name+"<br/>") ;
document.write("age是"+p.age+"<br/>") ;
//访问方法
p.play() ;
document.write("<hr/>") ;
1.7.3 方式二
//定义工人对象:Worker :类上java中无参构造
function Worker(){
}
//无参构造方式创建对象
var w = new Worker() ;
//对象名w追加属性或者追加方法
w.name = "杨德财" ;
w.age = 27 ;
w.play=function(){
document.write("喜欢玩代码...") ;
}
//访问属性
document.write("name是"+w.name+"<br/>") ;
document.write("age是"+w.age+"<br/>") ;
//访问方法
w.play() ;
document.write("<hr/>") ;
1.7.4 方式三
直接创建对象 Object ：代表任意js对象（模板对象）
var s = new Object();
//追加属性
s.name = "高圆圆" ;
s.age = 41 ;
//追加功能
s.speak=function(){
document.write("说英语") ;
}
//访问属性功能
//访问属性
document.write("name是"+s.name+"<br/>") ;
document.write("age是"+s.age+"<br/>") ;
//访问方法
s.speak() ;
document.write("<hr/>") ;
1.7.5 方式四
字面值的方式 json字符串（后期是一个重点）
json解析跟xml解析
xml解析:dom解析(面向对象方式)/sax解析(基于事件方式)
解析速度慢
json:解析速度快 ,格式是一种js语法 (简单直观)
fastJson 工具
Gosn
jsonlib
jackson---springmvc提供的一种内置的插件
格式
简单格式
{
"key1":"value1",
"key2":"value2",
...
};
//复杂格式
[
"students",
{
"sname":"张三",
"age":20,
"address":"西安市",
},
{"sname":"李四","age":25,"address":"咸阳市"},
{"sname":"王五","age":30,"address":"北京市"}
];
*/
var student = {
//追加属性
"name":"耿明刚",
"age":23,
"address":"南窑国际",
"email":"gengminggang@163.com",
//追加功能
"code":function(){
alert("日日夜夜coding...") ;
}
} ;
//调用属性
document.write("姓名是:"+student.name+"<br/>") ;
document.write("年龄是:"+student.age+"<br/>") ;
document.write("住址是:"+student.address+"<br/>") ;
document.write("邮箱是:"+student.email) ;
student.code() ;
1.8 js的内置对象之String
1.8.1 String对象的方法
charAt(var char):返回指定索引处的字符
indexOf(var char);查询当前字符第一次在字符串中出现的角标值
fontcolor(指定颜色标记):给字符串设置字体颜色
spilt(字符串):通过指定的字符串将当前大串拆分成字符串数组
substring(start, end):截取功能
//如何创建字符串对象
//方式1:var对象名 = new String("xx") ;
// var s1 = new String("hello") ;
// var s2 = new String("hello") ;
var s1 = "hello" ;
var s2 = "hello" ;
document.write((s1==s2)+"<br/>") ;
//== 比较的是地址值是否相同 new 对象:都分别需要在堆内存中开辟空间
//如果常量赋值:直接在常量池中,有这个值,直接返回地址值;没有这个值,开 辟常量池内存空间
//valueOf():比较的内容是否相同
document.write((s1.valueOf()==s2.valueOf())+"<br/>")
document.write("hr/>") ;
//定义一个字符串
var str = "helloworldjavaEE" ;
document.write("charAt():"+str.charAt(4)+"<br/>") ;
document.write("indexOf():"+str.indexOf('a')+"<br/>") ;
//substr(beginindex,length):从指定位置开始截取指定长度
document.write("substr():"+str.substr(5,5)+"<br/>") ;
//包前不包后(endindex的位置取不到的,endindex-1)
document.write("substring():"+str.substring(5,9)+"<br/>") ;
//给字符串添加颜色属性
document.write("fontcolor():"+str.fontcolor("red")+" <br/>") ;
var classes = "JavaEE-Php-Python-test-Web-C" ;
//分割功能
var stryArray = classes.split("-") ;
//遍历
for(var i = 0 ; i < stryArray.length ; i ++){
alert(stryArray[i]) ;
}
1.9 Date内置对象
1.9.1 js的内置对象Date
创建对象
var 对象名=new Date（）；
<script>
//创建日期对象
var date = new Date() ;
//alert(date) ;
//常用的方法:获取年份
//getYear():并不是完整的年份.而是当前年份距离1900 年差值
//getFullYear():获取
var year = date.getFullYear();
document.write(year+"年") ;
//获取月份:getMonth():0-11之间的整数
var month = date.getMonth()+1 ;
document.write(month+"月") ;
//获取月中的每一天:getDate()
var month_day = date.getDate() ;
document.write(month_day+"日 ") ;
//getHourer():一天中的小时
document.write(date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()) ;
// var hour = date.getHours() ;
//alert(hour) ;
</script>
1.9.2 网页定时器：
窗口对象，顶级对象可以不写
window.setInterval(“任务（），毫秒数”)：重复执行。每经过毫秒数后执 行定时任务
window.setTimeOut(“任务（）”，“毫秒数”)：经过毫秒数后执行一次任务
<body>
<h3>网页时钟</h3>
当前系统时间是:<span id="spanTip"></span>
</body>
<script>
function myTask(){
//需要创建Date对象,拼接日期和时间
var date = new Date() ;
var dataStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"
+date.getDate()
+"  "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
//获取id="spanTip"的标签对象
var spanObj = document.getElementById("spanTip") ;
//设置innerHTML属性
spanObj.innerHTML = "<strong>"+dataStr+"</strong>" ; //给span设置文本内容
}
//开启定时器
setInterval("myTask()",1000) ;//每经过1秒执行这个任务
</script>
扫一扫
829
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
