JavaScript

1.JavaScript的概述

1.JavaScript历史

• JavaScript是由美国网景公司(做浏览器)开发的一种脚本语言,原名叫LiveScript(运行在网页中的语言)

• 网景公司和sun公司进行合作,将LiveScript改名为JavaScript

2.JavaScript和Java的区别

• Java是高级语言,需要编译,运行在Java的虚拟机中,属于后端语言

• JavaScript(js)不需要编译,由浏览器解释运行,写在网页中-

• JavaScript是一种直译的脚本语言,是嵌入在网页中,为网页添加各种动态效果(效果动态,数据动态)

3.JavaScript的作用

• 响应鼠标和键盘事件

• 客户端表单验证 表单就是有各种输入选择组件,可以让用户输入信息,最终将数据库提交到后端

• 动态操作网页内容

脚本语言:不需要编译(sql,html,css,js,python),由某种特定的引擎(数据库,浏览器)解释执行

• html是网页的骨架(内容)

• css是网页的外观(皮肤)

• JavaScript是网页的行为(动作)

 

2.JavaScript基本语法

1.变量

Java是一种强数据类型语言,对数据类型要求不高

JavaScript是一种弱类型语言

声明变量:使用var关键字声明 使用变量可以表示任何类型数据

var 关键字=内容;
var a=10;
var b="abc";
var c=true;

2.数据类型:

虽然JavaScript声明时,不需要数据类型,但是它的值,仍然是有类型 因为数据也会参与运算

1.数值型

number 整数和浮点都是数值型

2.布尔型

逻辑值,boolean true false

3.字符串

"" '' 双引号和单引号都表示字符串

4.undefined类型

变量没有赋值,值不明确

5.Object对象类型

JavaScript是一种面向对象的语言,但是对我们而言,把它理解成为一个半面向对象,半面向过程的语言

3.算数运算

注意:+在数据类型和字符串时是连接作用

其余与Java相同

4.比较运算

==:比较的是内容的相等

===:比较的是类型和内容的相等

其他和Java相同

5.赋值运算符 逻辑运算符 条件运算符

和Java一样

6.控制语句

• 单一的选择结构(if)

• 二路选择结构(if/else)

• 多路选择结构(swich)

• 由计算器控制的循环(for)

• 在循环的开头测试表达式(while)

• 在循环的末尾测试表达式(do/while)

• beeak continue

7.表单

在客户端为后端服务器收集数据，里面有许多可以输入，选择的组件。

凡是从前端向后端发送的数据，都需要进行验证。

不要将垃圾数据随便传递后端处理，就可以减少后端服务器的压力。

需要通过借助js,实现对内容逻辑的验证，在提交表单时触发js

    
        
        
        
    
    
        
         

             账号:

             密码:

             
         
    

3.函数

1.定义函数

函数的基本语法:

function:表示函数定义的关键字

functionName:表示函数名

arguments:表示传递给函,数的参数列表,各个参数之间用逗号隔开,可以为空

statements:表示实现函数功能的函数体

return expression:表示函数将返回expression的值,同样是可选的语句

 function functionName([arguments]){
 javascript statements
 [return expression]js
 }

2.全局函数

• parseInt(arg)把括号内的内容转换成整数之后的值,如果括号内的是字符串,则字符串开头的数字部分被转换成整数,如果字母开头,则返回"NaN"

• parseFloat(arg)把括号内的字符串转换成浮点数之后的值,字符串开头的数字部分被转换成浮点数,如果以字母开头,则返回"NaN"

• typeof(arg)返回arg值得数据类型

• eval(arg)可运算某个字符串

  • t.value=eval(t.value);//运算某个字符串

3.内置对象-String字符串

属性 length 用法：返回该字符串的长度. 方法 charAt(n)：返回该字符串位于第n位的单个字符. indexOf(char)：返回指定char首次出现的位置.lastIndexOf(char)** ：跟 indexOf() 相似，不过是从后边开始找. substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段.

substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段.

split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中。 例如：'1&2&345&678'.split('&')返回数组：1,2,345,678

  var s = "abc";
            var s1 = new String("abc:defg");
            /* alert(s1.length);
            alert(s1.charAt(2));
            alert(s1.substring(1,4));//开始位置,结束位置(不包含)
            alert(s1.substr(1,4));//开始位置,截取的长度
            alert(s1.split(":"));字符串分割为数组*/

4.内置对象-Array数组

数组的定义方法:

var<数组名>=new Arrary();

定义了一个空数组后.,如果想要添加元素的话,可以<数组名><下标>=值;

如果想在定义的时候初始化值有以下两种情况:

• var<数组名>=new Arrary(<元素1>,<元素2>,...);

  • var arr=new Arrary('1','2','3');

• var < 数组名>=[<元素1>,<元素2>,...];

  • var arr=['1','2','3'];

属性: length:数组的长度

方法: 1.jion(<分隔符>):返回一个字符串,该字符串把数组中的各种元素串起来,用分割符分割;

2.reverse():使数组中的元素反过来

3.sort():使数组中的元素按照一定的顺序排序,默认为字母顺序排序.​

5.内置对象-Date

获取日期:

new Date()	返回当日的日期和时间
getFullYear()	返回四位数字年份
getDate()	返回一个月中的某一天(1~31)
getMonth()	返回月份(0~11)
getDay()	返回一周中的某一天(0~6)
getHours()	返回对象的小时(0~23)
getMinutes()	返回Date对象的分钟(0~59)
getSeconds()	返回Date对象的秒数(0~59)

var  date = new Date();
            alert(date.getFullYear());
            alert(date.getMonth());
            alert(date.getDate())//日期
            alert(date.getDay())//星期
            alert(date.getHours())

6.内置对象-Math

Math.abs(x)	计算绝对值
Math.pow(x)	计算xd的y此幂
Math.sqrt(x)	计算平方根
Math.ceil(x)	对一个数进行上舍入
Math.floor(x)	对一个数进行下舍入
Math.round(x)	把一个数四舍五入为最接近的整数
Math.random()	返回0~1之间的随机树
Math.max(x,y)	返回x和y中的最大值
Math.min(x,y)	返回x和y中的最小值

alert(Math.PI);
alert(Math.abs(-9));

4.内置对象事件

一些常用的事件:

onclick() 鼠标点击时;

onblur() 标签失去焦点

onfocus 标签获得焦点

onmouseover() 鼠标被移到某标签之上

onmouseout() 鼠标从某标签上移开

onload() 是网页加载完毕后触发相应的事件处理程序

onchange() 是指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序

​

    
        
        
        
    
    
        
         
         

             点击
         
         
         

         
         
        
         
         
         
    

5.html DOM对象

1.什么是html DOM对象?

Dom是网页中文档对象模型的缩写

通过对象,可以用JavaScript操作html文档中的所有标签

2.查找元素

• 通常,通过JavaScript,首先需要找到该标签

• 要操作,先得到

• 4种方法:

  • 通过id找到标签

  • 通过标签名来找到标签

  • 通过类名来找到标签

  • 通过name来找到标签

3.改变Html

• 可以改变标签的属性

• 可以改变Html内容:innerHTML

4.改变css

可以通过对象.style.(修改的css)来实现我们的需求

    
        
        
        
    
    
        
        
        
        
         
wwwww
         
ssss
    

6.计时

通过使用JavaScript,我们有能力做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,我们称之为计时事件.

• setTimeout("函数","时间")未来的某时执行代码,setTimeout() 运行一次执行一次

• clearTimeout() 取消setTimeout()

• setInterval("函数","时间")每隔指定时间重复调用

• clearInterval() 取消setInterval()

    
        
        
        
    
    
        
        
    

​

7.一般业务的代码

1.多选框全选或者取消全选状态

    
        
        
        
    
    
        
        java
        c
        css
        html
         
        
        
        
    

2.简单计算器的代码运行

    
        
        3
        
        
    
    
        

            
            

            
            
            
            
            
            
   
            
            
            
             
            

            
            
            
            
            
            

            
            
            
            
            
        
    

3.多选框至少选择一个进行判断

    
        
        
    
    

爱好:
        敲代码
        打游戏
        跳绳
        打篮球
        
        
        
            
            

4.计时器

5.网页自动转换

    
        
        
        
                
                
    
    
        

                    

                        

                        

                            

                            

                        
                    
                
    

​