首页手记菜鸟教程js学习笔记记录

菜鸟教程js学习笔记记录

标签：

JavaScript

7.18日

<body>

<script>
    function changeImage(){
//获取元素
    element=document.getElementById("myimage");
//资源匹配
        if(element.src.match("bulbon")){
//资源改变
        element.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/pic_bulboff.gif";
        }else{
            element.class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/pic_bulbon.gif";
        }
    }

</script>
<img id="myimage" onclick="changeImage()"
class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

</body>

<script>
function myFunction(){
y=document.getElementById("demo");  //获取标签
    y.style.color="blue";  //改变字体颜色
}

</script>
<button type="button" onclick="myFunction()">点击这里</button>

</body>

<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
    //获取值
    var x=document.getElementById("demo").value;
//两个等 非数字
    if(x==""  isNaN(x)){
        alert("不是数字");
    }
}

</script>
<button type="button" onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
//获取元素替换内容
    document.getElementById("demo").innerHTML="hello js";
}
</script>
</head>
<body>

<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>

</body>

<body>

<h1>我的第一个 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>

<script>
//js放到body内部
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>

</body>

<body>

<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
//引入外部js 外部脚本不能包含 <script> 标签。  
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="myScript.js"></script> 
</body>

<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
//输出时间
document.write(Date());
</script>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a=5;b=10;
//控制台打印 程序中调试是测试，查找及减少bug(错误)的过程。
console.log(a+b);
</script>
var cars=["a","b","c"];
var person={name:"yeqing",sex:"man"};
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值
//JavaScript 中，常见的是驼峰法的命名规则，如 lastName (而不是lastname)。

//您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：
document.write("你好 \
世界!");
<script>
var person=
{
    interest:"pingpong",
    firstname : "John",
    lastname  : "Doe",
    id        :  5566
};
document.write(person.interest + "<br>");
document.write(person["interest"] + "<br>");
</script>
//JavaScript 变量均为对象。当您声明一个变量时，就创建了一个新的对象。
//JavaScript 对象是变量的容器。

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
</script>

<button onclick="f('yq','java')">点击这里</button>

<script>
function f(name,job){
alert("welcome"+name+",job:"+job);
}   

</script>
<button id="b1" onclick="getElementById('b1').innerHTML=Date()">现在的时间是?</button>
<button onclick="this.innerHTML=Date()">现在的时间是?</button>

<script>

var x = 'It\'s alright';  //转义字符
var y = "He is called \"Johnny\"";

document.getElementById("demo").innerHTML = x + "<br>" + y; 

</script>
<script>
//不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：
x="abc"; // x is a string
y=new String("cde");  // y is an object  typeof 输出类型
document.getElementById("demo").innerHTML =
typeof x + " " + typeof y;
</script>
<script>
var x = "John";              // x 是字符串
var y = new String("John");  // y 是一个对象
document.getElementById("demo").innerHTML = x===y;
</script>
<p>=== 为绝对相等，即数据类型与值都必须相等。</p>
</body>
function myFunction()
{
    //绝对不等于（值或类型不相等）
    var x=5;
    document.getElementById("demo").innerHTML=x!=="5";
}
</script>

<script>
function myFunction()
{
    var age,voteable;
    age=document.getElementById("age").value;
    voteable=(age<18)?"未成年不能进入":"成年人可以进入";
    document.getElementById("demo").innerHTML=voteable;
}
</script>

<script>
var r=Math.random(); //获取随机数
var x=document.getElementById("demo")
if (r>0.5) //如果大于0.5
{
    x.innerHTML="<a href='http://w3cschool.cc'>visit w3cschool</a>";
}
else
{
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>

点击查看更多内容