一JavaScript基础 1.我们为什么要学习javaScript?大致有四点原因
JavaScript用于表单验证,减轻了服务器端压力实现页面的动态交互使网页显示动态效果并实现与用户的交互功能JavaScript的发展趋势迅猛,市场火热 2.Java发展历史 由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这兄弟在两周之内设计出了JavaScript语言。你没看错,这兄弟只用了10天时间。因为当时Java非常的火热,所以网景公司希望借Java的名气来推广,但事实上JavaScript除了语法上有点像Java,其他部分基本上没关系。 3.JavaScript介绍 JavaScript是一种基于对象和时间驱动的,并具有安全性能的脚本语言 特点:向HTML页面中添加交互行为是一个脚本语言,其语法和Java相似解释性 语言,边执行边解释 4.JavaScript基本结构 <script type="text/javascript"> <!— JavaScript 语句; —> </script > <title>初学JavaScript</title> </head> <body> <script type="text/javascript"> document.write("初学JavaScript"); document.write("<h1>Hello,JavaScript<</script> …… <title>初学JavaScript</title> </head> <body> <script type="text/javascript"> document.write("初学JavaScript"); document.write("<h1>Hello,JavaScript</h1>"); </script> </body> 这就是网页中JavaScript语句的基本写法了5.基本语法
JavaScript的语法和Java语言类似,每个语句以;结束,语句块用{…},可以嵌套JavaScript每个语句的结尾最好加;确保运行结果与期望一致。花括号{…}内语句最好缩进,可以帮助整理代码。JavaScript语法约定:
代码区分大小写关键字小写对象的名称通常是小写方法命名规则和Java相同6.数据类型和变量 先说变量,JavaScript中的变量都可以用var 修饰 例如 语句:var width;width=5; 在JavaScript中var是声明变量的关键字,这里的widrh 是变量名 同时声明和赋值变量,例如: var name=“海绵宝宝”; var x,y,z=12; 也可以不声明直接赋值,width=5,此时的变量没有声明而直接使用,这种用法很容易出错,也很难排错,不推荐使用 数据类型 JavaScript中数据类型如下: undefined:比如语句 var width,变量width没有初始化值,将被赋予值undefined null:表示一个空值,与underfined值相等 number:有整数和浮点数,统一用Number表示 Boolean:true和false string:一组被引号(单引号或双引号)括起来的文本,例如var string=“This is a string” 7.String对象 属性(字符串对象.length) 例如语句:
var str="this is JavaScript"; var strLength=str.length;这里strLength的值是18
方法(字符串对象.方法名()) charAt(index):返回在指定位置的字符 indexOf(str,index):查找某个指定的字符在字符串中出现的位置 substring(index1,index2):返回位于指定索引index1和index2之间的字符串‘ split(str):将字符串分割为字符串数组
8.数组 创建数组: var 数组名称=new Array(size) 为数组元素赋值问数组->数组名[下标] var fruit= new Array(“apple”,“orange”," peach",“banana”); var fruit = new Array(4); fruit [0] = " apple "; fruit [1] = " orange "; fruit [2] = " peach "; fruit [3] = " banana "; 数组中常用方法:
方法描述length(属性)返回数组元素的数目(长度)join()把数组 中的所有元素放入一个字符串,通过一个分隔符进行分割sort()对数组进行排序push()向数组末尾添加一个或更过元素,并返回新的长度reverse()字符串反转9.运算符号 算数运算符:+ - * / % ++ – 赋值运算符:= += -= 比较运算符:> < >= <= == != === !== 逻辑运算符:&& || !
10.逻辑控制语句
条件判断 JavaScript使用if () { … } else { … }来进行条件判断
语句块只包含一条语句,那么可以省略{},建议永远都要写上{}JavaScript把null、undefined、0、NaN和空字符串”视为false,其他值一概视为true,因此上述代码条件判断的结果是true循环
var x = 0; var i; for (i=1; i<=10000; i++) { // 分号间隔 x = x + i; } x; // 50005000while循环 while循环只有一个判断条件,条件满足,就不断循环,条件不满足时则退出循环
var x = 0; var n = 99; while (n > 0) { x = x + n; n = n - 2; } x; // 2500do…while 循环
var n = 0; do { n = n + 1; } while (n < 100);do…while循环中的循环体至少执行一次,而for和while循环中循环体可能一次都不执行。 中断循环用 break和continue 其中break是中断循环体,而continue是中断本次循环
11.注释 单行注释以 // 开始,以行末结束
alert("恭喜你!注册会员成功"); //在页面上弹出注册会员成功的提示框 prompt("提示信息","输入框的默认信息"); prompt("请输入你喜欢的颜色","红色"); prompt("请输入你喜欢的颜色","")多行注释以 /* 开始,以 / 结束,符号 /…… */ 指示中间的语句是该程序中的注释
/* 使用for循环运行“document.write("<h3>Hello World</h3>");” 5次使用document.write在页面上输出“Hello world”二、函数 1.自定义函数
function myabs(x) { //第一种定义函数的方式 // var abs = function (x) { //第二种定义函数的方式,匿名函数,赋值给了变量myabs if (typeof x !== 'number') { // 参数检查 throw 'Not a number'; } if (x >= 0) { return x; } else { return -x; } }注意:
函数执行到return时结束,并将结果返回;如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined,类似python返回 None第二种方式按照完整语法需要在函数体末尾加一个;,表示赋值语句结束JavaScript允许传入任意个参数而不影响调用JavaScript关键字arguments,只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数。arguments类似Array但它不是一个Array;利用arguments,即使函数不定义任何参数,还是可以拿到参数的值 count 2.调用无参函数 调用无参函数,输出5次了“欢迎学习JavaScript” function study( ){ for(var i=0;i<5;i++){ document.write("<h4>欢迎学习JavaScript</h4>"); } }单击按钮时,调用函数study(),执行函数体中的代码
<input name="btn" type="button" value="显示5次欢迎学习JavaScript" onclick="study()"/>3.调用有参函数 调用有参函数,显示“欢迎学习Javascript”
function study(count){ for(var i=0;i<count;i++){ document.write("<h4>欢迎学习JavaScript</h4>"); } }单击按钮时,调用函数study(count),执行函数体中的代码
<input name="btn" type="button" value="请输入显示欢迎学习JavaScript的次数" onclick="study(prompt('请输入显示欢迎学习JavaScript的次数:',''))" />4.事件
名称说明onload一个页面或一幅图片完成加载onclick鼠标单击某个对象onmouseover鼠标指导移到某元素上onkeydown某个键盘按键被按下onchange域的内容被改变