js基础

Posted 2021-01-17 叹欲

1.书写方式

行内式：<div onclick="alert(‘1。行内式。‘)">我是一个div</div>

内嵌式：<script>alert(‘2.内嵌式。‘)</script>

外链式：<script src="js/index.js"></script>（常用）

2.定义变量

js定义变量使用关键字var

定义变量语法规范:
1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

JS习惯使用小驼峰命名: userName; passWord, getElementById()

3.JS中把数据分为: 简单数据类型(值类型)和复杂数据类型(引用类型):

1、简单数据类型: string（字符串）/number(整数和小数)/boolean（布尔值）/undefined /null
2、复杂数据类型: array(list)/object(dict)/function(def)...

4.for循环语句

第一种:
var num = 5;
if(num < 7){
alert(‘5小于7‘)
}

第二种:
if(num > 7){
alert(‘5大于7‘)
}else{
alert(‘5不大于7‘)
}

第三种:
if(num === 1){
alert(‘num == 1‘)
}else if(num === 3){
alert(‘num == 3‘)
}else if(num === 5){
alert(‘num == 5‘)
}else{
alert(‘num 不是 1/3/5...‘)
}

5.函数

function foo(){
　　alert(‘hello word‘)

}

foo()

预解析( 变量声明提升和函数声明提升 )

预解析就是js解析器不会直接执行script标签内部的内容，会正则扫一遍。
a.检查语法错误。 b.声明提升。( 变量声明提升和函数声明提升 )

b.声明提升。( 变量声明提升和函数声明提升 )
变量声明提升: 在预解析的时候，js解析器会把所欲的变量提升到script标签最顶端，值提升变量名，比提升变量值。

6.获取标签

html标签和JS代码是同步加载的。如果执行js代码的时候，还没有加载到标签，那么返回null.
为了解决这个问题，js给我们引入一个一个方法: window.onload = function(){}

JS获取标签有很多方法，通过id获取标签: document.getElementById()

7.操作标签属性

1.普通属性: href / title / name / src..

普通属性，能够获取值也能够赋值。操作方便直接标签点属性名。

2.双闭合标签，内部的内容。    innerHTML（***识别标签***）

3.value属性。

var inp = document.getElementById(‘inp‘)
console.log(inp.value)
inp.value = ‘input的赋值内容‘

 <input id="inp" type="text" value="input的默认值">

8.1.class属性操作className

style:属性是一个对象（style.width）

外链式操作的不是标签本身，而是操作引入的link标签的路径

var link = document.getElementById("foo")

 link.href = ‘css/demo.css‘

 <link id="foo" rel="stylesheet" href="">

9.

事件驱动: js是一门以事件驱动为核心的语言。
当事件满足条件后，绑定的函数逻辑自动执行。

事件书写逻辑:
1.获取标签。
2.绑定事件。
3.书写匿名函数逻辑。