js基础教程学习笔记

标签：

document.write();

document.getElementById();

<script type="text/javascript"></script>

表示在<script></script>之间的文本类型text，javascript是为了告诉浏览器里面的文本是javascript语言

我们可以把js代码与html代码分开，并在html中引用：

<script src="script.js"></script>

找到你的位置（JS在页面中的位置）

<script type="text/javascript">
   alert("hello!");
</script>

<script type="text/javascript">
   document.write("I");
   document.write("love");
   document.write("JavaScript");
</script>

<script type="text/javascript">
  document.write("单行注释使用‘//‘");  // 我是注释，该语句功能在网页中输出内容
</script>

<script type="text/javascript">
   document.write("多行注释使用/*注释内容*/");
   /*
    多行注释
    养成书写注释的良好习惯
   */
</script>

var 变量名

var mychar;
mychar="javascript";
var mynum = 6;

var mychar;
mychar="javascript";
mychar="hello";

if(条件)
{ 条件成立时执行的代码 }
else
{ 条件不成立时执行的代码 }

<script type="text/javascript">
   var myage = 18;
   if(myage>=18)  //myage>=18是判断条件
   { document.write("你是成年人。");}
   else  //否则年龄小于18
   { document.write("未满18岁，你不是成年人。");}
</script>

function 函数名()
{
     函数代码;
}

function add2(){
   var sum = 3 + 2;
   alert(sum);
}

<script type="text/javascript">
  document.write("I love JavaScript！"); //内容用""括起来，""里的内容直接输出。
</script>

<script type="text/javascript">
  var mystr="hello world!";
  document.write(mystr);  //直接写变量名，输出变量存储的内容。
</script>

<script type="text/javascript">
  var mystr="hello";
  document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
</script>

<script type="text/javascript">
  var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
  document.write("JavaScript");
</script>

alert(字符串或变量);  

<script type="text/javascript">
   var mynum = 30;
   alert("hello!");
   alert(mynum);
</script>

confirm(str);

str：在消息对话框中要显示的文本
返回值: Boolean值

当用户点击"确定"按钮时，返回true
当用户点击"取消"按钮时，返回false

<script type="text/javascript">
    var mymessage=confirm("你喜欢JavaScript吗?");
    if(mymessage==true)
    {   document.write("很好,加油!");   }
    else
    {  document.write("JS功能强大，要学习噢!");   }
</script>

prompt(str1, str2);

str1: 要显示在消息对话框中的文本，不可修改
str2：文本框中的内容，可以修改

1. 点击确定按钮，文本框中的内容将作为函数返回值
2. 点击取消按钮，将返回null

var myname=prompt("请输入你的姓名:");
if(myname!=null)
  {   alert("你好"+myname); }
else
  {  alert("你好 my friend.");  }

window.open([URL], [窗口名称], [参数字符串])

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_selft"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
    4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

<script type="text/javascript"> window.open(‘http://www.imooc.com‘,‘_blank‘,‘width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes‘)
</script>

window.close();   //关闭本窗口

<窗口对象>.close();   //关闭指定的窗口

<script type="text/javascript">
   var mywin=window.open(‘http://www.imooc.com‘); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

<script>

function openwage(){var open=confirm("确定打开网页？") if(open==true){var openweb=prompt("确定是这个网址？","http://www.baidu.com");if(openweb!=null) {window.open(webadress,"_blank",‘width=400,height=500,menubar=no,toolbar=no‘)} else{alert("结束");}      }else{alert("结束");} }     </script>

认识DOM

<a href="http://www.imooc.com">JavaScript DOM</a>

通过ID获取元素

 document.getElementById(“id”) 

注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

innerHTML 属性

Object.innerHTML

Object.style.property=new style;

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

显示和隐藏（display属性）

Object.style.display = value

控制类名（className 属性）

object.className = classname

removeAttribute() 方法删除指定的属性。

编程挑战

<!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
<input type="button" value="改变颜色" onclick="changeColor()" >
<input type="button" value="改变宽高" onclick="changeSize()">
<input type="button" value="隐藏内容" onclick="hidd()">
<input type="button" value="显示内容" onclick="show()">
<input type="button" value="取消设置" onclick="calloff()" >
</form>
<script type="text/javascript">
var change=document.getElementById("txt");
//定义"改变颜色"的函数
function changeColor(){
change.style.color="red";
change.style.backgroundColor="pink";
}
//定义"改变宽高"的函数
function changeSize(){
change.style.width="50px";
change.style.height="100px";
}
//定义"隐藏内容"的函数
function hidd(){
change.style.display="none";
}
//定义"显示内容"的函数
function show(){
change.style.display="block";
}
//定义"取消设置"的函数
function calloff(){
var queding=confirm("确定要重置？");
if(queding==true){change.removeAttribute("style")}
}

</script>

第二种方法

定义在同一个数组中

<input type="button" value="改变颜色" onclick="set.changeColor()"> 

<input type="button" value="改变宽高" onclick="set.changeSize()">
<input type="button" value="隐藏内容" onclick="set.objHide()">
<input type="button" value="显示内容" onclick="set.objShow()">
<input type="button" value="取消设置" onclick="set.offSet()">
</form>
<script type="text/javascript">
var txt=document.getElementById("txt");
var set={
changeColor:function(){
txt.style.color="red";
txt.style.backgroundColor="#ccc";
},
changeSize:function(){
txt.style.width="300px";
txt.style.height="300px";
},
objHide:function(){
txt.style.display="none";
},

objShow:function(){
txt.style.display="block";
},
offSet:function(){
var message=confirm("你确定要重置所有设置么？");
if(message==true){
txt.removeAttribute(‘style‘);
}

}
}
</script>

js基础教程学习笔记

标签：

原文地址：http://www.cnblogs.com/yanran/p/5153947.html