HTML基础之js

引入JavaScript代码，类似与python的import

<script src='public.js' type="text/javascript"></script>

head中引入js与body中引入js区别

html代码从上而下解析，如果在head中引入js， 影响页面打开的速度，存在风险，所有通常放在htmlbody的最下方，这样页面内容先展示，最后在加载js。注意：写在最下面也是有底线的，写在body内部的最底下

注释：

单行注释通过// 多行注释/* */

JS变量：

name='wxl';//默认全局变量
function func（）{
    var name='weilaoshi'；//局部变量
}

JS基本数据类型（JavaScript声明数据类型通过new）

字符串

//定义字符串
var str='天气真好'；
var name='今天'；
//字符串的拼接
var name_str=name+str;
//字符串操作
str='天天开心'
str.charAt(0) 根据角标获取字符串中的某一个字符  char字符
str.substring(1,3) 根据角标获取 字符串子序列 大于等于x  小于y
str.length  获取字符串长度
str.concat('天天快乐' ) 拼接字符串
str.indexOf('开心') 获取子序列的位置
str.slice(0,1) 切片 start end
str.tolowerCase() 变更为小写
str.toUpperCase() 变更大写
str.split('开'，1) 切片 返回数组 参数2 为取分割后数组的前x个元素


数字类型（JavaScript 只有一种数字类型。数字可以带小数点，也可以不带）
 
var age = 18;
var score = 89.22; 
number = '18'; 
// 字符串转
var n = parseInt(number); 
// 转换成小数 
f =parseFloat(number)
布尔类型（true 或 false）
var t = true; var f = false;

 数组类型：

//第一种创建方式 
var list=new Array();
list[0]='好天气'
list[1]='每一天'
//第二种创建方式
var list2=new Array('好天气','每一天');
//第三种创建方式
var list3=['好天气','每一天']；

数组操作
var list3=['好天气','每一天']；

list3.length 数组的长度

list3.push('htq') 尾部追加参数

list3.shift() 头部获取一个元素 并删除该元素

list3.pop() 尾部获取一个元素 并删除该元素

list3.unshift('htq') 头部插入一个数据

list3.splice(start,deleteCount,value)  插入 删除或替换数组的元素

list3.splice(n,0,val) 指定位置插入元素

list3.splice(n,1,val) 指定位置替换元素

list3.splice(n,1) 指定位置删除元素

list3.slice(1,2) 切片

list3.reverse()反转

list3.join('-') 将数组根据分割符拼接成字符串

list3.concat(['abc']) 数组与数组拼接

list3.sort() 排序

对象类型：

var dict={name:'htq',age:18,sex:'男'}；
var age=dict.age;
var name=dict['name'];
delete dict['name'] 删除
delete dict.age 删除

JS条件判断语句：

if(条件){
    执行代码块
}else if(条件){
    执行代码块
}else{
    执行代码块
}；

if (1==1){
    console.log('1111')
}else{
    console.log('222')
}

if (1 == 1) {
    console.log('1111')
} else if (2 == 2) {
    console.log('2222')
}
else {
    console.log('最后')
}

if (1 == 2) {
    console.log('1111')
} else if (2 == 2) {
    console.log('2222')
}
else {
    console.log('最后')
}

if (1 === '1') {
    console.log('1111')
} else if (2 == 2) {
    console.log('2222')
}
else {
    console.log('最后')
}


swith(1){
    case 1:
        console.log(1111)
        break;
     default:
         console.log('2222')
}

JS循环语句：

tmp=['宝马','奔驰','尼桑']
for (var num in tmp){
    console.log(num)
    console.log(tmp[num])
}

tmp={'宝马':'BMW','奔驰':'BC'}
for (var num in tmp){
    console.log(tmp[num])
}

tmp='宝马奔驰尼桑';
for (var char in tmp){
    console.log(tmp[char])
}

tmp=['宝马','奔驰','尼桑'];
for (var i=0;i<tmp.length;i++){
    console.log(i)
    console.log(tmp[i])
}

while (1==1){
    console.log(1111)
}

函数定义：

1、普通函数
function 函数名(形参, 形参, 形参) {
    执行代码块
}
函数名(形参, 形参, 形参);
 
2、匿名函数 匿名函数没有名字，无法调用时找到，将整个函数当做一个参数传递
setInterval(function () {
    console.log(11)
}, 5000);
3、自执行函数创建函数并且自动执行
当引入多个js文件时，函数名可能会出现重复，这时通过自执行函数，保证每一个js文件都会被解析，从而生成独立的容器，防止调用冲突
(function (name) {
    console.log(name)
})('dsx');
 
作用域
Python的作用域是以函数作为作用域的，其他语言以代码块（{}）作为作用域的。
JavaScript是以函数作为作用域
function tmp() {
    var name = 'dsx';
    console.log(name)
}
tmp();
console.log(name);
2、函数作用域在函数未被调用之前，已经创建
var name = 'nhy';
function a() {
    var name='dsx';
    function b() {
        console.log(name);
    }
    return b
}
 
var c = a();
c();
3、函数的作用域存在作用域链（代码不执行时，先生成作用域链）
当函数嵌套函数时，每一个函数为一个作用域，多层就叫做作用域链，查找遵循作用域链规则
function outer() {
    name = 'nn';
    function inner() {
        var name = 'ii'
        console.log('in', name)
    }
 
    console.log('out', name);
    inner()
}
outer();
函数不调用时，只生成作用域，当调用时遵循作用域链执行，name都为hhh
function outer() {
    var name = 'nn';
    function inner() {
        console.log('in', name)
    }
 
    var name = 'hhh';
    console.log('out', name);
    inner()
}
outer();
4、函数内,局部变量提前声明 JavaScript的函数在运行前会找到函数内的所有局部变量执行
var xxx;
function func() {
    console.log(name);
    var name = 'dsx';
}
func();

面向对象：

// 在JavaScript中，方法和类写法类似，区别方式为是否有this，如果有就可以当做是类来用 
// JavaScript的类默认就拥有了Python的构造函数__init__
function Foo(name) {
    this.name = name;
}
// 创建对象时JavaScript需要用到new关键字来创建对象 
var obj = new Foo('dsx');
console.log(obj.name);
 
// 类中定义方法，虽然可以用，但是在多个实例时存在重复实例方法，浪费资源
// 创建对象时，say每次创建对象，都会创意一个say的方法。 
function Foo1(name) {
    this.name = name;
    this.say = function () {
        console.log(this.name)
    }
}
var obj1 = new Foo1('dsx_obj1');
obj1.say();
// 完善类的定义 
function Foo2(name) {
    this.name = name
}
// 类的原型,将共用的的方法抽出来，当在实例化后，只创建了一个叫做Foo2的对象，对象内只有name，在调用方法时去现在Foo中找，没有找到，会在去原型中找
是否有该方法。有执行，没有就报错 
Foo2.prototype = {
    say: function () {
        console.log(this.name)
    }
};
var obj2 = new Foo2('dsx_obj2');
obj2.say();