<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS基础01</title>
<style type="text/css">
#div1 {
width: 200px;height: 200px;background: red;
}
</style>
</head>
<body>
<!--HTML5的组成部分
1.结构(html)
2.样式(css)
3.行为(JavaScript)
-->
<!--JavaScript,一种脚本语言,也属于编程语言,负责与网页相关的行为和动作.
什么是编程语言???
标准:具备"图灵完备"的语言.
图灵完备:可以执行任何计算的编程语言.
什么是脚本语言???
传统的编程语言(C语言)
编写->编译->链接->可执行的文件.
JavaScript 脚本语言省去了传统的编程语言繁琐的过程,使用JavaScript写出的代码,就是最终要执行的文件.
JavaScript与Java没有任何关系.
JavaScript的组成部分:
1.ECMAScript:基本的语法结构,基本的对象.
2.DOM:document object model 文档对象模型.描述处理文档内容的方法.
3.BOM:browers object model 浏览器对象模型.描述与浏览器交互的方法.
JavaScript的特点:
1.解释性执行,脚本语言
2.面向对象,一切事物皆对象
3.弱类型,没有严格的数据类型.
4.事件驱动,由事件触发执行.
5.跨平台.
-->
<!--基本语法
1.如何导入js
a.外部导入js,创建一个js文件,使用<script src=""></script>方式引入外部的js文件.
b.内部js,把所有与js有关的代码用<script></script>标签包裹.然后嵌入到html文档里.
2.js的输出方式:
a. alert(),显示一个带有指定内容和ok按钮的警告框.
b.console.log(),在控制台输出内容,多用于代码测试.
c.document.write(),向html文档中写内容.
d.innerHTML,向元素内容里写内容.
e.修改元素的属性值.
f.修改元素的样式.
3.常量:在程序运行期间,不可被修改的量.
a.数字常量:1,10,-5,0.8,-0.375
b.字符串常量:"刚哥真帅"'恩,是的!'
引号可以嵌套:但是双引号里不能嵌套双引号,单引号里不可以嵌套单引号!!!
双引号里可以嵌套单引号,单引号里可以嵌套双引号.
4.变量:在程序运行期间,值可以被改变的量.
变量是一种可以存储数据的容器.
我们关心的是容器里的东西,将数据放到容器中,可以方便的移动位置.
变量的定义:
var 变量名 = 初值
变量名的命名规则:
a.由数字(0~9),字母(a~z,A~Z),下划线(_),美元符号($)组成,数字不能开头
b.不能与系统的关键词重名
c.见名知意.
d.驼峰命名法,帕斯卡命名法,匈牙利命名法.
5.原始数据类型:
a.number 数字类型
b.string 字符串类型
c.boolean 布尔类型
d.null 空值类型
e.undefined 未定义类型
f.object 对象类型
变量的类型由赋的值决定
如果要检测变量的类型,使用typeof关键词
显示转换:
a.字符串转数字
b.数字转字符串
c.数字转布尔
6.运算符
a.算数运算符(+ - * / % ++ --)
b.赋值运算符(= += -= *= /= %=)
c.关系运算符(> < >= <= == === != !==)
d.逻辑运算符(&& || !)
隐式转换:
a.当"+"运算符两端,一端是数字,一端是字符串时,做的是字符串拼接.
b.当是"- * / %"运算符时,一端是数字,一端是字符串时,做的是算数运算.
-->
<!--元素的获取
获取元素
语法:
document.getElementById()
-->
<div id="div1"></div>
<input type="button" id="btn" value="点击"/>
<script type="text/javascript">
//获取元素
var btn = document.getElementById("btn")
var div1 = document.getElementById("div1")
//给按钮元素绑定点击事件
btn.onclick = function(){
//改变div背景色
div1.style.background = "greenyellow"
//获取输入框的值
}
</script>
<!--<script type="text/javascript">
alert("123啊啊啊aaa")
</script>-->
<!--<script type="text/javascript" src="first.js">
</script>-->
<!--常量和变量-->
<!--<script type="text/javascript">
//变量的定义(初始化)
// var name = "贾清阁"
// var age = 18
// console.log(name)
// console.log(age)
// //变量的使用
// name = "李四"
// age = 20
// console.log(name)
// console.log(age)
//
// var name1 = name
// console.log(name1)
//赋值的过程是一个拷贝的过程.
//变量在等号的左边一定是在赋值,在等号的右边一定是在取值!!!
//变换两个变量里的值
var a = 10
var b = 5
var c =a
a=b;b=c;
console.log(a,b)
//连除倒取值
//按权求和
//如果连续定义多个变量用逗号隔开,只需要在最开始写var即可.
var a = 5, b = 10, c = 15
//驼峰命名法(推荐使用)
// var appleCount = 20
//帕斯卡命名法
// var AppleCount = 20
//匈牙利命名法
// var iAppleCount = 20
</script>-->
<!--原始数据类型-->
<!--<script type="text/javascript">
//数字类型
var num1 = 10
var num2 = 2.65
var num3 = -9.55
//字符串类型
var str1 = "你好"
var str2 = "今天是'周一'吗?"
//布尔类型(真假类型)
var isNum1 = true
var isNum2 = false
//空值类型
var n = null
//未定义类型
var u
//对象类型
var per = {
name:"张三",
age:20
}
console.log(typeof num1)
console.log(typeof str1)
console.log(typeof isNum1)
console.log(typeof n)
console.log(typeof u)
console.log(typeof per)
//输出空值变量的类型,打印的是object
//字符串转数字
var n1 = Number("12a34")
console.log(n1)
//如果转换的字符串里有非数字字符无法转化成数字时,打印变量会显示NaN(Not a Number)
var n = "1234"
var n1 = Number(n)
console.log(n1)
//数字转字符串
var n2 = String(123)
console.log(typeof n2)
//其他类型转布尔
var n3 = Boolean("aa")
console.log(n3)
//非0即为真!!!!
</script>-->
<script type="text/javascript">
//运算符两边加空格
var a = 10, b = 0
console.log(a + b)
console.log(a - b)
console.log(a * b)
console.log(a / b)
console.log(a % b)
//当除数为0时,执行除法得到的结果无限大,执行取余得到的结果是NaN.
//++自加运算
var a = 5
a++ //等价于a = a + 1
console.log(a)
++a //等价于a = a + 1
console.log(a)
var b = 10, f
f = b++ //等价于 f = b b = b + 1
console.log(f, b)
f = ++b //等价于 b = b + 1 f = b
console.log(f, b)
//++(--)在前,先执行++(--),再执行其他的运算;
//++(--)在后,先执行其他的运算,再执行++(--)
var x = 3, y = 5, z = 7
x = y++
y = ++z
z = ++x
console.log(x,y,z)
//隐式转换
var result = 10 + ""
console.log( result)
var result = 10 - "aaa"
console.log( result)
//赋值运算符
var p
p = 10
p += 10 //等价于 p = p + 10
console.log(p)
p -= 10 //p = p - 10
console.log(p)
p *= 10
console.log(p)
p /= 10
console.log(p)
p %= 10
console.log(p)
//关系运算符
var n = 10, m = 100, result
console.log(n>m)
console.log(n<m)
console.log(n>=m)
console.log(n<=m)
var a = 10, b = "10"
console.log(a == b)
console.log(a != b)
console.log(a === b)
console.log(a !== b)
//注意:===(!==)在作比较时,先比较两侧的数据类型是否一致,不一致,返回false(true),如果一致再比较内容;==(!=)在作比较时,当类型不一致时会先把两侧的数据类型转化成一致,在比较内容,如果一致,返回true(false).
//逻辑运算
// 1.逻辑与 && 运算符两端必须同时结果为真,整个式子的结果才为真,否则为假.
var i = 3, j = 5, k = 7, result
result = i > j && j < k
console.log(result)
// 2.逻辑或 || 运算符两端必须同时为假,整个式子才为假,否则为真.
var i = 3, j = 5, k = 7, result
result = i > j || j < k
console.log(result)
// 3.逻辑非 ! 逻辑否定 颠倒黑白
console.log(!i > j)
console.log(i, j)
//逻辑与和逻辑或的短路现象
//如果系统能从第一个式子就可以判断出整个式子的结果,系统就不会再去执行第二个式子.
var a = 5, b = 10, c =20,res
res = a > b && ++c
console.log(res, c)
</script>
</body>
</html>
5380
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
