JavaScript进阶篇笔记(一)

1. JavaScript基础

1.1 JavaScript能做什么?

  1. 增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)
  2. 实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等

1.2 JavaScript关键字

1.3 JavaScript数组


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>数组title>
<script type="text/javascript">
 //创建数组
 var myarr=["*","##","***","&&","****","##*"];
 myarr[7]="**";
 //显示数组长度
 //alert(myarr.length);
 //将数组内容输出,完成达到的效果。
document.write(myarr[0]+"
"
+myarr[7]+"
"
+myarr[2]+"
"
+myarr[4])
script> head> <body> body> html>

1.4 JavaScript函数


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数title>
<script type="text/javascript">
//定义函数
function fun(x,y){
    if(x>=y){
        return x;
    }else{
        return y;
    }
}

var v1=fun(5,4);
var v2=fun(6,3);
//调用函数,实现下面两组数中,返回较大值。
  document.write(" 5 和 4 的较大值是:"+v1+"
"
); document.write(" 6 和 3 的较大值是:"+v2 );
script> head> <body> body> html>

2. JavaScript事件

2.1 主要事件


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 title>
<script type="text/javascript">
    function message(){
      confirm("请输入密码后,再单击确定!"); }
script>
head>
<body>
<form>
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
<input type="button" value="onclick事件测试" onclick="message()"/>
form>
body>
html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 title>
<script type="text/javascript">
  function message(){
    alert("您触发了选中事件!"); }
script>    
head>
<body>
  <form>
  个人简介:<br>
   <textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介,不少于200字!textarea>
  form>
body>
html>
<script type="text/javascript">
//事件会在页面加载完成后,立即发生,同时执行被调用的程序。
//加载页面时,触发onload事件,事件写在标签内。
  function message(){
    alert("加载中,请稍等…"); }
script>    
head>
<body onload="message()">
  欢迎学习JavaScript。
body>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 title>
<script type="text/javascript">  
    //onbeforeunload在关闭时弹框,onunload不弹
     window.onbeforeunload = onunload_message;   
     function onunload_message(){   
        alert("您确定离开该网页吗?");   
    }   
script>   
head>
<body>
  欢迎学习JavaScript。
body>
html>

<html>
 <head>
  <title> 事件title>  
  <script type="text/javascript">
   function count(){

    //获取第一个输入框的值
    var v1=document.getElementById("txt1").value;
    //获取第二个输入框的值
    var v2=document.getElementById("txt2").value;
    //获取选择框的值
    var v3=document.getElementById("select").value;
    //获取通过下拉框来选择的值来改变加减乘除的运算法则
    var v4;
    //switch
    switch (v3) {
        case "+": v4=parseInt(v1)+parseInt(v2); break;
        case "-": v4=parseInt(v1)-parseInt(v2); break;
        case "*": v4=parseInt(v1)*parseInt(v2); break;
        case "/": v4=parseInt(v1)/parseInt(v2); break;  
    }
    //设置结果输入框的值 
    document.getElementById("fruit").value=v4;
   }
  script> 
 head> 
 <body>
   <input type='text' id='txt1' /> 
   <select id='select'>
        <option value='+'>+option>
        <option value="-">-option>
        <option value="*">*option>
        <option value="/">/option>
   select>
   <input type='text' id='txt2' /> 
   <input type='button' value=' = ' onclick="count()"/>  
   <input type='text' id='fruit' />   
 body>
html>

2. JavaScript内置对象

2.1 什么是对象?

JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法
对象的属性:反映该对象某些特定的性质的,如:字符串的长度、图像的长宽等;
对象的方法:能够在对象上执行的动作。例如,表单的“提交”(Submit),时间的“获取”(getYear)等;
JavaScript 提供多个内建对象,比如 String、Date、Array 等等,使用对象前先定义,如下使用数组对象:

数组对象的方法:

//数组对象
var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性
//concat方法,在数组myarr1后面连接数组myarr2
document.write(myarr1.concat(myarr2));
//join方法,把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。结果:86-010-84697581
var myarr1= new Array("86","010")
var myarr2= new Array("84697581");
var myarr3= myarr1.concat(myarr2);
document.write(myarr3.join("-"));
//reverse方法,颠倒数组元素的顺序。结果是:你,爱,我
var myarr1= ["我","爱","你"];
document.write(myarr1.reverse());
//slice方法,从已有的数组中返回选定的元素,含头不含尾
var myarr1= ["我","爱","你"];
document.write(myarr1.slice(1,3));//爱,你
//sort方法,对数组降序排序

                    
                    

你可能感兴趣的:(JAVA学习之路)