javascript(脚本语言)

一、作用

1. 控制网页交互
2. 元素间交互
3. 事件监听等

二、使用

1. script标签 嵌套JavaScript代码

   <script>
   var f=true;
      if (f) {
       document.write(" <input type=button value=登陆 onclick=alert('哈哈哈')>");
      }
   </script>

2. script标签 使用scrip的 src 属性 降低耦合性 xxx.js

   <script type="text/javascript" src="xxx.js" charset="GBK"></script>

3. 代码注释使用//或/* */

三、变量

定义方式

var name = "小米";
var pi = 3.14;
var x = 7;
var y = 8;
var z = x + y; 

数据类型

var length = 7;                               // 数字number
var lastName = "Gates";                       // 字符串string
var cars = ["Porsche", "Volvo", "BMW"];       // 数组object
var x = {firstName:"Bill", lastName:"Gates"}; // 对象object
var sex = true;                               //布尔boolen
var a;
var a=null                                    //未定义型undefind
typeof(x)                                     //查看类型

运算符

1.算数运算符

2.赋值运算符

3.逻辑运算符

4.比较运算符

四、函数

类别

1.系统函数

2.自定义函数

function fname(参数列表){
  执行体;
    [return 返回值]
}

调用

fname(参数);

可以将函数在js文件中调用，即加载时调用。

五、对象

数组对象

1.定义

var objArray = ["小米","小花","小兰"];

2.遍历

var str;
for(var i=0;i<objArray.length;i++){
  str-=objArray[i];
}
document.getElementById("nameDiv").innerHTML=str//写入HTML

一般对象

1.定义(属性、行为)

var person ={
  name:"小明",
  sex:'男',
  age:30,                      //属性
  setName:function(n){
      this.name = n;
  },
  setAge:function(a){
      this.age = a;
  },
  getName:function(){
      return this.name;
  }                            //行为
}

2.使用

alert(person.name);
alert(person["name"]);
alert(getName());
person.setAge(20);

六、语句

1.判断语句 if-else if

2.循环语句 for while do-while

3.选择语句 switch

4.顺序语句

HTML DOM

DOM:文本对象模型

一、DOM树模型

三种对象

1.元素对象 img

2.属性对象 src

3.文本对象 font

获得元素的方法

1.通过 getElementById()获取

var x = document.getElementById("id值");
x.innerHTML="<font-size='7' color='red'>你好呀~</font>";//写入对应位置HTML语句
x.style.fontSize="50px";//font-size换成fontSize
-------
var img = document.getElementById("id值");
img.src="/图片路径";
img.width="300px"
img.height="300px"//更改属性
alert(img.alt);//获取属性

2.根据标签名getElementsByTagName("tag_name")

var imgArr = document.getElementsByTagName("img");
if(imgArr!=null && img.Arrlength>0){
   var img = imgArr[0];
}//根据标签名返回数组,按顺序从数组中取出使用

3.通过 createElement()...创建

var p = document.createElement("p");
var a = document.createElement("a");
a.href="http://www.baidu.com";
var t = document.createTextNode("我是百度");
a.appendChild(t);//设置嵌套关系:t加入a中
p.appendChild(a);//设置嵌套关系:a加入p中
document.getElementById("div").appendChild(p);//设置嵌套关系;p加入div中
document.getElementById("div").removeChild(p);//移除

事件

一个二级列表联动例子

• 效果：选择不同省，自动联动显示该省下的所有市

• 实现

BOM

浏览器对象模型BOM使JavaScrip有能力与浏览器对话，尚无正式标准，因此才会有Jquery等前端框架。

setTimeout("alert('时间到')",5000);//设置计时器，多少毫秒后做某事
setInterval("alert('时间到')",5000);
var a = setInterval（"function_name()",5000）;//设置循环计时器，每隔多少毫秒做某事
clearInterval(a);//清除计时器
a = setInterval（"function_name()",5000）//重新启动计时器
location.href="www.baidu.com";//跳转可以无需a标签,设置地址栏
history.back();//浏览器后退
history.forword();//浏览器前进

• [ ] 下一步，应该学习框架咯~

html+css+JavaScrip基础知识笔记

原文：https://www.cnblogs.com/beibingji/p/12315992.html