js基础
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.书写匿名函数逻辑。