10.javascript
1. js : javascript: ecmascript(ES6)
1.基于对象, 2.事件驱动 3,弱类型 4.脚本
-
- 基于对象????:封装、继承 没有多态
- 事件驱动: onclick。。。onchange
- 弱类型: 变量没有类型; var a = 1; a = “”; a = new Date();
HTML:标记
CSS: 标记的样式
JS: 动起来
-
js出现的位置:
-
写在当前页中 script标签中
-
写外部文件中,用script标签的src属性关联
<!DOCTYPE html> <html lang="en"> <head> <!-- <base href="11111" /> --> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link type="text/css" rel="styleSheet" href="../datepicker/skin/WdatePicker.css" /> <script language="JavaScript" type="text/JavaScript" src="./test1.js"></script> <script language="JavaScript" type="text/JavaScript"> function abc(param0) { // 内容 var x = param0.innerHTML alert(x) window.close(); } console.log(a1); </script> </head> <body> <button onclick="abc(this)">hello world</button> </body> </html>
-
2. 注释;
Ø单行注释://this is a comment
Ø多行注释:/* This is a comment
block. It contains
several lines */
3. 字面量:
var a = 1;
console.info(typeof(a)); // number
a = 1.1;
console.info(typeof(a)); // number
var a = "hello world";
console.info(typeof(a)); // string
a = '你好'
console.info(typeof(a)); // string
a = `你好
${a}
`; // es6 模板字符串
console.info(typeof(a)=='string'); // string
console.info(a);
a = /\d+/g;
console.info(typeof(a)); // object
console.info(a instanceof RegExp)
// json
a = [1, 3, 5]
console.info(typeof(a)); // object
console.info(a instanceof Array)
// json
a = {ename: "tom", age: 10, getAge:function(){return this.age}}; // object 字面量对象
console.info(a.getAge())
console.info(typeof(a)); // object
console.info(typeof(a.getAge())) // console.info(typeof(a.getAge()))
a = function(){}
console.info(typeof(a)); // function
console.info(a instanceof Function)
a = null;
console.info(typeof(a)); // object
a = undefined;
console.info(typeof(a)); // undefined
a = false
console.info(typeof(a)); // boolean
var a2 = NaN; // not a number
console.info(typeof(a2)) // number
console.info(NaN == NaN) // false
var a3 = Infinity
console.info(typeof(a3)) // number
console.info(Infinity == Infinity) // true
console.info(1 / 0)
4. 变量的作用域:
- 全局:window对象
- 函数: function内
- 闭包:内不函数可以访问外部函数的变量
var a = 10;
function abc() {
var b = 100;
{
var c = 1000
}
for (var i = 0;i<10;i++) {
}
console.info(i)
console.info(a)
console.info(b)
console.info(c)
function bcd(params) {
// debugger
var d = 10000;
console.info(b); // 可以访问外部函数的
console.info(c)
}
// 访问不了内部函数里的东西
// console.info(d)
bcd();
}
abc();
function b1() {
var b = 10;
return function() {
return b;
}
}
var b = 10;
console.info(b1()())
-
let 变量: 和java一样的作用域
-
函数中有变量提升: 定义放在最前面
-
函数内不写var变量是全局: this===window
// 1. let语法 // function abc() { // { // let c = 10; // } // for (var i = 0; i < 10; i++) { // let i = 0 // // debugger // } // console.info(i); // console.info(c); // } // abc(); function xyz() { var a = 100; // 3.不写var就变成全局的了 console.info(a); // 100 console.info(c) // 2 undefined变量提升 var c = 10; } xyz(); console.info(a); // 100
5. js数据类型:
-
数值类型: number
- NaN: not a number; // isNaN()数字判断
- Infinity: 1/0 无限
-
字符串:
- ` 可以写${变量}` ‘’ “” 三种
-
布尔: true, false,
-
对象: object
- null: 对象为空
- 数组:Array
- 正则
/\d/
RegExp
-
函数类型; function
- Function类型:Object
-
未定义类型:undefined
var a2 = NaN; // not a number console.info(typeof(a2)) console.info(NaN == NaN) // false var a3 = Infinity console.info(typeof(a3)) console.info(Infinity == Infinity) // true console.info(1 / 0) var a4; console.info(a4); // undefined var a5 = null; console.info(a5); // null console.info(a4 == a5) // 双等 内容相等 console.info(a4 === a5) // 完全一致(类型和内容) console.info(1 == true) // 1和true可以比较
6.表达式与运算符
-
typeof(a); 获取变量类型
-
n instanceof 类型
-
delete: 删除属性
var n = {ename: 'tom', age: 10}; console.info(n) delete n.age // 删除对象的0属性 console.info(n)
-
in语法: for…in
var n = {ename: 'tom', age: 10}; console.info("-----for in 遍历属性------") for (var x in n) { console.info(`属性:${x} 值:${n[x]} \`) } console.info("--遍历数组---------") var n = [1, 3, 5]; for (var x in n) { console.info(`属性:${x} 值:${n[x]}`) } console.info("-----------")
-
IF 语句
-
if的条件 有值就是true; 无值就是false;
-
“” 0 null undifined
<script> var a = 10; if (a) { // 有值就是true console.info(1) } else { console.info(2) } function func1() { // document.getElementsByName("ename")[0].value 获取input的输入内容"" if(!"") // if (document.getElementsByName("ename")[0].value == "") if (!document.getElementsByName("ename")[0].value) { // 没有值就不让提交 document.getElementById("msg").innerHTML="员工名必须输入!" return false; } else { document.getElementById("msg").innerHTML="" return true; } } </script> <form action="aa"> <input name="ename" oninput="func1()" /> <span id="msg" style="color:red"></span> <button>提交</button> <!-- 提交按钮不提交 return false --> <button onclick="return false">提交</button> <button onclick="return func1()">提交</button> </form> // emca统一了js的标准, 网景、GG、FF、IE-MS Jscript var abc = function () { var value = arguments[0] || 'hello' console.info(value) } abc(); // hello abc("1234") // 1234 abc = 1; console.info(abc)
7.函数:
-
第一种:直接定义
-
定义遍历
-
定义Function类对象
arguments: 参数数组
function xyz() { for (var i = 0; i < arguments.length; i++) { console.info(arguments[i]) } } console.info(xyz); xyz(); xyz(1); xyz(1, "hello"); xyz(1, "hello", new Date()); var a3 = function(){console.info("aaaa")}; var a4 = new Function("console.info(\"aaaa\")"); a4()
-
函数还可以当类用
// 函数可以当成类 function Student(pname) { // 模拟属性私有化 var name = pname; getter=function() { return name; } setter=function(pname1) { name = pname1; } } Student(); var stu = new Student("tom1"); var stu1 = new Student("tom2"); console.info(stu.name); console.info(stu1.name); // 公开方法 stu.setter("tom3"); stu1.setter("tom44"); console.info(stu.getter()) console.info(stu1.getter())
8. with(){};修改作用域链
var a1 = {ename: 'tom', age: 10} with(a1) { debugger console.info(ename) }
stu.setter("tom3"); stu1.setter("tom44"); console.info(stu.getter()) console.info(stu1.getter())
# 8. with(){};修改作用域链 ```js var a1 = {ename: 'tom', age: 10} with(a1) { debugger console.info(ename) }
-
-