JavaScript基础

最新推荐文章于 2024-07-21 10:17:51 发布

又是一个雨天

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量191

点赞数

分类专栏： JavaScript基础文章标签： javascript

本文链接：https://blog.csdn.net/qq_18801781/article/details/71169805

版权

JavaScript基础专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript基础

弹出消息框 alert
实例：

 var a=8;//定义变量
alert("hello world"+a);//字符串+变量

消息对话框confirm
实例：

 function rec(){     //定义一个函数
    var mymessage=confirm("你喜欢javascript");
    if(mymessage==true) //如果返回值为真
    {
        document.write("是的!");
    }
    else
    {
        document.write("不是!");
    }
  }    
  <body>
    <input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />
    //在body中设置一个button，当button被点击调用rec()函数
</body>

消息对话框prompt
实例：

  function rec(){
    var score; //score变量，用来存储用户输入的成绩值。
    score = prompt();//把消息框的值赋值给变量score
    if(score>=90)    // 做if判断
    {
       document.write("你很棒!");
    }
    else if(score>=75)
    {
       document.write("不错啊!");
    }
    else if(score>=60)
    {
       document.write("要加油!");
    }
    else
    {
       document.write("要努力了!");
    }
  }
  <body>
    <input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />
    //button调用rec()函数
</body>

打开新窗口 Window.open
实例：
语法：window.open([URL], [窗口名称], [参数字符串])

function myopen{
    window.open('http://www.baidu.com','_black','width=300,height=200,menubar=no,toolabr=no,status=no,scrollbar=yes')
}
<body>
    <input type="button" name="button" onClick="myopen" value="点我打开新窗口">
</body>

各个参数

这里写图片描述

关闭窗口 Window.close
语法：window.close();或object.close();
实例：

var mywin=window.open("http://www.baidu.com");
var a=confirm("是否关闭窗口");
if(a==ture){
    mywin.close();
}

初识DOM

获取元素
语法 document.getElementById(标签值);
实例：

<p id="con">JavaScript</p>
<script type="text/javascript">
  var mychar=   document.getElementById("con")        ;
  document.write("结果:"+mychar); //输出获取的P标签。 
</script>

innerHTML属性
语法 object.innnerHTML

<h2 id="con">JavaScript</h2>
<script type="text/javascript">
    var mychar=document.getElementById("con");
    document.write("原标题："+mychar.innerHTML+"<br>");
    mycahr.innerHTML="hello world";
    document.write("现标题："+mychar.innerHTML+"<br>")
</script>

改变HTML样式
语法：object.style.property=new style; （property 属性）

<h2 id="con">I love JavaScript</H2>
<p> JavaScript使网页显示动态效果并实现与用户交互功能。</p>
  <script type="text/javascript">
    var mychar= document.getElementById("con");
    mychar.style.color="red";
    mychar.style.backgroundColor="#ccc";
    mychar.style.width="300px";
  </script>

显示和隐藏
语法：object.style.display=value

function hidetext(){  
    var mychar=document.getElementById("con");//取得p标签的id
    mychar.style.display="none"; //隐藏
}
function showtext(){
    var mychar=document.getElementById("con");
    mychar.style.display="block"; //显示
}
<body>
<p id="con">快来隐藏我！</p> 
<input type="button" name="button" value="隐藏" onclick="hidetext()">
<input type="button" name="button" value="显示" onclik="showtext()">
</body>

控制类名 className()；
语法：object.className=classname

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title></title>
<style type="text/css">   //css样式
    body{font-size: 10px;}
    .one{
        border: 1px solid #eee;
        width: 200px;
        height: 50px;
        background: #ccc;
        color: red;
    }
    .two{
        border: 1px solid #ccc;
        width: 200px;
        height:50px;
        background: #9cf;
        color: blue;
    }
</style>
</head>
<body>
<p id="p1">javascript</p>
<input type="button" name="button" onclick="add()" value="添加样式">
<p id="p2">javascript</p>
<input type="button" name="button" value="改变外观" onclick="modify()">
<script type="text/javascript">
function add(){
    var p1=document.getElementById("p1");//获取p1的id
    p1.className="one";          //把p1的样式改为one
}
function modify(){
    var p2=document.getElementById("p2");//获取p2的id
    p2.className="two";          //把p2的样式改为two
}
</script>

</body>
</html>

逻辑与操作符 &&
用法：

if(条件1 && 条件2)//条件1和条件2同时满足的情况下运行代码。
{
    运行代码
}

逻辑或操作符 ||
用法：

有真则真，全假才假。

逻辑非操作符！
用法：

var a=3;
var b=5;
var c;
c=!(b>a);  // b>a值是true,! (b>a）值是false
c=!(b<a);  // b<a值是false, ! (b<a）值是true

一维数组
创建方法：

var myarr=new Array();//创建数组

数组赋值

第一种方法

var myarray = new Array(66,80,90,77,59);//创建数组同时赋值

第二种方法

 var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）

数组添加成员 myarray[6]=88; (注意数组下标为0)

数组长度：

var myarray=[10,55,66,88];
document.write("数组长度"+myarray.length);

二维数组
创建数组：

方法1：

var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }

方法2：

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]];

又是一个雨天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础

JavaScript基础弹出消息框 alert实例： var a=8;//定义变量alert("hello world"+a);//字符串+变量消息对话框confirm实例： function rec(){ //定义一个函数 var mymessage=confirm("你喜欢javascript"); if(mymessage==true) //如果返回值为真
复制链接

扫一扫