1. 技术文章
  2. javascript入门篇

javascript入门篇

由 你。 提交于 2020-01-26 11:57:22

alert

<button type="button" onclick="alert('Welcome!')">点击这里</button>

变量类型

...//布尔 数字 字符串
//----------------------------------------------------
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"]; //数组
//----------------------------------------------------
var person={firstname:"Bill", lastname:"Gates", id:5566}; //对象
name=person.lastname;
name=person["lastname"];//引用

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
//----------------------------------------------------
cars=null; //null
person=null;

//声明变量类型
var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;
//----------------------------------------------------
//全局 JavaScript 变量  在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
/*JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。*/

基本语句

和c++里面几乎一样
这包括if…else while for break switch

错误捕捉

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义

try
{
  //在这里运行代码
}
catch(err)
{
  //在这里处理错误
}

HTML DOM （文档对象模型）

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
var x=document.getElementById("main");//通过 id 找到 HTML 元素
var y=x.getElementsByTagName("p");//通过标签名找到 HTML 元素

通过HTML DOM改变 HTML 元素

<script>
//-----------------------------------------------------------------
    document.getElementById("p1").innerHTML="New text!";
//-----------------------------------------------------------------
    document.getElementById("image").src="landscape.jpg";
//-----------------------------------------------------------------
    document.write("<h1>This is a heading</h1>");
    document.write("<p>This is a paragraph.</p>");//把 <p> 元素写到 HTML 文档输出中：
    //使用 document.write() 仅仅向文档输出写内容。
    //如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：
</script>

通过HTML DOM改变 css元素

document.getElementById("p2").style.color="blue";

通过HTML DOM 事件

HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时

<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>

HTML DOM 元素（节点）

//添加
var para=document.createElement("p");
var node=document.createTextNode("这是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
//删除
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);

小提示

  • 单行注释以 // 开头。多行注释以 /* 开始，以 */ 结尾。
  • JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型
var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串
  • 脚本可位于 HTML 的 <body>或 <head>部分中，或者同时存在于两个部分中。
    通常的做法是把函数放入<head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
  • 在 <head>或 <body>中引用脚本文件都是可以的。实际运行效果与您在<script>标签中编写脚本完全一致。
  • javascript两种书写方式
<script src="myScript.js"></script> ///外部文件  外部脚本不能包含 <script> 标签。
<script> </script> ///内部书写方式
  • 分号 :
    通常我们在每条可执行的语句结尾添加分号。
    使用分号的另一用处是在一行中编写多条语句。
    提示：您也可能看到不带有分号的案例。
    在 JavaScript 中，用分号来结束语句是可选的。

================我是分割线==============

下面时很久之前整理的。。。
- JavaScript
ECMAScript 核心
DOM 文档对象模型
BOM 没有统一规范
- var 定义变量
- var width; //定义变量
width=5;
alert(width); //弹出提示框
- width=5; //定义变量，默认全局
alert(width); //弹出提示框
- 单引号和双引号都可以表示字符串
- alert(width); //弹出提示框
window.alert(width); //弹出提示框
alert(window.width); //弹出提示框
- switch
- console.log(“Sum=”+sum); 控制台
- document.write(sum); 在页面输出内容sum的值
document.write(‘sum’); 在页面输出sum

1. 

    <input value="change" type="button"> 按钮

2. 注册事件监听

   <input type="button" value="change" onclick="show()"><!-- 事件处理函数 -->

3. 定义函数

    function show(){
        alert('你点了，我就知道了！');  弹窗
    }

4.事件监听 –>

事件监听 方法一:
   <input type="button" value="change" onclick="show()">
   <script type="text/javascript">
            function show(){
                var d=document.getElementById('show');  
                d.innerHTML='内容变化了'; 
            }
    </script>
 事件监听 方法二

   <input type="button" value="change">
   <script type="text/javascript">
            function show(){
                var d=document.getElementById('show');  
                d.innerHTML='内容变化了'; 
            }
  </script>

  var btn=document.getElementById('btn');
  btn.onclick=show;
 事件监听 方法三
  <input id="btn" type="button" value="change">
  <script type="text/javascript">
        function show(){
            var d=document.getElementById('show');  
            d.innerHTML='内容变化了'; 
        }
  </script>
  var btn=document.getElementById('btn');
  btn.addEventListener('click',show,false);

5. 匿名函数，全部文件加载完成之后执行

    方法一：
        window.onload=function(){
        var btn=document.getElementById('btn');
        btn.addEventListener('click',show,false);
        }
    方法二：
      window.onload=one();
      function one(){
        var btn=document.getElementById('btn');
        btn.addEventListener('click',show,false);
        }

6. 画布

    <canvas id="jredu" width="600" height="300"></canvas>
      <script type="text/javascript">
        var c=document.getElementById('jredu');

        jredu.fillStyle='#ff0000'; //矩形颜色
        jredu.fillRect(10,10,200,200); //填充矩形，默认黑色

        jredu.fillStyle='rgba(0,0,255,0.5)';  // rgba(红,绿,蓝,不透明度0~1)
        jredu.fillRect(150,150,100,100);    
      </script>

7. 划线

   jredu.beginPath();
   jredu.moveTo(50,50);
   jredu.lineTo(300,300);
   jredu.stroke();

11. 画三角形 

    jredu.beginPath();
    jredu.moveTo(50,50);
    jredu.lineTo(300,300);
    jredu.lineTo(250,20);
    jredu.lineTo(50,50);
    jredu.stroke();

    jredu.beginPath();
    jredu.moveTo(50,50);
    jredu.lineTo(300,300);
    jredu.lineTo(250,20);
    jredu.closePath();
    //jredu.lineTo(50,50);
    jredu.stroke();

12. 全部颜色设置

        jredu.strokeStyle='blue';
        // 粗细 
        jredu.lineWidth='39';
        // 创建圆角
        jredu.lineCap='round';
        // 去尖角
        jredu.lineJoin='round';

13. 画圆

    jredu.beginPath();
    jredu.arc(300,150,50,1.5,2*Math.PI);
    jredu.stroke();

    黑色填充的0.5圆
    jredu.beginPath();
    jredu.arc(300,150,50,0,0.5*Math.PI);
    jredu.fill(); 填充黑色

    jredu.fill(); 填充
    jredu.stroke(); 外边框

14. 写文字

    jredu.font="40px Arial";  字体和字号，必须同时存在
    jredu.font="40px 微软雅黑";
    jredu.font="40px 宋体";
    jredu.fillText('hello world',100,100);  默认字体极小

    jredu.strokeText('hello world',200,200); 缕空

15. 画图

    方法一：
    var img=new Image();
    img.src='1.png';
    jredu.drawImage(img,0,0); 

    方法二：防止图片没有加载完成（如360浏览器不给力）当电脑加载出来之后显示？？？
     var img=new Image();
     img.src='1.png';
     img.onload=function(){
         jredu.drawImage(img,0,0);
     } 
     方法三：
     <img src="1.png" id="i" style="display:none">
     var i=document.getElementById('i');
     jredu.drawImage(i,0,0);

     方法四：
     <img src="1.png" id="i" style="display:none">
     window.onload=function{
       var i=document.getElementById('i');
      jredu.drawImage(i,0,0);
     }  

     jredu.drawImage(img,0,0,100,100); 按比例放大、缩小
     jredu.drawImage(img,50,30,200,200,0,0,200,200);  剪切图像，并在画布上定位被剪切的部分
标签
javascript
html代码
var模型
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!